How can I use AJAX request in this code? This code is a part of an...

Question

Question

How can I use AJAX request in this code? This code is a part of an...

How can I use AJAX request in this code?

This code is a part of an web application using AJAX that allows users to browse music albums.

/** Load the list of albums */
	function listAlbums() {
	// TODO make an AJAX request to /albums
	// then populate the "albums_list" list with the results
	}

	/** Show details of a given album */
	function showAlbum(album_id) {
	// TODO make an AJAX request to /albuminfo with the selected album_id as parameter (i.e., /albuminfo?album_id=xxx),
	// then show the album cover in the "album_cover" div and display the tracks in a table inside the "album_songs" div
	}

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

This example require jquery2.1.1, PHP and Database.

Following are components of the examples

1. Database table structure.

CREATE TABLE AlbumMaster (
id number NOT NULL,
album_name` varchar(255) NOT NULL
)

2. One index.php where user would search albums.

3. readAlbum.php contains the business logic to query database based on the user input.

4. dbcontroller.php provides the database connectivity.

index.php

<html>
<head>
<TITLE>Album Search Example</TITLE>
<head>
<style>
body{width:610px;}
.frmSearch {border: 1px solid #a8d4b1;background-color: #c6f7d0;margin: 2px 0px;padding:40px;border-radius:4px;}
#album-list{float:left;list-style:none;margin-top:-3px;padding:0;width:190px;position: absolute;}
#album-list li{padding: 10px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;}
#album-list li:hover{background:#ece3d2;cursor: pointer;}
#search-box{padding: 10px;border: #a8d4b1 1px solid;border-radius:4px;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
   $("#search-box").keyup(function(){
       $.ajax({
       type: "POST",
       url: "readAlbum.php",
       data:'keyword='+$(this).val(),
       beforeSend: function(){
           $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
       },
       success: function(data){
           $("#suggesstion-box").show();
           $("#suggesstion-box").html(data);
           $("#search-box").css("background","#FFF");
       }
       });
   });
});

function selectAlbum(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
</head>
<body>
<div class="frmSearch">
<input type="text" id="search-box" placeholder="Album Name" />
<div id="suggesstion-box"></div>
</div>
</body>
</html>

readAlbum.php

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["keyword"])) {
$query ="SELECT * FROM AlbumMaster WHERE album_name like '" . $_POST["keyword"] . "%' ORDER BY album_name LIMIT 0,6";
$result = $db_handle->runQuery($query);
if(!empty($result)) {
?>
<ul id="album-list">
<?php
foreach($result as $album) {
?>
<li onClick="selectAlbum('<?php echo $album["album_name"]; ?>');"><?php echo $album["album_name"]; ?></li>
<?php } ?>
</ul>
<?php } } ?>

dbcontroller.php

<?php
class DBController {
   private $host = "localhost";
   private $user = "root";
   private $password = "";
   private $database = "phppot_examples";
   private $conn;

   function __construct() {
       $this->conn = $this->connectDB();
   }

   function connectDB() {
       $conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
       return $conn;
   }

   function runQuery($query) {
       $result = mysqli_query($this->conn,$query);
       while($row=mysqli_fetch_assoc($result)) {
           $resultset[] = $row;
       }
       if(!empty($resultset))
           return $resultset;
   }

   function numRows($query) {
       $result = mysqli_query($this->conn,$query);
       $rowcount = mysqli_num_rows($result);
       return $rowcount;
   }
}
?>

Add a comment

Answer 2

How can I use AJAX request in this code? This code is a part of an...

Homework Answers

Add Answer to:
How can I use AJAX request in this code? This code is a part of an...

Post as a guest

Earn Coins

PYTHON PROGRAMMING NEED HELP ASAP You will write an application to manage music collections -- a music collection is a l...

HTML: ch14 IC_1B - use a fadeToggle to control jQuery to show the second part of...

need help to complete the task: app.py is the Python server-side application. It includes a class...

Please advise what is being doing wrong. Requirement. See if you can modify the code of...

Question: How can this code be rewritten without using array? Code in action here: After Inserting...

I have the code buts its not working as this below instruction can anyone help Use...

Create a new project in BlueJ and name it LastName-lab8-appstore, e.g., Smith-lab8-appstore. If your App class from Lab 4 is fully functional, copy it into the project. (You can drag a file from File...

Add JavaScript code in the “find_primeV2.js” to allow users to enter a number, and then based...

i need help with this homework webpage and code too: The webpage must include: Global Structure...

Java Inventory Management Code Question

How can I use AJAX request in this code? This code is a part of an...

Homework Answers

Add Answer to: How can I use AJAX request in this code? This code is a part of an...

Post as a guest

Earn Coins

Add Answer to:
How can I use AJAX request in this code? This code is a part of an...