Q: jquery mobile phonegap - how do you create a next and previouse button that loads mysql data via ajax from a database? I'm creating an app that displays a single image on the screen which is stored in a database and is retrieved via a php script through ajax.
I need to create a next and previous button to get the next picture from the database and vice versa for the previous button.
The problem is, you need to know the current id of the picture stored in the database, so that you can then use the id and increment the count or decrement it to get the next or previous picture when querying the database. 
What I want to know is, how does my jquery app know the current id of the picture? Is there a way for ajax to send an additional variable along with the html code which is used to display the image?
In my jqm I have the following code which displays the ajax content (image):
<div id= "collmiddle" >Image Container</div>

In the same file I have the following script that retrieves an image from php:
$.ajax (
{           
    url : "http://ukgn.co.uk/phonegap/saifApp.php, 
    complete : function (xhr, result)
    {
    if (result != "success") return;
        var response = xhr.responseText; 
            $("#collmiddle").html (response);
        }
    }); 

Currently the php file sends this back to my app:
// sql query to retrieve the latest picture from database

echo "<img src=\"image.png\">";

The above image replaces the text "Image Container" in the div above when loaded successfully via ajax.
Now I want to be able to do all of the above but with a "next/previous button", therefore when the page loads with the first image, the id of the image must also be loaded and stored in the app so that it can be passed through to the php script when the "next" or "previous" button is clicked, which in turn should update the image with a new image and also replace the image id variable with the new image id variable.
So far I have managed to figure out a way to send a variable by doing the following:
var current_comments_count = 2;
$.ajax (
{ 
    url : "http://ukgn.co.uk/phonegap/saifApp.php?limit_start="+current_comments_count, 

The above methods adds the number to the url; however, I'm not sure how to retrieve the variable. Is JSON a better option here? If so can you show me a working example?

A: I have managed to figure out a way of doing it now. I understand jquerymobile is not the most well documented language out there especially with phonegap.
I solved this problem a week ago but remembered i had a question open here and thought i should respond in order to help someone that faces the same problem.
Here it goes.
Firstly, when you load the app it should open the latest picture by receiving the data from php/mysql. 
So you would have the following div along with 2 buttons inside the apps html: -
<!-- bellow div loads the dynamic data from the data base through a successful ajax call-->
<div id= "collmiddle" >Video Container</div>

        <br><br>
<!-- button 1 bellow is the previouse button-->
        <a href="index.html" data-role="button" data-inline="true" data-theme="b" id=Previouse style="width: 45%">Previouse</a>

<!-- button 2 bellow is the next button-->
        <a href="index.html" data-role="button" data-inline="true" data-theme="a" id=Next style="width: 45%">Next</a>

Which is then populated by data received when the app opens by invoking this javascript ajax request: -
var dataId; //this will store the mysql id of the image so we can use it to determine the next/previouse posts.

$.post("http://yourwebsite.com/saifApp.php", { funcionName: "Latest", pageCount: "dataId" },
           function(data){
             dataId= data.id; //this is the current id where this data is located within the database and can now be used to determine next/previouse posts.

             $("#collmiddle").html (data.b); //this is the picture html code e.g <img src="blah.jpg"> and will be inserted inside "<div id= "collmiddle" >Video Container</div>"
           }, "json");

As you can see the above sends the following data: -
funcionName: "Latest", pageCount: "Latest" //we dont actually need the pagecount for now but i just added it anyway. We will later on to get the next/previouse database data.
This then gets picked up by php located in the following url asspecified above and again bellow: -
http://yourwebsite.com/saifApp.php"
Here is the php code: -
if($_POST['funcionName']=="Latest")
{
            $sqlCommand = "SELECT * FROM images";
            $query = mysqli_query($myConnection, $sqlCommand) or die (mysqli_error());
            if($row=mysqli_fetch_array($query))
            { 
                $imgEmbedCode = $row["embedcode"];
                $dataId= $row["id"];

                mysqli_free_result($query); 
            }

}

As you can see, the php code recognizes the condition based on the following data you sent funcionName: "Latest" and gets the appropriate data from the database. After it does this, it then outputs it into a json format to return back to your app: -
$arr = array(
'title' => "<center><h2>".$title."</h2></center>", 
'b' =>"<div style=\"margin: 0 auto;\">".$imgEmbedCode."</div>", 
'id' => $dataId
);

echo json_encode($arr); //this line is important to ensure php converts the above code into correctly formated json.

Now, if the user clicks on the "next" button in your app, the following javascript code should be invoked from your app: -
$("#Next").bind ("click", function (event)
        {

$.post("http://yourwebsite.com/saifApp.php", { funcionName: "nextPage", pageCount: dataId},
               function(data){
                dataId= data.id; //the database id of the new img.
                 $("#collmiddle").html (data.b);//data is printed inside the <div id= "collmiddle" >Video Container</div>
               }, "json");
        });

From the above you can see we have passed the following variables: -
funcionName: "nextPage", pageCount: dataId

So now our php will know to call the function "nextPage" and will also know the current id of the post and increment it by one to get the correct mysql post. 
Here is the php: -
$_dataId= $_POST['dataId']; //the pageid is pickedp up and will be used in the mysql query bellow: -
if($_POST['funcionName']=="nextPage") 
{
    $_dataId++; //increase the count by 1 to get the next picture inside the database
    $sqlCommand = "SELECT * FROM images WHERE id='$_dataId' LIMIT 1";
            $query = mysqli_query($myConnection, $sqlCommand) or die (mysqli_error());
            if($row=mysqli_fetch_array($query))
            { 
                $imgEmbedCode = $row["embedcode"];
                $dataId= $row["id"];
                mysqli_free_result($query); 
            }
}

As you can see from the above, php recognises the data from the following json "funcionName: "nextPage"" and calls the appopriate method. It also picks up the page count sent via the following json "pageCount: dataId" then assigns it to a variable: -
$_dataId= $_POST['pageCount'];

Then increments it to use as the indicator for the next post: -
$_dataId++; 

Then applies the query and retrieves the appropriate information.
  $sqlCommand = "SELECT * FROM images WHERE id='$_dataId' LIMIT 1";
                $query = mysqli_query($myConnection, $sqlCommand) or die (mysqli_error());
                if($row=mysqli_fetch_array($query))
                { 
                    $imgEmbedCode = $row["embedcode"];
                    $dataId= $row["id"];
                    mysqli_free_result($query); 
                }

Again, the data is formated into json like bellow and echo'd out so that the applications ajax call displayed above retrieves the data: -
$arr = array(
'title' => "<center><h2>".$title."</h2></center>", 
'b' =>"<div style=\"margin: 0 auto;\">".$imgEmbedCode."</div>", 
'id' => $dataId
);
echo json_encode($arr); //again this is very important!

