Search code examples
asp.netjqueryajaxjtemplate

How to update a table row with save button using .ajax


I have a table which has one row and only one cell will be editable. I have accomplished this with the following code.

$("td#effEndDate").click(function() {
            if (!$(this).hasClass("edit")) {
                var value = jQuery.trim($(this).html());
                $(this).html("<input id=\"txtEdit\" type=\"text\" value=\"" + value + "\" />");
                $(this).addClass("edit");
                $("#txtEdit").focus();
            }
        });

Now this is the part where i'm stuck.

After the field is updated a save button must be clicked to call the proper .ajax method to update the database. But how can I compare the previous value to the current value on a button press? Since i'm not using the onblur property where I could have saved the old value and passed it to the update function.


Solution

  • There are two possibilities.

    • Pass the variable around in between functions
    • Make the variable global

    if you want the variable global do not use the "var" keyword

    Change:

    var value = jQuery.trim($(this).html()); 
    

    To this:

    value = jQuery.trim($(this).html()); 
    

    Edit

    If the click function is getting hit more then once before a page refresh and assuming you want to keep a copy of the original table rows you can try this. Save a copy of the original table in a variable then you can query the original table for the html using the ID number. Here is a quick mock

    first store the table in a variable upon the page loading. This will save an original copy of the table

     //get a copy of the table
     var GetCopyofOriginalTable = function() {
          var TableToBeCopied = $('the appropriate selector');
          CopyOfTable = JQuery.extend(true, {}, TableToBeCopied);  //Notice no var, its global
     }
    
     //Now store the variale
     GetCopyofOriginalTable();
    
     var FindTableRowByID = function(trID) {
          return $('table:has(tr#' + trID));
     }
    

    Now you can loop through the new table test its value agaisnt the old table. This methed make use alot of memory depending on how big the table is.