I am working on a project and decided to use some JS, for the first time in my life. So far it's been pretty painful :)

Anyway, I am using jQuery with jEditable and jQuery UI confirmation dialog. What I am trying to do, it to restore contents of the table cell if user hits Cancel on jQuery UI dialog, or just hits Esc. 

 

jEditable has "onblur" option that i can set to "cancel", and it works if uses clicks out of the field, so I am trying to achieve something like that with jQuery UI, because currently it just leaves an empty table cell. 

I am pretty sure the logic of my script is wrong somehow, so I am trying to figure out what to do to fix it. 

Here is the flow of the script: 

1. User clicks on a table cell and edits data in jEditable

2. User clicks save, jEditable doe POST to my php script and gets results, which a passed to jQuery UI confirmation dialog.

3. User either confirms or cancels changes. In case of Cancel or Esc, the user presented with a page, as it was before any editing has occured

Thank you in advance,

-i

1. $(".editable_textarea").editable("/path/to/my/php_script.php", {
2.      indicator : "<img src='/am/images/indicator.gif'>",
3.      type   : 'textarea',
4.      submitdata: { _method: "post", uri: "<?php echo $this->uri->segment(3); ?>" },
5.      select : false,
6.      submit : 'Save',
7.      cancel : 'Cancel',
8.       tooltip   : "Click to edit...",
9.      cssclass : "editable",
10.       onblur: "cancel",
11.       cssclass: "edit_destination",
12.       callback: 
13.              function(value, settings) {
14.                 $(this).dialog({
15.                     autoOpen: true,
16.                     width: 400,
17.                     modal: true,
18.                      position: "center",
19.                     resizable: false,
20.                     draggable: false,
21.                     title: "Pending Changes",
22.                     buttons: {
23.                              "Cancel": function() {
24.                                       $(this).dialog("close");
25.                               },
26.                              "Confirm Changes": function() {
27.                                      document.findSameDestination.submit();
28.                              }
29.       
30.                     }
31.           });
32.        $('form#findSameDestination').submit(function(){
33.              $(this).dialog('open');
34.              return false;
35.        });
36.         $(this).editable("disable");
37.   },
38.  data: 
39. function(value, settings) 
40.   {
41.       var retval = value.replace(/<br[\s\/]?>/gi, '\n');
42.       retval = retval.replace(/(<([^>]+)>)/gi, '');
43.       return retval;
44.   }
45.  });