Question

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

用户点击“编辑”链接以编辑日记中的条目
通过jQuery执行get请求，并显示允许用户修改记录的编辑表单
用户更新记录，表单消失，更新的记录显示在

到目前为止所有这些都有效。问题出现在：

用户更新记录
用户点击“修改”以更新其他记录
- 在这种情况下，编辑表单会显示两次！
- 在firebug中，我在表单显示时收到状态代码200，然后片刻之后，再次显示另一个编辑表单，状态代码为304

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

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

Answer 1

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

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

1 个答案: