проблема с обновлением ajax при последующем использовании - PullRequest
Новая
       5

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

0 голосов
/ 16 декабря 2010

У меня есть форма, которая открывается в диалоге 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");
  });
}

Ответы [ 3 ]

1 голос
/ 16 декабря 2010

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

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

Для чеговы хотите, вам нужно явно .remove() контент, который вы загрузили, например, так: 

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

Тогда вы получите ожидаемое поведение,поскольку в DOM еще нет элемента с таким идентификатором.

0 голосов
/ 16 декабря 2010

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

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

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

0 голосов
/ 16 декабря 2010

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

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

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

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

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

...