CODEWITHSUNDEEP
jqueryajaxjsonjquery-mobile
Seif sammain
Seif sammain

Reputation: 150

ajax dynamic list on item click create new sub list

I am trying to create dynamic list inside dynamic list using jQuery mobile I tried to use item.On("click", callGroups); but I couldn't pass an argument to the function. I am using jQuery mobile 1.3 and jquery 1.8

and this is my ajax code 

<script type="text/javascript" type="text/javascript">


        $(document).ready(function () {

            Greating();
        });

        //  $(document).on('pageinit', function () {
       function callGroups(ID)
       {
       $("#"+ID).append("<ul><li> first</li><li>second item</li> </a></li> ");


       }

        function Greating() {

            $.ajax({

                type: "POST",
                url: "CarService.asmx/GetAllsections",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {

                    var sections = response.d;
                    $('#page_body').append("<div data-role='page' id= 'ssaadd'><div>");
                    $.mobile.initializePage();

                    $.each(sections, function (index, section) {

                        //  asd = "listsec" + section.secId;
                        $("#theList").append("<li> <a id = '"+section.secId+"' ><img src='pic/" + section.SecImg + "'> <br /> " + section.SecName + '   ' + section.SecArbName + " <br />" + section.SecArbDiscr + "").on("click", callGroups();


                    });



                    console.log(response);
                },

                error: function (response) {
                    $("#theList").append("<li>error<li>");

                    console.log(response);
                }
            });
        }
    </script>

How can I build dynamic list inside dynamic list?

Upvotes: 1

Views: 3553

Answers (2)

Seif sammain
Seif sammain

Reputation: 150

here is the answer i tried this code and it is working 

 $.each(sections, function (index, section) {

                        var asd = section.SecName;
                        $("#theList").append("<li id='" + asd + "'>  <img src='pic/" + section.SecImg + "'> <br /> " + section.SecName + '   ' + section.SecArbName + " <br />" + section.SecArbDiscr + "");
                        $("#"+asd).append("<ul><li >  <img src='pic/" + section.SecImg + "'> <br /> " + section.SecName + '   ' + section.SecArbName + " <br />" + section.SecArbDiscr + "</li></ul></li>");
                    });

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388416

You append method is wrong, you are adding the click event handler to the #theList in the loop instead of the newly added li, you can use the appendTo method to modify your code

$("<li> <a id = '"+section.secId+"' ><img src='pic/" + section.SecImg + "'> <br /> " + section.SecName + '   ' + section.SecArbName + " <br />" + section.SecArbDiscr + "").appendTo('#theList').on("click", callGroups);

And change CallGroups to 

function callGroups(ID) {
    $(this).append("<ul><li> first</li><li>second item</li> </a></li> ");
}

Upvotes: 2

Related Questions