Я в процессе миграции с Prototype на jQuery и перемещения всех JS за пределы файлов представления. Все идет хорошо, за одним исключением. Вот что я пытаюсь сделать, и проблема, с которой я столкнулся. У меня есть дневник, где пользователи могут обновлять записи в строке на странице, например:
- пользователь нажимает ссылку «редактировать» для редактирования записи в дневнике
- запрос на получение выполняется через jQuery, и отображается форма редактирования, позволяющая пользователю изменить запись
- пользователь обновляет запись, форма исчезает и вместо формы отображается обновленная запись
Все это работает до сих пор. Проблема возникает, когда:
- пользователь обновляет запись
- пользователь нажимает «изменить», чтобы обновить другую запись
- в этом случае форма редактирования отображается дважды!
- В firebug я получаю код состояния 200, когда отображается форма, а затем, спустя несколько секунд, снова появляется другая форма редактирования с кодом состояния 304
Я хочу, чтобы форма отображалась только один раз, , а не дважды . Форма показывает дважды только после того, как я обновляю запись, в остальном все работает нормально. Вот код, есть идеи? Я думаю, это может быть связано с тем, что в food_item_update.js я вызываю editDiaryEntry () после обновления записи, но если я не вызываю эту функцию и не пытаюсь обновить запись после ее изменения, то выплевывает ответ .js.erb на экране. Вот почему у меня есть editDiaryEntry () в файле add_food.js.erb. Любая помощь будет принята с благодарностью.
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();