JSON, jQuery, PHP logic issue loop and display correct value each iteration

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?

Where are you setting the page id? i see you retreive and print it to the page....but I don't see anywhere that you actually set the id again. — Ohgodwhy
– Ohgodwhy, Commented Oct 7, 2012 at 22:21
Thanks for the comment, its in the first file, pageId = $('#pageid').html(); localStorage.setItem("pageId", pageId); about half way down the page, localStorage saves it to RAM (I think) — zomboble
– zomboble, Commented Oct 7, 2012 at 22:23

OmNiOwNeR · Accepted Answer · 2012-10-07 22:25:25Z

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

answered Oct 7, 2012 at 22:25

OmNiOwNeR

541 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

zomboble Over a year ago

Hey, yeah this would be a great solution however, I cannot pass anything php over to the file, it can only be HTML or javascript, is it possible to do it by that? Unless possibly.. in the anchor tag I have dev.12345.co.uk/request.php?id=item.id but then the page needs to be requested as it cannot send data to the device if the file is not on it? Does that make any sense? I hope it does! Thanks again :-D

OmNiOwNeR Over a year ago

What are you trying to accomplish on page1.html exactly? On that page you could use $GET['id'] to query the database for any information on that particular item. (Local Storage stores information in the browser not RAM btw :) )

zomboble Over a year ago

Oh thanks! :) Page1 is to display information about the clicked link, so it will be event information, such as eventName, description more info pictures ect only relating to that event. I cannot see how I could use a get in javascript? Sorry if I misinterpreted it!

OmNiOwNeR Over a year ago

To get the item ID from page.php?id=1 in javascript you can say this " var itemID = <?php echo $_GET["id"]?>"

zomboble Over a year ago

Ahhh Im sorry! I will edit my op, page1.html isnt page+1 its a static page sorry, I will edit the OP, does this make the situation make sense? So lets call page1.html displaySinglePost.html

|

Collectives™ on Stack Overflow

JSON, jQuery, PHP logic issue loop and display correct value each iteration

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related