Question

Basically, I have a dynamically created list and I have no idea in advance how many items there will be.

I need each one to launch a slightly different Ajax function on clicking.

I am currently using JQM for the modal boxes (happy to switch if someone knows something better).

The following code works fine for making all .ajaxpopup items launch the same page :

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

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

However, I need each item to launch a different page (1/2… I don’t know the ID in advance).

I really like Adam’s answer about adding a data-itemid tag to the element, but, I just can’t seem to actually make this work.

I do not know if this is a JQM limitation or due to the way it is initiated.

The closest I have come is:

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

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

I have also replaced the dialog line with alert(itemId), which is giving the correct result, so, I know I am along the right path – I just can’t seem to get this done!

Can anyone help?

Answer 1

You can wire dyanmically added content to respond to events via jQuery’s live and on functions.

So if I’m understanding your particular case, you want those text nodes, when clicked, to launch a jqm modal? And you want your model’s itemId to be a part of it?

First, add the itemId to your text via a data attribute:

@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

And then:

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

EDIT

Based on your comment, if you have this html:

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

You can handle the click event like this:

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