Question

Want to update page after jeditable (using gem “on_the_spot”) has been updated. Below works updating page, but after script runs once fields are no longer updatable with jeditable.

application.js

$('.on_the_spot_editing').change(function() {
   $.getScript('edit.js');
});

edit.js.erb

$("#items .on_the_spot_editing").change();
$("#edit_order_form").html("<%= raw escape_javascript(render('form')) %>");

Controller

respond_to do |format|  
  format.html  
  format.js if request.xhr?
end

field

<%= on_the_spot_edit item, :price %>

EDIT –

$(document).ready(function(){
  $('.on_the_spot_editing').data('ok', 'Ok').live('click', function() {
    //  tried $.delay(800).getScript('edit.js');
    $.getScript('edit.js');
  });
});

EDIT 2 – If data-ok=”Ok” is the html5 mark up, would this be correct to see if user clicked the “Ok” button?

$('.on_the_spot_editing').data('ok', 'Ok').live('click', function() {
  setTimeout(getIt, 500);
});

function getIt() {
  $.getScript('edit.js');
}

Answer 1

First remark: I do not quite understand why inside your edit.js you need to re-trigger the change event? Shouldn’t that create a loop? It would if … a-ha!

Since you re-render the form, you lose all event bindings. You should use live bindings. Unfortunately jEditable does not use live binding. Presumably because it didn’t exist when jEditable was written, and secondly, I presume because if you are going to use javascript to edit a single field, you would not want to re-render the complete form again.

If you still want to re-render the complete form, and there could be valid cases to do so (code resides on the controller, update counters/states/what not): make sure that inside your form view, you also load the on_the_spot.js again. That will re-enable the form.

Hope this helps.