jQuery / jEditable and jQuery UI Dialog. Re-populating table cell.

Question

Hello, this is my first time using JS, so i really have no idea what i am doing.

I have a table with data, and using jEditable to allow a user to edit the data and POST it to my php script. When user hits "Save", it opens jQuery UI with the data from php script and it seems to work fine, however, if the user hits Cancel or Esc to close the jQuery UI dialog, they and up back on the page, but the cell they tried to edit is now completely empty. How do i get the cell re-populated?

Thank you!

$(".editable_textarea").editable("/path/to/my/script.php", {
    indicator : "<img src='/images/indicator.gif'>",
    type   : 'textarea',
    submitdata: { _method: "post", uri: "<?php echo $this->uri->segment(3); ?>" },
    select : false,
    submit : 'Save',
    cancel : 'Cancel',
    tooltip   : "Click to edit...",
    cssclass : "editable",
    onblur: "cancel",
    cssclass: "edit_destination",
    callback: 
       function(value, settings) {
          $(this).dialog({
              autoOpen: true,
              width: 400,
              modal: true,
              position: "center",
              resizable: false,
              draggable: false,
              title: "Pending Changes",
              buttons: {
                  "Cancel": function() {
                      $(this).dialog("close"); },
                  "Confirm Changes": function() {
                      document.findSameDestination.submit(); }
              }

          });

          $('form#findSameDestination').submit(function(){
              $(this).dialog('open');
              return false;
          });

        $(this).editable("disable");
   },
   data: 
      function(value, settings) {
          var retval = value.replace(/<br[\s\/]?>/gi, '\n');
          retval = retval.replace(/(<([^>]+)>)/gi, '');
          return retval;
      }
   });

Still no idea how to fix this and I dont have enough points to offer a bounty...

Answer 1

I may not be right but it may be the cancel event you're calling with onblur. Try changing the

onblur: "cancel"

to

onblur: "function(e){;}"

which will essentially do nothing. If i got the jEditable code right, it reverts the input value to the original one upon onblur event, which in turn is called when clicking the Cancel button. Still, I might be wrong - it's 2 am at my place :)

Answer 2

Can you call the blur event in the cancel event of the dialog?

Cancel": function() {
                      document.editable_textarea.blur();
                      $(this).dialog("close");

It doesn't seem like the cancel event for the jEditable is being called when the dialog is closed.