Editing rows in the popup window about jquery-datatables-editable HOT 46 OPEN

This is not possible yet. I'm planning to implement popup edit but I'm still 
trying to find some generic way to do this.

i have a popup edit enabled on my site right now, and it works flawlessly.  it 
preloads all the data for the item being edited, validates the form, and 
submits the changes to the server.  Once I work out the kinks in the rest of 
the application I'm developing, I will post a link and you can take a look at 
my code.

I've done some progress too. I will post the (horrible) code here.
I didn't touch original code, instead I'm "jquerying" to obtain desire result.

1) add a modify button to 'add' and 'remove' ones

2) when user clicks on add button, populate (thanks to rel attr) the selected 
row datas in the creation form, then generates 'click' on 'add' button to 
execute jquery.datatable.editable normal code, maintain a global var flag 
indicating we are modifying a cell 

3) when user click the 'ok' button, jquery.datatable.editable inserts a new row 
whith the modified data, so we have to DELETE the 'old' selected row  in the 
table 

Of course, (3) is not a correct way to do it, but from outside plugin, this is 
a solution.

Here is how I have implemented the edit functionality.

1. I created a new button:
<button id="btnEditRow">Edit Selected item</button>

2. I have jquery for this button, and for when the button is enabled:
$('#btnEditRow').button({icons: {primary:'ui-icon-pencil'},
     disabled: true
    }).click(function() {
        $( "#edit-form-div" ).dialog( "open" );
        $.ajax({
            type: "POST",
            dataType: "json",
            data: ({id : clickedRowId, ref : "items", action : "fetch" }),
            url: "edit.php", 
            context: document.body,
            success: function(data) {
            $("#ed_description").val(data.i_description);
            $("#ed_scale").val(data.i_scale);
            if(data.i_partnumber == "unk") {
                $("#ed_partnumbercbx").attr('checked','checked');
                $("#ed_partnumber").val("");
                $("#ed_partnumber").attr("disabled", true);
            } else {
                $("#ed_partnumber").val(data.i_partnumber);
                ed_partnumber.attr("disabled", false);
            }
            if(data.i_roadnumber == "n/a") {
                $("#ed_roadnumbercbx").attr('checked','checked');
                $("#ed_roadnumber").val("");
                $("#ed_roadnumber").attr("disabled", true);
            } else {
                $("#ed_roadnumber").val(data.i_roadnumber);
            }
                $("#ed_manufacturer").val(data.i_manufacturer);                 
$("#ed_roadname").val(data.i_roadname);
$("#ed_value").val(data.i_value);
$("#ed_type").val(data.i_type);
$("#item_id").val(data.i_index);
      }
   });
});
$("tbody", oTable).click(function (event) {
    if ($(event.target.parentNode).hasClass("row_selected")) {
        $('#btnEditRow').button( "option", "disabled", false );
    } else {
        $('#btnEditRow').button( "option", "disabled", true );
        clickedRowId = 0;
    }
});     

3. I created a form in a div for the edit:

