0

jquery-uiダイアログで開き、ajax経由で送信し、json形式で更新されたデータを読み取り、ページを更新するフォームがあります。最初はすべて正常に動作します。以降の実行では、データはデータベースで正しく更新されますが、ページの更新は最初の実行と同じセルに適用されます。

Web開発者ツールバーの「生成されたソースの表示」を使用すると、古いフォームがまだ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");
  });
}
4

3 に答える 3

1

あなたの疑惑は正しいです、$("form#hostEdit")実際にあなたがロードした最初のフォームを見つけています、これはダイアログウィジェットがどのように振る舞うかのためです。

これを行うと：$dialog.html(response);、そのHTML応答をDOMにロードします。DOMにはダイアログ要素（<div>作成したもの）があり、これを行うと：ダイアログウィジェットのコンテンツではなく、ダイアログウィジェット$dialog.dialog('destroy');を破棄します...それはまだDOMにあり、それらのダイアログコンテナ要素にラップされていません。

.remove()必要なものについては、次のように、ロードしたコンテンツも明示的に指定する必要があります。

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

次に、その重複したIDを持つ要素がまだDOMにないため、期待される動作が得られます。

于 2010-12-15T22:42:26.100 に答える
0

updateHost（）関数の機能を確認しないと、何が問題になっているのかを判断するのが非常に困難になります。Web上でこれの機能バージョンにリンクする方法はありますか？

一般に、フォームに関しては、IDを使用して、常に正しいフォームを処理していることを確認する必要があります。特に、ページに複数のフォームがある場合はそうです。次に、そのフォームのコンテンツを置き換えようとしている場合は、いいえ、ページに2つあるべきではありません。最初のものを削除し、2番目のAJAX呼び出しから返されるデータに置き換える必要があります。

私は間違いなく、あなたがしていることを何でも達成するために2つのAJAX呼び出しが必要な理由を疑問視する必要があります。バックエンドは、フロントエンドで実行しているタスクを実行して、最終的な情報を返すことができないようにする必要がありますか？

また、フォームを置き換える場合は、liveやlivequeryなどを使用して、クリックイベントを新しいDOMオブジェクトに再バインドする必要があります。イベントは、ページが最初に読み込まれたときにのみバインドされます。

うまくいけば、それらの提案の1つが役立つでしょう。

于 2010-12-15T21:46:17.700 に答える
0

これで、1つのダイアログインスタンスを作成し、そのコンテンツを更新するか、ダイアログを破棄した後にアプローチを使用して更新できます。

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

次に、次のajaxリクエストでid変数を使用します。

于 2010-12-15T22:47:59.410 に答える