Click here to Skip to main content
15,881,172 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I'm trying to show the information of specific book with ajax, but when I pick an option, It won't show the information, What did I do wrong?

First code -> show_books_ajax.php
Second code -> ajax.js
Third code -> get_books.php

PHP
<pre><?php include('header.html') ?>
<br>
<div class="container">
    <div class="card">
        <div class="card-header">Search Specific Book Data</div>
        <div class="card-body">
            <select name="books" id="books" class="form-control" onchange="showBooks(this.value)">
                <option value="">--Select a Book--</option>
                <?php
                require_once('db_login.php');
                //Asign a query
                $query = " SELECT * FROM books ORDER BY isbn ";
                $result = $db->query($query);
                if (!$result) {
                    die("Could not query the database: <br />" . $db->error);
                }
                // Fetch and display the results
                while ($row = $result->fetch_object()) {
                    echo '<option value="' . $row->isbn . '">' . $row->title . '</option>';
                }
                $result->free();
                $db->close();
                ?>
            </select>
            <br>
            <div id="detail_books"></div>
        </div>
    </div>
</div>
<?php include('footer.html') ?>
<script src="ajax.js"></script>


What I have tried:

function callAjax(url, inner) {
  var xmlhttp = getXMLHTTPRequest();
  xmlhttp.open('GET', url, true);
  xmlhttp.onreadystatechange = function () {
    document.getElementById(inner).innerHTML = '<img src="images/ajax_loader.png"/>';
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById(inner).innerHTML = xmlhttp.responseText;
    }
    return false;
  };
  xmlhttp.send(null);
}

function showBooks(isbn) {
  var inner = 'detail_books';
  var url = 'get_books.php?id=' + isbn;
  if (isbn == '') {
    document.getElementById(inner).innerHTML = '';
  } else {
    callAjax(url, inner);
  }
}



<?php
    require_once('db_login.php');
    $isbn = $_GET['isbn'];
    //Asign a query
    $query = " SELECT * FROM books where isbn=".$isbn;
    $result = $db->query( $query );
    if (!$result){
        die ("Could not query the database: <br />". $db->error);
    }
    // Fetch and display the results
    while ($row = $result->fetch_object()){
        echo 'Author: '.$row->author.'<br />';
        echo 'Title: '.$row->title.'<br />';
        echo 'Price: '.$row->price.'<br />';
    }
    $result->free();
    $db->close();
?>
Posted
Comments
Afzaal Ahmad Zeeshan 2-Oct-22 10:56am    
The best way to find out why it is not working is to debug and track where the request fails or does not provide the required response. We cannot debug the code by reading it; easily.

Secondly, the third piece of code is prone to SQL Injection; learn how to avoid that.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900