<div id="edit-form-div">
    <form id="edit-form" action="#">
        <br />      
        <div class="edit_error" style="display:none;">
          <img src="css/images/important.gif" alt="Warning!" width="24" height="24" style="float:left; margin: -5px 10px 0px 0px; " />
          <span></span>.<br clear="all" />
        </div>              
        <label for="ed_scale">Scale:</label><br />
        <select name="ed_scale" id="ed_scale">
            <option value="" />
        <?php
            // get values here
        ?>
        </select>
        <br />
        <label for="ed_manufacturer">Manufacturer:</label><br />
        <select name="ed_manufacturer" id="ed_manufacturer">
            <option value="" />
            <?php
                // get values here
            ?>
        </select>
        <br />
        <label for="ed_partnumber">Part Number:</label><br />
        <input name="ed_partnumber" type="text" id="ed_partnumber" value=""/> or <input name="ed_partnumber" id="ed_partnumbercbx" type="checkbox" value="unk"  />Unknown
        <br />
        <label for="ed_roadname">Road Name:</label><br />
        <select name="ed_roadname" id="ed_roadname">
            <option value="" />
            <?php
            // get values here
            ?>              
        </select>
        <br />
        <label for="ed_type">Type:</label><br />
        <select name="ed_type" id="ed_type">
            <option value="" />
            <?php
            // get values here
            ?>              
        </select>
        <br />
        <label for="ed_roadnumber">Road Number:</label><br />
        <input name="ed_roadnumber" type="text" id="ed_roadnumber" value=""/> or <input name="ed_roadnumber" id="ed_roadnumbercbx" type="checkbox" value="n/a" />N/A
        <br />
        <label for="ed_description">Description:</label><br />
        <input name="ed_description" type="text" id="ed_description" value="" size="30" maxlength="50" />
        <br />
        <label for="ed_value">MSRP / current value (nearest dollar):</label><br />
        <input name="ed_value" type="text" id="ed_value" value="" size="10" />
        <br />
        <input type="hidden" name="ref" value="edit-item" />
        <input type="hidden" name="item_id" id="item_id" value="" />
    </form> 
</div>

