如何基於「data-」屬性執行Ajax模式彈出窗口？

基本上，我有一個動態創建的列表，我不知道會有多少物品。如何基於「data-」屬性執行Ajax模式彈出窗口？

我需要每個人在點擊時啓動稍微不同的Ajax功能。

我目前正在使用JQM的模態框（如果有人知道更好的東西，很高興切換）。

下面的代碼工作正常，使所有.ajaxpopup項目啓動同一頁：

$().ready(function() { 
      $('#dialog').jqm({ ajax: "/QuestionManager/AjaxPopup/1", trigger: ".ajaxpopup" }); 

      $(".ajaxpopup").click(function (e) { 
       e.preventDefault(); 
      });

不過，我需要每一個項目，推出不同的頁面（1/2 ...我不知道ID提前）。

我真的很喜歡Adam爲元素添加data-itemid標籤的答案，但是，我似乎無法真正做到這一點。

我不知道這是JQM限制還是由於啓動方式。

我來最接近的是：

$(document).on("click", "a", function() { 
     var itemId = $(this).data("itemid"); 

     $('#dialog').jqm({ ajax: "/QuestionManager/AjaxPopup/"+itemId, trigger: ".ajaxpopup" }); 
    });

我也替換alert(itemId)對話行，即給予正確的結果，所以，我知道我沿着正確的路徑是 - 我只是可以」 t似乎完成了這個！

任何人都可以幫忙嗎？

來源

2011-12-03 Wil

您可以通過jQuery的live和on函數連線添加的內容以響應事件。

所以如果我理解你的特殊情況，你希望這些文本節點，當點擊時，啓動一個jqm模式？你想讓你的模型的itemId成爲它的一部分？

首先，通過數據屬性添加條目標識到文字：

@foreach (var item in Model.Routines) 
{ 
    <text data-itemid='@item.itemId'></text> 
} //(sorry if the razor syntax is off a bit - that's not my expertise

然後：

$(document).on("click", "text", function() { 
    var itemId = $(this).data("itemid"); 
    var textnodeText = $(this).text(); 
    $('#dialog').jqm({ ajax: "/QuestionManager/_AjaxCreateQuestionInitial/" + textnodeText, 
         trigger: itemId }); 
});

編輯

基於您的評論，如果您有這html：

<a href="/test/AddData" data-itemid="1">Add Data</a>

您可以處理這樣的單擊事件：

$(document).on("click", "a", function() { 
    var itemId = $(this).data("itemid"); 
    //now run your ajax call 
});

來源

2011-12-03 23:46:47

按照在這個例子中，我需要創建一個Ajax模型框，以啓動一個包含ID的頁面...我不認爲你可以給出一個實際上這樣做的例子，因爲我一直在過去的一個小時嘗試沒有運氣：（ – Wil

@WilliamHilsum - 我想我現在明白你的要求 - 我上一次編輯它符合你在找什麼？ –

它看起來不錯...我很高興，因爲我真的想從中學習！...我正在努力實現。 +1表示感謝，並會在標記爲答案時標記爲答案！ – Wil

爲什麼不建立在你的位指示提供JsonResult動作，這將提供您所需的產品清單？一旦到位，我將遍歷JSON數組併產生框。

假設你的數據將是（一個例子 - 這需要由控制器來製備）

var data = [ 
{"Id": 1, "Name": "A"}, 
{"Id": 2, "Name": "B"}, 
{"Id": 3, "Name": "C"} 
];

您的JavaScript（jquery的）循環來處理您的箱子是

$.each(data, function(i, item) { 
    //replace with your dialog code 
    alert(data[i].Id+" "+data[i].Name); 
});

來源

2011-12-04 00:02:27 torm

如何基於「data-」屬性執行Ajax模式彈出窗口？

回答

相關問題