Как выполнить модальное всплывающее окно Ajax на основе свойства data-?

Question

По сути, у меня есть динамически создаваемый список, и я заранее не знаю, сколько будет элементов.

Мне нужно, чтобы каждый из них запускал немного другую функцию Ajax при нажатии.

В настоящее время я использую JQM для модальных боксов (рад переключиться, если кто-то знает что-то лучше).

Следующий код отлично работает, чтобы все элементы .ajaxpopup запускали одну и ту же страницу:

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

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

Тем не менее, мне нужно, чтобы каждый элемент запускал свою страницу (1/2 ... Я заранее не знаю идентификатор).

Мне очень нравится ответ Адама о добавлении тега data-itemid к элементу, но я просто не могу заставить его работать.

Я не знаю, является ли это ограничением JQM или из-за того, как оно инициируется.

Самое близкое, что я пришел, это:

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

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

Я также заменил строку диалога на alert(itemId), который дает правильный результат, поэтому я знаю, что я на верном пути - мне просто не удается это сделать!

Может кто-нибудь помочь?

Answer 1

Вы можете подключить контент, добавленный в формате danmical, для ответа на события с помощью функций jQuery live и on.

Итак, если я понимаю ваш конкретный случай, вы хотите, чтобы эти текстовые узлы при нажатии запускали модальный jqm?И вы хотите, чтобы itemId вашей модели был его частью?

Сначала добавьте 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
});

Answer 2

Почему бы не создать JsonResult, предоставляющий Action для вашего Contoller, который бы содержал список необходимых вам элементов? Как только это произойдет, я буду перебирать массив 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);
});​