4. Here is the jquery for the edit form div:
$("#edit-form-div").dialog({
    title: "Edit item",
    autoOpen: false,
    width: 500,
    modal: true,
    buttons: {
        "Edit Item": function() {
            if($("#edit-form").valid()) {
                $("#edit-form").submit();
                $( this ).dialog( "close" );
            }
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
        $(':text',"#edit-form").val("");
        ed_partnumber.attr("disabled", false);
        ed_roadnumber.attr("disabled", false);
        $(':input',"#edit-form").removeAttr('checked').removeAttr('selected');
    }
});

5. The validation code for the edit form:
$("#edit-form").validate({
    rules: {
        ed_scale: "required",
        ed_manufacturer: "required",
        ed_roadname: "required",
        ed_type: "required",
        ed_description: "required",
        ed_value: "required",
        ed_partnumber: { required: "#ed_partnumbercbx:unchecked" },
        ed_roadnumber: { required: "#ed_roadnumbercbx:unchecked" }
    },
    onkeyup: false,
    onclick: false,
    messages: { },
    invalidHandler: function(e, validator) {
        edit_errors = validator.numberOfInvalids();
        if (edit_errors) {
            var message = edit_errors == 1
                ? 'You missed 1 field. It has been highlighted below'
                : 'You missed ' + edit_errors + ' fields.  They have been highlighted below';
            $("div.edit_error span").html(message);
            $("div.edit_error").show();
        } else {
            $("div.edit_error").hide();
        }
    }, 
    submitHandler: function(form) {
        var partnumber_ed, roadnumber_ed;
        $("#ed_roadnumbercbx").is(":checked") ? roadnumber_ed = "n/a" : roadnumber_ed = ed_roadnumber.val();
        $("#ed_partnumbercbx").is(":checked") ? partnumber_ed = "unk" : partnumber_ed = ed_partnumber.val();
        $.ajax({
            type: "POST",
            url: "edit.php",
            context: document.body,
            data:({id : $("#item_id").val(),ed_description : $("#ed_description").val(),ed_scale : $("#ed_scale").val(), ed_manufacturer: $("#ed_manufacturer").val(), ed_roadname:$("#ed_roadname").val(), ed_value : $("#ed_value").val(), ed_type : $("#ed_type").val(), ed_partnumber : partnumber_ed, ed_roadnumber : roadnumber_ed, ref : "items", action : "update" }),
            success: function(){
                location.reload();
            }
        });                         
    }
}); 

I think that about does it.

I see what you have done here but I wil need to see how to integrate this into 
the standard datatables editable.
When I add itit should be more generic.

I will try to ad something likethis in the next version.

Thanks,
Jovan 

Glad to be of help. Obviously, my implementation is specific to my application, 
but hopefully it provides some sort of guidance.

I am interested in similar generic functionality but a slight variance:

1. I don't want to edit the data, read only.
2. I don't want to necessarily show the same columns as on the table i.e. I'm 
using m_DataProp and the table is only showing some of the columns, a summary - 
the popup will display further information not visible in the table alongside 
the table column data.

Is there any updates on this topic? Maybe a ETA for when this feature would be 
available.

Hi,

If you are willing to try it and make suggestions I have created an example on 
the 
http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-popupedit.html. 
This is still in beta version because I'm trying to create some generic way to 
implement editing, deleting, copying and other actions in the table.

Thanks,
Jovan

Issue 54 has been merged into this issue.

I tried the ajax-popupedit.html.  Worked flawlessly on the website, but when I 
tried extracting the code from the example it always shows the edit popup on 
the screen just before the table.  Tried IE and Firefox. The only thing I 
changed was the location of the css and js files.  An ideas?  I think I have 
the latest versions of all the .js files.  Screenshot attached.

Maybe some JavaScript is not loaded or there is some JS error? Maybe query-ui 
is not loaded (jquery ui dialog hides and shows popup). Without direct access 
to your code I can just guess what could happen.

Jovan

Jovan,
First, thank you for all your great work on DataTables editable!

I'm trying to use this on a website I have under development.
I could not get it to work in my code, the Edit text is not clickable (ie, it's 
not a link) and the formEditData always shows up.
I copied your code to my website, but it did not work either.
http://wwwtest.registrar.wisc.edu/JQuery-DataTables-Editable-1.3/ajax-popupedit.
html
I believe that you will be able to access that page, if not, I will upload to a 
production server.
Is it possible that I need a beta version of datatables.editable.js?
Any help appreciated!
Thanks
Jim

I copied down the version 2.0.6 of jquery.dataTables.editable.js from 
http://jquery-datatables-editable.googlecode.com/svn/trunk.
The example page you provided now works correctly on my server, so that solved 
part of the issue.

But, on my page, http://wwwtest.registrar.wisc.edu/wacrao/logon.html, the Edit 
text still is not clickable, and no dialog opens.
Any suggestions?
Thanks
Jim

I was able to get the Edit text open the Edit Dialog when clicked.
I am using server side processing. Normally, in server side processing, your 
<tbody> tag contains the following:
    <tbody>
        <tr>
        <td colspan="2" class="dataTables_empty">Loading data from server</td>
      </tr>
      </tbody>
By placing the following into the table body tag, I was able to get the in row 
Edit link to work correctly:
    <tbody>
        <tr>
            <td>
                 <a class="table-action-EditData">
                    Edit</a>
            </td>
            <td>
                COLUMN_2
            </td>
            <td>
                COLUMN_3
            </td>
            <td>
                COLUMN_4
            </td>
            <td>
                COLUMN_5
            </td>
            <td>
                COLUMN_6
            </td>
      </tr>
      </tbody>

Note that I do have <a class="table-action-EditData"> already coming from the 
DB for each row. But unless I also added the above to the table body, the Edit 
link would not work.

In the Edit Dialog, how would I populate a select (dropdown) from a DB, and how 
to set the selected option so that it is the same as the current value?

Hi,

In order to populate dropdown from a DB you should use any standard server-side 
code as you would use in the regular forms. I don't know what technology you 
are using but one query that select items from database and for loop to 
generate <li> elements in the page will be enough.

If value of the item in the select list matches the value in the cell it will 
be automatically populated. On the page you have setup 
http://wwwtest.registrar.wisc.edu/JQuery-DataTables-Editable-1.3/ajax-popupedit.
html you can see that if you click on the internet explorer Internet Explorer 
5.5  engine version will be populated to value 5.5. Make sure that these values 
are same sometimes it has problems when  there are html tags or even spaces in 
the cell so it might not match these values.

Regards,
Jovan

Jovan,
Thanks for the quick reply, I think that help explain the problem I am seeing. 
Unfortunately, not sure how to fix it. 
The options lists, for the inline editor and the pop up dialog editor, are 
being loaded using json via ajax from a PHP call into a MySQL DB. They are both 
loaded on page load.
The VALUE of the option elements in the select are numbers, corresponding to 
the org_id from the DB.
But what is displayed in the cell is text.
What I find odd is that the option list in line editor correctly goes to the 
correct item in the drop down list. But the option list in the pop up dialog 
when you click on edit does not go the correct tiem in the list.
http://wwwtest.registrar.wisc.edu/wacrao/logon.html is the page that is not 
working correctly.
I have some thoughts on how to fix, like storing the org_id in a hidden field 
in the table, etc. But not sure if that is best.
Any suggestions on the best way to resolve?
Thanks
Jim

I solved the problem where the option value is not the same as the option text 
(for instance, when option value is a number and the option text is text).

I'm using version 2.0.6 or datatables editable.

After line  1192, I iterate through all the select options to find which text 
matches the value from the table.
I then get the value of that select and set selected to that value.

If you think this will cause problems with other functions, please let me know.
                                                for (i=0;i<=this.options.length-1;i++) {
                                                    if (this.options[i].text.toLowerCase() == sCellValue.toLowerCase()) {
                                                        $(this).val(this.options[i].value);
                                                    }
                                                }

Please could you send working code for Editing rows in the popup window

Hi,

I have integrated your suggestion in version 2.1. You can see how it works now 
on the 
http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-popupedit.html.
Version 2.1. of plugin contains this change and includes support for multiple 
select lists. Could you take this version and confirm does it work on your side 
too?

Thanks,
Jovan

Hi,


Is it possible to add a button Edit like Add or Delete one to edit the selected 
row in the pop-up window

Thanks,
Colin

Hi,

Not at the moment. The only way to edit it is via inline cell editor and inline 
edit button. I will consider this as a change for the future version.

Jovan

Hey! thanks a lot its exactly what I wanted. It works very well in client-side, 
I'm trying to update a database, how could i get the DATAROWID? the row is not 
sending the id as when I delete a row....what am I doing wrong??? Thanks!

Hi,

Could you take the latest version where this is enabled? You will need to put 
some hidden field with class DT_RowId, e.g.:

<input type="hidden" name="id" id="id"  class="DT_RowId" />

You can see it in action in 
http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-popupedit.html

Could you please let me know whether it works, and if it is ok I will finally 
make this edit popup functionality official.

Thanks,
Jovan

[deleted comment]

Yes man definitely for me it worked!!!! :D:D:D! thanks!

Hey,

This works like a charm. Very nice feature.

I have difficulty refreshing the table after I save the new values to the 
database.
with just jeditable, 
oTable.fnClearTable( 0 );
oTable.fnDraw();
did the trick. But with the popup edit i have difficulty refreshing the table.
I guess I have to echo back the new values. But how do I do that whit multiple 
values?

Tobias

You should not refresh the table because when popup is closed it updates cells 
in the row that has been edited. Maybe you should check are there any 
JavaScript/Ajax errors?

Jovan

Thanks for answer. 

The strange thing is. When I press 'OK' in the popup edit, for like a half a 
second the new value is updated in de right cell, but it pops back to the old 
value. When you blink you'll miss it. 

I can't find any bugs or errors in Ajax/Javascript script so far. I will keep 
searching and debugging.

How do I send the values back from the PHP page? may be that's the problem.

greetings and thanks

Hi,

Server page should just return "ok" as an answer. See 
http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-popupedit.html 
there I have pointed Ajax request to the plain file that just returns ok (you 
can trace it in FireFug)

Jovan

I can't get it to work.

The only difference I see in Firebug is that in the example they use GET and at 
mine datatable it is POST.

But the answer 'ok' is the same. 

Also inline editing works fine with method POST.  


This is the php script:

$voornaam = $_REQUEST['voornaam'];
    $tussenvoegsels = $_REQUEST['tussenvoegsels'];
    $achternaam = $_REQUEST['achternaam'];
    $nummer = $_REQUEST['nummer'];
    $email = $_REQUEST['email'];
    $open = $_REQUEST['open'];
    $id = $_REQUEST['id'];




    $student = new Student($id);
    $student->voornaam = $voornaam;
    $student->achternaam = $achternaam;
    $student->tussenvoegsels = $tussenvoegsels;
    $student->nummer = $nummer;
    $student->email = $email;
    $student->open = $open;
    $student->save();




    $ok = "ok";
    echo $ok;

        //return $ok;

it saves perfectly to the database but datatables won't update

I managed to get the edit field to work, and my server side request is handled 
correctly, but after I click the "ok" button on my editForm popup, it will not 
hide again, it just stays there.  When I refresh the page, it will show the 
updated row with the updated values (it pulls from the db), but the form will 
not hide for some reason. 

Any ideas?

aoTableActions:[
                                {
                                    sAction: "EditData",
                                    sServerActionURL: "rowEdit.asp",
                                    oFormOptions:{autoOpen: false,modal:true}
                                }

this rowEdit.asp file returns "ok" or a 0 from the server. 

Hey,

I solved the update values in datatables issue. 
It won't work with pipeline. ( "fnServerData": fnDataTablesPipeline )
when I comment this out it updates perfectly.

I am having the same problem where did you comment this out?

[deleted comment]

HI,
I am rather new a jquery but I have the pop up window editor working.
How can I get the row/record ID (from <tr id="123">) to appear as a hidden type 
on the pop up form.
Thanks

Hi,
Is it possible to have the "Edit" or "Update" as a single button at top or 
bottom of the table (like Add/Delete). Currently the  "ajax-popupedit.html" has 
per row which is not great.


thanks in advance

Hi Jovan, Thank you for this wonderful add on. Really love it.

Question for you :)

I too have the same issue with the popup not going away when I click OK. Same 
like comment 33. What I found is the following lines of code ( lines 970 - 976 
) is throwing me error in the addon ( jquery.dataTables.editable.js version 
2.3.3 using with datatables version 1.9.4 )

if (oSettings.aoColumns != null
          && oSettings.aoColumns[rel] != null
          && isNaN(parseInt(oSettings.aoColumns[0].mDataProp))) 
      sCellValue = rowData[oSettings.aoColumns[rel].mDataProp];
} else {
      sCellValue = values[rel];
}

