store ID from listview in localStorage

Question

I've a listview created by a loop:

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

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

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

}

Now the user can click on a listview item and the ID from this item should be stored in the localStorage.

Problem: It first creates the complete listview with all items. If I click now on item#2 from the list, I get the ID from the last item.

Just store the id of the garade as a attribute in the a element. The this-context of the event-handler function will be the clicked a element and lets you read the attribute. Don't forget to stop the event propagation. — Alex, Jan 12 '14 at 15:16

score 3 · Answer 1 · answered Jan 12 '14 at 15:17

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");
    });

}

@serakfalcon I tested it, but some problem. There are 2 items in my list. I insert console.log("i="+i); into the click(function() and got i=2 - No matter what button I had clicked — Struct, Jan 12 '14 at 15:46
mjkaufer's answer will work better. it's better to pull out the function from the loop anyways — serakfalcon, Jan 13 '14 at 00:37

score 2 · Accepted Answer · answered Jan 12 '14 at 15:37

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>".

score 2 · Answer 3 · answered Jan 12 '14 at 16:15

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");*/
        });

OK that's strange. If I click on the button, I will redirect to #resP but then I will redirect immediately to index.html# — Struct, Jan 12 '14 at 16:34
I am not very familiar with jquery mobile. But the problem seems to be known: http://stackoverflow.com/questions/14225021/changepage-jumps-back-to-old-page — Alex, Jan 12 '14 at 16:43

store ID from listview in localStorage

3 Answers3

Linked