0

返された ajax データを jQuery で認識できるようにしようとしています。次のように div タグの間にコンテンツをロードすることで、ページのロード時に jQuery を操作できます。

<div id="edit-features-id">
  include_partial(
    'user/favoritesEditFavorites', 
    array('vrs_allfav_data' => $vrs_allfav_data)
    );
</div>

この div タグは jQuery ダイアログに添付されます。さらに興味深いことに、ダイアログはその前のダイアログによって開かれました。説明のために、最初のダイアログ ( ListView ) と 2 番目のダイアログ ( EditMode ) だけを呼び出します。

したがって、ページがロードされると、include_partial が div タグの間に include_partial をロードするため、EditMode が開かれると、jQuery は jQuery コマンドを認識します。データを削除、変更、並べ替えできるので機能しますが、保存をクリックするまで何も起こりません。

[保存] をクリックすると、データが ajax で投稿され、データベースが更新され、成功するとアラートの確認が返されます。アラートが閉じられると、次のようになります。

  • EditMode ダイアログを閉じます
  • 最初の関数は ListView ダイアログの div タグを更新します
  • 2 番目の関数は、EditView ダイアログの div タグを更新します

ListView は表示用であるため、保存された新しいデータをロードし、準備完了です。今回、EditMode ダイアログが ListView によって呼び出されると、EditMode でクリックしたり並べ替えたりすることができなくなったため、jQuery と対話するものは何もありません。

返されたコンテンツは EditMode ダイアログの div タグに読み込まれ、ページの読み込み時に partial_include によって読み込まれた現在の html 情報が置き換えられます。

<div id="edit-features-id"></div>

EditMode のデータを取得する次のさまざまな方法を使用して、div タグ間のコンテンツを正常にロードしました。

注: var $j = jQuery.noConflict();を使用しています。 

favoritesReloadEditFavorites = function() {
  $j.ajax({
    url: favoritesEditFavoritesURL,
      cache: false
      }).done(function(html) {
      $j('#vrs_favorites_edit').append(html);
  });
};

またはこのように：

$j('#vrs_favorites_edit').load(favoritesEditFavoritesURL);

またはこのように：

$j.ajax({
  url: favoritesEditFavoritesURL,
  cache: false,
  success: function(response) {
    $j('#vrs_favorites_edit').html(response);
  };
});

お気づきのように、それらはすべて、このアクションを呼び出すこの symfony 1.3.11 ルート「user/favoritesEditFavorites」に変換される favoritesEditFavoritesURL に移動します。

if ($request->isXmlHttpRequest())
{
  // Retrieve data from db $vrs_allfav_data loaded into EditMode using renderPartial.
  return $this->renderPartial(
    'user/favoritesEditFavorites', 
    array('vrs_allfav_data' => $vrs_allfav_data)
  );
}

これは、コンテンツをロードする場合にはうまく機能しますが、クリックやドラッグ アンド ドロップ機能を可能にするために jQuery と対話する必要があるコンテンツには適していません。

そうは言っても、jQuery の .on コードを次のように変更することで、jQuery のクリック機能を解決して機能を開始できるようにするソリューションを見つけることができました。

$j('.cancelEditFavorites').on('click', function() {

これに：

$j(document).on('click', '.cancelEditFavorites', function() {

残念ながら、この jquery プラグインjquery_sortableと以下のコードを使用してネストされた並べ替えを行うドラッグ アンド ドロップ別名 sortable は機能しません。

$j("ol.vertical").sortable({
    group: 'favorites',
    handle: '.handle',
    isValidTarget: function($item, container) {
        if ($item.is(".link")) {
            return true;
        } else {
            return $item.parent("ol")[0] == container.el[0];
        }
    },
    onDragStart: function($item, container, _super) {
        if ($item.is(".folder")) {
            $j('ol.vertical ol').sortable('disable');
            _super($item, container);
        }
    },
    onDrop: function($item, container, _super) {
        if ($item.is(".folder")) {
            $j('ol.vertical ol').sortable('enable');
            _super($item, container);
        }
    },
});

そして最後に私の質問は、DOMによって認識されるajaxまたはその他の型呼び出しからデータをロードする方法はありますか?ページ？

ブラウザーを更新することは可能ですが、両方のダイアログが消えてしまい、エンド ユーザーは何が起こったのか考えたままになります。なぜなら、最初のダイアログを開くには再クリックして 2 番目のダイアログを再度開く必要があるからです。これはユーザー エクスペリエンスとしては良くありません。

4

1 に答える 1

0

私自身の質問に答えるために、それが機能しない理由は、ページが既に読み込まれているため、Ajax 呼び出しが jQuery が使用できない新しいデータを取り込んでいたためです。そのため、読み込まれた新しいコンテンツのボタンに onclick を追加しました。 jQueryによって認識されたため、私の問題は解決しました。

于 2013-09-16T04:00:04.517 に答える