1

ページヘッダーで JQueryUI.js を呼び出し、AJAX でコンテンツをロードします。

Jquery のドラッグ アンド ドロップが 1 回機能すると、機能しなくなります。すべてのAJAXコンテンツロードでJqueryUI.jsを使用すると動作しますが、非常に遅くなります。これは YII フレームワークにあります

したがって、全体は次のようになります。

Page.php:

$cs->registerScriptFile($baseUrl . '/js/jquery.ui.js');
$cs->registerScriptFile($baseUrl . '/js/product.js');

product.js:

// need to namespace this to get access to jquery.ui.js sortable function
(function($) {
    SORTABLE = {
      mySortable: function(inputId) {
        $('#sortable-list-left').sortable();
        $('#sortable-list-right').sortable();
      }
     };
}(jQuery));

$(document)
  .ready(function() {
      function loadRecord(id, sku) {
      $.ajax({
        data: "id=" + id + "&sku=" + sku + "&project_id=" + urlParam("project"),
        url: "/product/ajaxGetRecord",
        type: "POST",
        success: function(response) {
          // process JSON response
          var obj = jQuery.parseJSON(response);
          // update the html with the new info
          $("#productForm")
            .html(obj.form);
          (function() {
            SORTABLE.mySortable(urlParam("project"));
          })();
        }
      });
   });

_pagePartial.php :

 <div id="productForm">  
    // dynamic content filled in here
 </div>

この名前空間戦略は、他のすべての JS では機能しますが、Jquery.ui.js では機能しません。並べ替え可能なメソッドが適用され、1 回ドラッグ アンド ドロップできますが、機能しなくなります。

理想的ではない作業オプションは次のとおりです。

_pagePartial.php :

   // called every single ajax update ... ugh! 
   $cs->registerScriptFile($baseUrl . '/js/jquery.ui.js');
   $('#sortable-list-left').sortable();
   $('#sortable-list-right').sortable();
4

1 に答える 1

2

sortable()リスト ホルダー (ul など) を削除せず、その中に動的な li コンテンツがある場合、 ajax 呼び出し後に再バインドする必要はありません。それ以外の場合は、リストを新しい HTML コンテンツに置き換える必要があります。これはデビッド・ホースターの例です

ajaxでソート可能な例

于 2013-10-22T03:05:41.103 に答える