在Rails中从Prototype迁移到jQuery，遇到重复获取请求的问题

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:

我正在从Prototype迁移到jQuery并将所有JS移到视图文件之外。一切都很顺利，只有一个例外。这就是我想要做的，以及我遇到的问题。我有一个日记，用户可以在页面中在线更新记录，如下所示：

• 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
• 通过jQuery执行get请求，并显示编辑表单，允许用户修改记录
• 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
  • 在firebug中，我在表单显示时获得状态代码200，然后片刻之后，再次显示另一个编辑表单，状态代码为304
• 在这种情况下，用户单击“编辑”以更新另一条记录，编辑表单会显示两次！在firebug中，我在表单显示时获得状态代码200，然后片刻之后，再次显示另一个编辑表单，状态代码为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.

我只希望表单显示一次，而不是两次。只有在我更新记录后，表单才显示两次，否则一切正常。这是代码，任何想法？我认为这可能与food_item_update.js中的事实有关，我在更新记录后调用editDiaryEntry（），但如果我没有调用该函数并在修改后尝试更新记录，那么它只是在屏幕上吐出.js.erb响应。这也是我在add_food.js.erb文件中有editDiaryEntry（）的原因。任何帮助将不胜感激。

diary.js

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

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

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

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();

1 个解决方案

#1

Maybe you should be using the live function instead of binding to the click once. I am not sure if it will help but it will sure alleviate the need to bind the click event again after updating the page.

也许你应该使用live函数而不是绑定到click。我不确定它是否会有所帮助，但它肯定会减少在更新页面后再次绑定click事件的需要。