Editing rows in the popup window

[GoogleCodeExporter]

hello,

don't know how to post a request for enhancement ... sorry for that.

my question is: could it possible to use the edit form for updating rows with a 
'modify' button that woulb be enabled when a row is selected 

I'm trying to do that but reusing add new row functions but the updatyed row si 
added to the table ... not the good way I think 

thanks 
Phil

Original issue reported on code.google.com by philippe...@gmail.com on 9 Jun 2011 at 7:56

[GoogleCodeExporter]

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.

Original comment by joc...@gmail.com on 11 Jun 2011 at 12:31

• Changed title: Editing rows in the popup window
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

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.

Original comment by dmol...@gmail.com on 12 Jun 2011 at 1:28

[GoogleCodeExporter]

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.

Original comment by philippe...@gmail.com on 12 Jun 2011 at 2:03

[GoogleCodeExporter]

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.

Original comment by dmol...@gmail.com on 13 Jun 2011 at 2:18

[GoogleCodeExporter]

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 

Original comment by joc...@gmail.com on 16 Jun 2011 at 7:08

[GoogleCodeExporter]

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

Original comment by dmol...@gmail.com on 16 Jun 2011 at 12:05

[GoogleCodeExporter]

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.

Original comment by oliver.d...@gmail.com on 12 Jul 2011 at 3:42

[GoogleCodeExporter]

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

Original comment by NRo...@gmail.com on 9 Sep 2011 at 5:20

[GoogleCodeExporter]

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

Original comment by joc...@gmail.com on 29 Sep 2011 at 9:47

• Changed state: Accepted

[GoogleCodeExporter]

Issue 54 has been merged into this issue.

Original comment by joc...@gmail.com on 29 Sep 2011 at 9:48

[GoogleCodeExporter]

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.

Original comment by w9r...@gmail.com on 9 Nov 2011 at 9:37

Attachments:

• screenshot.pdf

[GoogleCodeExporter]

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

Original comment by joc...@gmail.com on 9 Nov 2011 at 11:06

[GoogleCodeExporter]

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

Original comment by vogelja...@aol.com on 9 Jan 2012 at 8:35

[GoogleCodeExporter]

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

Original comment by vogelja...@aol.com on 9 Jan 2012 at 9:57

[GoogleCodeExporter]

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.

Original comment by vogelja...@aol.com on 10 Jan 2012 at 3:39

[GoogleCodeExporter]

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?

Original comment by vogelja...@aol.com on 11 Jan 2012 at 11:12

[GoogleCodeExporter]

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

Original comment by joc...@gmail.com on 12 Jan 2012 at 9:53

[GoogleCodeExporter]

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

Original comment by vogelja...@aol.com on 12 Jan 2012 at 6:35

[GoogleCodeExporter]

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);
                                                    }
                                                }

Original comment by vogelja...@aol.com on 19 Jan 2012 at 10:04

[GoogleCodeExporter]

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

Original comment by pawankum...@gmail.com on 27 Jan 2012 at 12:16

[GoogleCodeExporter]

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

Original comment by joc...@gmail.com on 10 Feb 2012 at 11:44

[GoogleCodeExporter]

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

Original comment by reginste...@gmail.com on 13 Feb 2012 at 10:35

[GoogleCodeExporter]

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

Original comment by joc...@gmail.com on 13 Feb 2012 at 10:54

[GoogleCodeExporter]

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!

Original comment by jesscere...@gmail.com on 26 Feb 2012 at 11:53

[GoogleCodeExporter]

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

Original comment by joc...@gmail.com on 26 Feb 2012 at 8:17

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

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

Original comment by jesscere...@gmail.com on 26 Feb 2012 at 8:51

[GoogleCodeExporter]

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

Original comment by digitaal...@gmail.com on 15 May 2012 at 9:47

[GoogleCodeExporter]

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

Original comment by joc...@gmail.com on 15 May 2012 at 10:13

[GoogleCodeExporter]

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

Original comment by digitaal...@gmail.com on 16 May 2012 at 7:56

[GoogleCodeExporter]

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

Original comment by joc...@gmail.com on 16 May 2012 at 8:38

[GoogleCodeExporter]

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

Original comment by i...@digitaalbedrijf.nl on 29 May 2012 at 9:35

[GoogleCodeExporter]

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. 

Original comment by japer...@gmail.com on 25 Jun 2012 at 1:28

[GoogleCodeExporter]

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.

Original comment by i...@digitaalbedrijf.nl on 16 Jul 2012 at 12:02

[GoogleCodeExporter]

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

Original comment by webdev2...@gmail.com on 8 Jan 2013 at 8:21

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

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

Original comment by r...@topyacht.com.au on 7 Mar 2013 at 3:07

[GoogleCodeExporter]

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

Original comment by yes2ex...@gmail.com on 25 Apr 2013 at 11:19

[GoogleCodeExporter]

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.

Original comment by pmurama...@lbl.gov on 16 May 2013 at 11:11

[GoogleCodeExporter]

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

Original comment by n...@betterlife.se on 31 May 2013 at 12:27

[GoogleCodeExporter]

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
(teamdba@scotdb.com)

Original comment by team...@scotdb.com on 12 Nov 2013 at 1:28

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

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?

Original comment by preethia...@gmail.com on 29 Mar 2014 at 11:51

[GoogleCodeExporter]

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 :)

Original comment by 2007pb...@gmail.com on 7 May 2014 at 12:42

[GoogleCodeExporter]

comment44 worked . 

Original comment by kalaira...@gmail.com on 15 Dec 2014 at 8:14

[GoogleCodeExporter]

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

Original comment by edward.r...@gmail.com on 20 Feb 2015 at 3:23