migrating from Prototype to jQuery in Rails, having trouble with duplicate get request

Posted by aressidi on Stack Overflow See other posts from Stack Overflow or by aressidi
Published on 2010-05-28T01:53:00Z Indexed on 2010/05/28 7:11 UTC
Read the original article Hit count: 297

Filed under:
|
|

I'm in the process of migrating from Prototype to jQuery and moving all JS outside of the view files. All is going fairly well with one exception. Here's what I'm trying to do, and the problem I'm having. I have a diary where users can update records in-line in the page like so:

  • user clicks 'edit' link to edit an entry in the diary
  • a get request is performed via jQuery and an edit form is displayed allowing the user to modify the record
  • user updates the record, the form disappears and the updated record is shown in place of the form

All of that works so far. The problem arises when:

  • user updates a record
  • user clicks 'edit' to update another record
    • in this case, the edit form is shown twice!
    • In firebug I get a status code 200 when the form shows, and then moments later, another edit form shows again with a status code of 304

I only want the form to show once, not twice. The form shows twice only after I update a record, otherwise everything works fine. Here's the code, any ideas? I think this might have to do with the fact that in food_item_update.js I call the editDiaryEntry() after a record is updated, but if I don't call that function and try and update the record after it's been modified, then it just spits up the .js.erb response on the screen. That's also why I have the editDiaryEntry() in the add_food.js.erb file. Any help would be greatly appreciated.

diary.js

jQuery(document).ready(function() {

  postFoodEntry();
  editDiaryEntry();
  initDatePicker();

});

function postFoodEntry() {
  jQuery('form#add_entry').submit(function(e) {
    e.preventDefault();
    jQuery.post(this.action, jQuery(this).serialize(), null, "script");
    // return this
  });
}
function editDiaryEntry() {
  jQuery('.edit_link').click(function(e) {
    e.preventDefault();
    // This should look to see if one version of this is open...
    if (jQuery('#edit_container_' + this.id).length == 0 ) {
      jQuery.get('/diary/entry/edit', {id: this.id}, null, "script");
    }
  });
}

function closeEdit () {
  jQuery('.close_edit').click(function(e) {
    e.preventDefault();
    jQuery('.entry_edit_container').remove();
    jQuery("#entry_" + this.id).show();
  });
}
function updateDiaryEntry() {
  jQuery('.edit_entry_form').submit(function(e) {
    e.preventDefault();
    jQuery.post(this.action, $(this).serialize(), null, "script");

  });
}
function initDatePicker() {
  jQuery("#date, #edit_date").datepicker();
};

add_food.js.erb

jQuery("#entry_alert").show();
jQuery('#add_entry')[ 0 ].reset();
jQuery('#diary_entries').html("<%= escape_javascript(render :partial => 'members/diary/diary_entries', :object => @diary, :locals => {:record_counter => 0, :date_header => 0, :edit_mode => @diary_edit}, :layout => false ) %>");
jQuery('#entry_alert').html("<%= escape_javascript(render :partial => 'members/diary/entry_alert', :locals => {:type => @type, :message => @alert_message}) %>");
jQuery('#entry_alert').show();
setTimeout(function() { jQuery('#entry_alert').fadeOut('slow'); }, 5000);
editDiaryEntry();

food_item_edit.js.erb

jQuery("#entry_<%= @entry.id %>").hide();
jQuery("#entry_<%= @entry.id %>").after("<%= escape_javascript(render :partial => 'members/diary/food_item_edit', :locals => {:user_food_profile => @entry}) %>");
closeEdit();
updateDiaryEntry();
initDatePicker();

food_item_update.js

jQuery("#entry_<%= @entry.id %>").replaceWith("<%= escape_javascript(render :partial => 'members/diary/food_item', :locals => {:entry => @entry, :total_calories => 0}) %>");
jQuery('.entry_edit_container').remove(); 
editDiaryEntry();

© Stack Overflow or respective owner

Related posts about ruby-on-rails

Related posts about AJAX