iPhone Web Application : Creating the Select Books Panel in jQTouch

In this article, we will learn to create “Select Books” panel that displays the books of the selected category and subcategory. We assume that the user has already selected category and subcategory of the book in the earlier panels. The information of the books will  be fetched from the books table in the server-side shopping database. The list of the books matching the specified category and subcategory will be displayed as shown in figure 1(a). There can be multiple books in the subcategory, and these are displayed sequentially. The user can scroll down to see additional entries, as shown in figure 1(b).

To display all the books belonging to the selected subcategory, we need the following:

• A JavaScript function, selectedsubcat(), that manages the entire process
• A getbooks.php PHP script that fetches books in the selected subcategory from the books table
• A booksdisplay div element that displays the books on the screen

Let’s first create the selectedsubcat() JavaScript function, which will perform the following tasks:

• Calls the server-side getbooks.php PHP script, which fetches books belonging to the selected subcategory from the server-side books database table.
• Sends the books fetched by the PHP script to the booksdisplay div.
• Jumps to the booksdisplay div, which outputs the book list to the screen.

The selectedsubcat() code is shown in Listing 1.

Listing 1. selectedsubcat() function

function selectedsubcat(cat, subcat){
    $('#bookslist').children().remove();
    $.ajax({
        type:"POST",
        url:"getbooks.php",
        data: 'category='+cat+'&subcategory='+subcat,
        success:function(html){
            $('#bookslist').append(html);
            jQT.goTo('#booksdisplay', 'slide');
        }
    });
    return false;
}

The sequence of events is as follows:

1. The cat and subcat parameters are passed to the selectedsubcat() function that contains the category and subcategory selected by the user.
2. Any of the books in a previously selected category and subcategory are removed from the bookslistdiv.
3. The ajax() method is called, requesting the POST method and the getbooks.php server-side script be used.
4. The selected category and subcategory is passed to the script in the variables category and subcategory as data.
5. The script file, getbooks.php, fetches the books  from the server-side books database table that meet the criteria supplied by data.
6. When the request sent to getbooks.php succeeds, the success call back function executes.
7. The script response is received in an html parameter that is appended to the bookslist div.
8. The bookslist div is nested inside the booksdisplay div, hence we are navigated to it via a slide animation and displays the list of books.
9. To suppress the browser’s default click-event behavior, the function returns false.

The code for the server-side PHP script, getbooks.php, is shown in Listing 2.

Listing 2. getbooks.php script

<?php
    $cat =trim($_REQUEST['category']);
    $subcat =trim($_REQUEST['subcategory']);
    $connect=mysql_connect("localhost","root",
"mce") or die ("Please check your server 
        connection");
    mysql_select_db("shopping");
    $query="Select isbn, title, author1, author2, author3,
price, image from books 
       where category =\”$cat\” and subcategory = \”$subcat\””;
    $results =mysql_query($query) or die (mysql_query());
    if(mysql_num_rows($results)>0)
    {
        while ($row=mysql_fetch_array($results))
        {
            extract ($row);
            echo '<fieldset
style="background-color:white; color:black;">';
            echo '<form action="cart.php?isbn=' . $isbn .
'&title=' . 
                urlencode($title) . '&price=' . $price
.'&action=add' . '" 
                 method="POST"
class="form">';
            echo '<img src=' . $image .'>';
            echo '<h3>' . $title . '</h3>';
            echo '<h4>' . $author1 . '</h4>';
            echo '<label>Price: </label>';
            echo '<em>' . $price .
'</em><br/>';
            echo '<label>Quantity:  </label><input
type="text" name="quantity" 
              value="1" style="height:22px;"
size="6"/>';
            echo '<a class="whiteButton"
href="#" onclick="showdetails(\'' . $isbn . 
                '\');"> Show Details</a>';
            echo '<a class="submit whiteButton"
href="#"> Add To Cart</a>';
            echo '</form>';
            echo '</fieldset>';
        }
    }
    else
    {
        echo '<ul class="rounded">';
        echo "<li> No Books found in this
Subcategory</li>";
        echo "</ul>";
    }
?>

The sequence of events is as follows:

1. The category and subcategory selected by the user is passed to the script getbooks.php via data.
2. The category and subcategory are retrieved from a $_POST array and stored in the $cat and $subcat variables.
3. A connection to the shopping database is established and a query executed to fetch information from the books table that match the category and subcategory specified in the $cat and $subcat variables respectively.
4. The list of books belonging to the specified category and subcategory is fetched from the books table and stored in the results array.
5. If the $results array is empty, that is, if there are no books of the selected category and subcategory, then a No Books found in this Subcategory response is generated and sent back to the selectedsubcat() function for display.
6. If the results array is not empty, rows are sequentially retrieved and assigned to the $row variable.
7. The row retrieved in $row variable is extracted to display data stored in the image, title, author1, and price columns.
8. A quantity input text field and two buttons, Show Details and Add To Cart, are attached to each book displayed.
9. The input text field quantity is assigned the default value of 1. The user can change this value if desired.
10. The Add To Cart button invokes the cart.php PHP script file, which adds the selected book to the cart.
11. The Show Details button invokes the showdetails() function. The selected book’s isbn is passed to showdetails() as a parameter. We will see in the next section how the showdetails() function is used for displaying the selected book’s detailed information.
12. The response of the getbooks.php script is sent to the selectedsubcat() function, which appends the response to the bookslist div for displaying in the panel. The code for booksdisplay div is shown in Listing 3.

Listing 3. booksdisplay div

<div id="booksdisplay">
    <div class="toolbar">
        <a class="back"
href="#">Back</a> 
        <h1>Select Books</h1>  
    </div>
    <div id="bookslist">
    </div>
</div>

The sequence of event is as follows:

1. The booksdisplay div contains a nested toolbar div that displays a Back button for jumping to the Subcategories panel.
2. The toolbar also contains a Heading 1 element that displays the Select Books title on the panel. Below the toolbar is a bookslist div element.
3. The response generated by getbooks.php, containing all the books in the selected category and subcategory, is appended to bookslist via the selectedsubcat() function