Store Id From Listview In Localstorage

I've a listview created by a loop: for(var i = 0; i < data.length; i++) { var garage = data[i]; $('#content-p').append( '

' +

Solution 1:

the submit function is being overwritten with every iteration of the loop, and every single #submitID is only calling that function. So, of course it will only pull up the last one in the list.

Also, the code is generating all items within data.length, so you'll need to alter that if you don't want everything in the list.

Here's a fix to the first part (assuming no styling is assigned to #submitID):

for(var i = 0; i < data.length; i++) {
    var garage = data[i];

    $("#content-p").append(
        "<ul data-role=\"listview\">" +
                "<li><a href=\"#\" id=\"submitID-" + i +  "\" >" +
                "<h2>"+garage.location+"</h2>" +
                "<p><b>"+garage.description+"</b></p>" +
                "<p>"+garage.address+"</p>" +
            "</a></li>" +
        "</ul><br>"
    );

    $("#submitID-" + i).click(function() {
        localStorage.setItem("garageID",garage.ID);
        $.mobile.changePage("#resP");
    });

}

Solution 2:

I think the problem was that the method was trying to reference garage when there wasn't a reference, or something like that. And you should have made the click method for a specific ID, because it just kept getting overridden each time. I fixed it for you by making it one click method for a class, but the ID of each garage element is its actual garage ID.

http://jsfiddle.net/Fq3TF/1/

Also, just a tip, if you're constructing a string which is going to be inserted into an HTML document, you can use an apostrophe instead of a quote to avoid escaping. e.g. "<a class='submitID'>Hello World</a>".

Solution 3:

Here is my take on the problem. I use a attribute to save the id in the a element. The registering of the click handler has been moved outside the loop.

var data = [
            {
                id: "id1",
                location: "location1",
                description: "description1",
                address: "address1"
            },
            {
                id: "id2",
                location: "location2",
                description: "description2",
                address: "address2"
            }
        ];

        for (var i =0; i < data.length; i++) {
            var garage = data[i];

            $("#content-p").append(
                    "<ul data-role=\"listview\">"+"<li><a href=\"#\" class=\"submitClass\" garageid=\""+ garage.id +"\">"+"<h2>"+ garage.location +"</h2>"+"<p><b>"+ garage.description +"</b></p>"+"<p>"+ garage.address +"</p>"+"</a></li>"+"</ul><br>"
                    );
        }

        $(".submitClass").click(function(e) {
            e.stopPropagation();
            alert($(this).attr("garageid"));

            /*localStorage.setItem("garageID", garage.ID);
             $.mobile.changePage("#resP");*/
        });