JSON，jQuery，PHP逻辑问题循环并在每次迭代时显示正确的值

Question

TL;DR at bottom of post

I am building an application for mobile OS. This is the relevant code:

var pageId;
        $(document).ready(function(){
            var output = $('#output');

            $.ajax({
                url: 'http://dev.123456789.co.uk/db.php',
                dataType: 'jsonp',
                jsonp: 'jsoncallback',
                timeout: 5000,
                success: function(data, status){
                    $.each(data, function(i,item){ 
                        var linkedPage = '<h2><a href="displaySinglePost.html">'+item.eventName+'</a></h2>'
                            + '<p>Description: '+item.description+'</p><p>Type: '
                            + item.type+'</p><p id="pageid">'+item.id+'</p>';

                        output.append(linkedPage);
                        pageId = $('#pageid').html();
                        localStorage.setItem("pageId", pageId);
                    });
                },
                error: function(){
                    output.text('There was an error loading the data.');
                }
            });
        });

Basically, the code goes to a PHP file stored on our dev server and returns data from the database, in this case its eventName, description, type and id, the id being the id of the row in the database (primary key).

In each iteration it outputs the correct item.id at: '+item.id+'

'.

However, when you go to click each link to take you to the new page localStorage.setItem -> pageId is always the same, so it always equals 1, the first id in the database. However I need it so that when you click the link it takes you to the correct ID for each iteration.

As far as I am aware I cannot do a get/post because the application cannot read PHP because it is for a smartphone, so the data handling on the device is through javascript/data sent from JSON (and structure with HTML); any ideas?

EDIT: displaySinglePost.html:

var pageId;

        $(document).ready(function(){
            pageId = localStorage.getItem("pageId");
            document.write("pageid: " +pageId);
            var output = $('#output');
            localStorage.clear();
            $.ajax({
                url: 'http://dev.xxxxxxx.co.uk/single.php',
                dataType: 'jsonp',
                jsonp: 'jsoncallback',
                timeout: 5000,
                success: function(data, status){
                    $.each(data, function(i,item){ 
                        var dataOut = '<h2><a href="displaySinglePost.html">'+item.eventName+'</a></h2>'
                            + '<p>Description: '+item.description+'</p><p>Type: '
                        + item.type+'</p>';

                        output.append(dataOut);
                    });
                },
                error: function(){
                    output.text('There was an error loading the data.');
                }
            });
        });

Too Lazy; Didn't Read:

However, when you go to click each link to take you to the new page localStorage.setItem -> pageId is always the same, so it always equals 1, the first id in the database. However I need it so that when you click the link it takes you to the correct ID for each iteration.

As far as I am aware I cannot do a get/post because the application cannot read PHP because it is for a smartphone, so the data handling on the device is through javascript/data sent from JSON (and structure with HTML); any ideas?

Answer 1

Do you mean to set the local storage item "pageID" on every iteration, like on your first example? You may be overwriting the value of it on every iteration(the last iteration would have an item.id of 1).

However, if you want to create a link for each id you should try:

var dataOut = '<h2><a href="page.php?id='+item.id+'">'+item.eventName+'</a></h2>'
                    + '<p>Description: '+item.description+'</p><p>Type: '
                    + item.type+'</p>';

And have php handle the id via $_GET on page.php