在動態加載的表單中激活jquery ui小部件

爲ajax加載並插入到文檔中的html激活jquery ui小部件的最佳做法是什麼？在動態加載的表單中激活jquery ui小部件

我是不引人注意的javascript的倡導者，並且堅信所有被javascript訪問的功能都應該在沒有它的情況下訪問。因此，在理想的情況下，每個在彈出窗口中打開的窗體都應該有它的單獨頁面，並且應該使用基於JavaScript的ajax加載代替它們的鏈接。

我覺得這種模式加載並插入另一頁的一部分到當前文檔中非常有用：

$('#placeholder').load('/some/path/ #content>*');

或者使其更通用：

$('a.load').each(function() { 
    $(this).load($(this).attr('href') + ' #content>*'); 
});

不過，我也想喜歡從動態加載的頁面激活javascripts，以便不同的小部件可以正常工作。

我知道，我不能向這些Java腳本添加到當前文件，並激活所有的人都在回調，或者我可以用$.get()分別獲得一些JSON HTML和JavaScript的，但我想，有可能是一個更優雅的通用解決方案。

你會推薦什麼？

順便說一句，我在後端使用Django。

來源

2010-09-14 Aidas Bendoraitis

我不明白你的小部件是如何不顯眼的。他們如何工作沒有JavaScript？ – 2010-09-14 11:30:14

這是一個通用的問題，而不是具體的問題。一些使用或不使用JavaScript的小部件可能是色彩選擇器降級到文本輸入字段，日曆降級到文本輸入字段，自動填充字段降級到選擇字段，製表符降級到錨定鏈接等。 – 2010-09-14 15:12:42

的一種方式，我決定自己來處理來自外部網頁小工具是解析其他頁面的HTML，尋找腳本，並在當前頁面執行它們。

例如，存在具有其上裝載和插入到當前頁另一頁上自動完成構件的形式。該自動完成構件應具有特定屬性被激活，如可用選項：

<script type="text/javascript"> 
//<![CDATA[ 
$(function() { 
    $("#colors").autocomplete({ 
     source: ['red', 'green', 'blue', 'magenta', 'yellow', 'cyan'] 
    }); 
}); 
//]]> 
</script>

然後在當前頁面，我可以有它加載HTML和另外收集其中的所有JavaScript和執行它們下面的腳本：

var oRe = /<script\b[^>]*>([\s\S]*?)<\/script>/gm; 
$('#placeholder').load(
    '/some/path/ #content>*', 
    function(responseText, textStatus, XMLHttpRequest) { // <-- callback function 
     var sScripts = ""; 
     responseText.replace(
      oRe, 
      function($0, $1) { 
       sScripts += $1; 
       return $0; 
      } 
     ); 
     eval(sScripts); 
    } 
);

這裏的一個缺點是當前文檔應該最初加載可能出現在包含的表單中的所有庫。例如，在這種情況下，它將是包含自動填充小部件的jquery-ui。我想我可以通過搜索加載外部腳本並在當前文檔中加載腳本的腳本標記（如果它們不存在）來擴展代碼。

來源

2010-09-18 20:45:33

問題是你現在如何激活你的javascript。如果你正在做這樣的事情：當新的DOM對象被加載處理器相連接的事件

$(document).ready(function() { 
     $('a.foo').live('click', function() { ... }); 
    })

這樣：

$(document).ready(function() { 
     $('a.foo').click(function() { ... }); 
    })

你可以考慮起了變化的東西。

來源

2010-09-14 17:59:17 koblas

'.live（）'和' .delegate（）'是自定義小部件的一個很好的解決方案，但不適用於jQuery UI內部，不適用於第三方。 – 2010-09-14 20:10:35

我所做的是使用jquery.ui小部件指定的「加載」選項。不幸的是，這不是有據可查的，所以你不會在這裏看到的選項：http://jqueryui.com/demos/tabs/#options例如，但你會看到它在這裏：http://jqueryui.com/demos/tabs/#method-load

在大多數情況下，每一個你調用方法有一個初步的選擇可以設置，這是什麼促使我嘗試使用負載。

在我自己的應用程序中，我有3個級別的嵌套標籤，它們是通過AJAX動態創建的。爲了讓動態應用每個選項卡的JavaScript，我嵌入了裝入文檔時首先啓動的加載函數。

所以我的模板文件有：

<script type="text/javascript" src="{{ MEDIA_URL }}js/tabs.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('.overall_tabs').tabs({ 
     load: initializeOverallTabs 
    }); 
}); 
</script>

我tabs.js文件有：

function initializeOverallTabs(event, ui){ 
    ... 
    $('.lvl_two_tabs').tabs({ 
     load: initializeTabLevel2 
    }); 
    ... 
} 

function initializeTabLevel2(event, ui){ 
    ... 
    // So on and so forth 
    ... 
}

另外，我建議負載區域內工作，使當你引用具體到該窗格。使用選項卡時，這非常重要。我發現要做到這一點的最佳方式如下。

在您的選項卡中。js文件：

function initializeOverallTabs(event, ui){ 
    $panel = $(ui.panel); 
    $panel.find('lvl_two_tabs').tabs(...); 
}

我發現這個問題很奇怪巧合！我最近向一些開發人員解釋了我的解決方案，以相同的情況使用相同的Jquery/Django環境。我希望這有助於！

來源

2010-09-14 21:31:06

在動態加載的表單中激活jquery ui小部件

回答

相關問題