проблема с обновлением ajax при последующем использовании

Question

У меня есть форма, которая открывается в диалоговом окне jquery-ui, отправляется через ajax, читает обновленные данные в формате json и обновляет страницу. Все работает отлично в первый раз. При последующих запусках данные обновляются в базе данных правильно, но обновления на странице применяются к той же самой ячейке, что и первый запуск.

Использование «Просмотр сгенерированного источника» на панели инструментов веб-разработчика Я вижу, что старая форма все еще находится в DOM. Поэтому я подозреваю, что этот $("form#hostEdit").find("input#id").val() либо всегда находит первую форму, либо оценивается только один раз. Я довольно новичок в jQuery, хотя я не уверен, что с этим делать. Должна ли эта форма оставаться в DOM? Должен ли я использовать другой селектор? Что-то еще полностью?

$("table.hostgrid a.new").click(function() { 
    var id = this.id.substring(3); 
    var $dialog = $('<div></div>') 
    .load('/hosts/new?byte1=${network.byte1}&byte2=${network.byte2}&byte3=${network.byte3}&byte4=' + id); 
    var getHostAction = #{jsAction @NetworkHosts.view(':id') /} 

    $dialog.dialog({ 
    autoOpen: false, 
    title: 'New host at ${network.byte1}.${network.byte2}.${network.byte3}.' + id, 
    width: 500, 
    buttons: { 
     "Create": function() { 
     $.ajax({ 
      async: true, 
      type: 'post', 
      url: '/hosts/create', 
      data: $("form#hostNew").serialize(), 
      success: function(response) { 
      $dialog.html(response); 
      if ($("div.flashSuccess") != null) { 
       $dialog.dialog('destroy'); 
       $.ajax({ 
       url: getHostAction({'id': $("form#hostEdit").find("input#id").val()}), 
       dataType: 'json', 
       success: function(data) { 
        updateHost(data); 
       }, 
       error: function(data, msg, exception) { 
        alert("Error during request: " + msg); 
       }, 
       });     
      } 
      } 
     }); 
     } 
    } 
    }); 
    $dialog.dialog('open'); 

    return false; 
}); 

функция, которая применяет обновления:

function updateHost(host) { 
    var cell = $("td#dot"+host.byte4); 
    cell.fadeOut("fast", function() { 
    cell.find("span.hostname").text(host.hostname).attr("title", host.description); 
    cell.removeClass().addClass(host.agegroup); 
    if (host.type) 
     cell.addClass(host.type.toLowerCase()); 
    if (host.is_dhcp) 
     cell.addClass("dhcp"); 
    if (host.is_service) 
     cell.addClass("service"); 

    cell.fadeIn("fast"); 
    }); 
} 

Answer 1

Ваши подозрения верны, $("form#hostEdit") действительно находит первую форму, которую вы загрузили, из-за того, как ведет себя виджет диалогового окна.

Когда вы сделаете это: $dialog.html(response);, вы загружаете, что HTML-ответ в DOM, где диалог элемент (<div> вы создали) есть, и когда вы это делаете: $dialog.dialog('destroy'); вы разрушив диалог виджет , а не содержание в нем ... он все еще находится в DOM, который больше не завернут в эти элементы диалогового контейнера.

За то, что вы хотите, вы должны явно .remove(), что содержание вы загрузили, а также, как это:

$dialog.dialog('destroy').remove(); 

Тогда вы получите ожидаемое поведение, так как это не является элементом с этим дубликата ID все еще находится в DOM.

Answer 2

Не видя, какие функции вы updateHost() делает, это будет очень трудно определить, что происходит не так. Есть ли вообще ссылка на функциональную версию этого в Интернете?

В целом, когда дело доходит до форм, вы хотите использовать идентификатор, чтобы гарантировать, что вы всегда имеете дело с правильным, особенно если на странице больше одного. Во-вторых, если вы пытаетесь заменить содержимое этой формы, то нет, вы, вероятно, не должны иметь двух из них на странице. Вам нужно будет удалить первый и заменить его тем, что данные возвращаются с вашего второго вызова AJAX.

Мне определенно нужно задать вопрос, почему вам нужны два вызова AJAX для выполнения всего, что вы делаете. Если бэкэнд не сможет выполнять какие-либо задачи, которые вы выполняете в интерфейсе, и просто возвращаете окончательную информацию?

Кроме того, если вы заменяете свою форму, вам нужно будет переустановить событие click на новый объект DOM, используя что-то вроде live или livequery. События связаны только при первой загрузке страницы.

Надеюсь, одно из этих предложений поможет.

Answer 3

Теперь вы можете создать один диалог экземпляра и просто обновить его содержимое или с вашим подходом разрушив ваш диалог:

var id = $("form#hostEdit").find("input#id").val(); 
$dialog.remove(); 

И затем использовать ID переменной в следующем запросе Ajax.