it says rowData is undefined.

I commented those lines and replaced with
      sCellValue = values[rel];

Wondering if it is the right thing to do ? Please let me know.

After making the change everything works fine. Also I don't have anything 
defined for  aoColumns

Thanks again for all your hard work.

HI, 
 I really appreciate working with Datatables. They are really fancy when you have the large data to show from database. Unfortunately I am just having a small issue with the editing feature. When I play with the code the forms that needs to be edited just appear in the page before the table. 

Could you please give me a tips for it ? 

Regards

I had the same problem as comment number 39, and have applied the workaround.

Is this the "right" thing to do, or does this indicate that I'm missing 
something from my configuration which causes this to happen ?

Thanks again for a great plugin.

Phil Nelson
([email protected])

[deleted comment]

Hi,
Im using jquery.dataTables.min(1.9.0), datatable.editable(v2.3.3).
Update and delete are working fine.But add new row popup is not displaying to 
add rows.
Any one have idea abt this?

Hi
The reason for number 39 is that datatables changed mDataProp to mData in 
version 1.9.2. So just change every mDataProp in the editable plugin to mData 
and it will again work fine for versions 1.9.2 and higher :)

comment44 worked . 

Hi Jovan, Thank you for this wonderful add on. Really love it.

Question for you :)

I too have the same issue with the popup not going away when I click OK. Same 
like comment 33. try the solution 39 but did not work I'm using 
query.dataTables.editable.js version 2.3.3 using with datatables version 1.10.4 

Thanks again for a great plugin.

Edward Rodriguez