Question

I really need help.

My problem now is i want to display the books details, which the data is from mysql.

I tell step-by-step.

1. i have table books in mysql

2. from the table, i called the title and price using php, which display like this :

Title : One
Price : 20$

---

Title : Two
Price : 35$

---

my php code is :

<?php

$db_host="localhost";
$db_username="root";
$db_pass="";
$db_name="";

@mysql_connect("$db_host","$db_username","$db_pass") or die("Could not connect to database.");

@mysql_select_db("$db_name") or die("No database");


$q=mysql_query("SELECT * FROM books ");

while($result = mysql_fetch_array( $q )) 
 {

 echo "<b>Title:</b> ".$result['title'] . " <br> ";
 echo "<b>Price:</b> RM".$result['price_myr'] ."<br>"; 
 echo "<br>";

 }

?>

1. Here the problem start. I want to display the book details ( author, publisher, descrp, etc…) when user click on the list above ( step 2) . So can anyone give me the idea on how can i do that ? How to make the book list available for click and then it display the details.

example :

User click on listview ; Title:One ,
the details about the book popup or load.

I guess i need to use Ajax, but i dont know how.

Hope members here can help. Much thanks !

Answer 1

You should wrap each book in <div> tags, and create an onclick function for each one.

Whether it has the information pre-loaded or fetches the information on-demand is up to you. If you have a ton of books listed on the page, pre-loading the information might cause performance issues, so it may be better to load the book information on-demand, via AJAX.

Here is what your code might look like, using AJAX:

// styling should be done in a CSS file, but for the simplicity of the example, including it inline
echo "<div id=\"divBookInfo\" style=\"display:none; position:fixed; bottom:0; right:0;\">
    </div>\n";

$q = mysql_query("SELECT title, price_myr FROM books");

while ($result = mysql_fetch_array($q))
{
    echo "<div onclick=\"showBookInfo({$result["bookID"]})\">
            <b>Title:</b> {$result["title"]} <br />
            <b>Price:</b> {$result["price_myr"]} <br />
        </div>\n";
}

And your JavaScript function:

function showBookInfo(bookID)
{
    var xmlhttp;
    if (window.XMLHttpRequest)
        xmlhttp = new XMLHttpRequest();
    else
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            document.getElementById("divBookInfo").innerHTML = xmlhttp.responseText;
            document.getElementById("divBookInfo").style.display = "block";
        }
    }
    xmlhttp.open("GET", "getBookInfo.php?bookID="+ bookID, true);
    xmlhttp.send();
}

getBookInfo.php:

<?php

$db_host="localhost";
$db_username="root";
$db_pass="";
$db_name="";

@mysql_connect($db_host, $db_username, $db_pass) or die("Could not connect to database.");

@mysql_select_db($db_name) or die("No database");

$q = mysql_query("SELECT author, publisher, description, ... FROM books WHERE bookID = '". mysql_real_escape_string($_GET["bookID"]) ."'");

list($author, $publisher, $description, ...) = mysql_fetch_row($q);

echo "<b>Author:</b> {$author} <br />
    <b>Publisher:</b> {$publisher} <br />
    <b>Description:</b> {$description} <br />";
?>

ALSO

One other side-note is that you should avoid the use of the or die() syntax in a PHP script that is generating your HTML. See this link for some reasons why.