Search function on PHP/HTML page using AJAX - php

Question

Description: Trying to do a title search for videos within a PHP page with AJAX pagination.
Problem: "Search" button does not do anything when pressed. Instead, if I write something in "keywords" field and switch from page 1 to page 2 the date gets updated and shows videos with matching title. If I delete what I wrote in "keywords" field, and switch again between pages, the data gets updated. As mentioned, "Search" button does not work.
Fix: I would like to write in the text field and press "Search" button. The page should then update and show only the videos with the matching title.
search.php:
<!-- Testing the search -->
<p><b> Search all videos in database below: </b></p>
<ul>
<li>
<label for="keywords">Keywords</label>
<input type="text" id="keywords" name="keywords" size="50" maxlength="64" />
</li>
<li>
<input type="button" value="Search" onclick="loadData()" />
</li>
</ul>
search_videos.js:
* 'page' variable is used for pagination
...
function loadData(page){
$.ajax
({
type: "POST",
url: "search_videos.php",
data: { 'page': page, 'keywords': $('#keywords').val() },
success: function(msg)
{
loading_hide();
$("#container").html(msg);
}
});
}
...
Update: Below is what I get, after I press 2nd page and then 1st page again.
POST results:
Raw results (sorry for bad formatting):
005<div class='data' style='margin-bottom:10px'><ul><img src="images/link_pic.png" alt="error" width="164" height="128"><li>Title: <b>Video 1</b></br> Uploaded by: user1</br>Date added: 13/07/2013</li></br></br><img src="images/link_pic.png" alt="error" width="164" height="128"><li>Title: <b>ghg</b></br> Uploaded by: cacamaca</br>Date added: 21 Jul 2013 16:03</li></br></br><img src="images/link_pic.png" alt="error" width="164" height="128"><li>Title: <b>s</b></br> Uploaded by: cacamaca</br>Date added: 21 Jul 2013 16:23</li></br></br><img src="images/link_pic.png" alt="error" width="164" height="128"><li>Title: <b>s</b></br> Uploaded by: cacamaca</br>Date added: 21 Jul 2013 16:24</li></br></br><img src="images/link_pic.png" alt="error" width="164" height="128"><li>Title: <b>dg</b></br> Uploaded by: gdfgdf</br>Date added: data azi</li></br></br></ul></div><div class='pagination'><ul><li class='inactive'>Previous</li><li p='1' style='color:#fff;background-color:#006699;' class='active'>1</li><li p='2' class='active'>2</li><li p='2' class='active'>Next</li>
This is what I get when I press search button now:
This is a bit long, the first part of the code should be relevant to the problem. Here is the code for:
search_videos.php :
<?php
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 5;
$previous_btn = true;
$next_btn = true;
$start = $page * $per_page;
include"core/database/connect.php";
// Get the input of the selected video
$input = $_POST['input'];
//$input = 'video';
echo $input;
echo $page;
echo $start;
echo $per_page;
// protect against sql injection and ignore multiple spaces in the input
$keywords = preg_split('#\s+#', mysql_real_escape_string($input));
// query the database by user input title
$by_title = "LOWER(`V_TITLE`) LIKE '%" . implode("%' OR `V_TITLE` Like '%", $keywords) . "%'";
$query_pag_data = "SELECT * from upload WHERE $by_title LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$msg .= '<img src="images/link_pic.png" alt="error" width="164" height="128">' . '<li>Title: <b>' . $row['V_TITLE'] . '</b></br> Uploaded by: ' . $row['V_USERNAME'] . '</br>Date added: ' . $row['V_DATE'] . '</li></br></br>';
}
$msg = "<div class='data' style='margin-bottom:10px'><ul>" . $msg . "</ul></div>"; // Content for Data
/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM upload";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);
/* ---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
$start_loop = $cur_page - 3;
if ($no_of_paginations > $cur_page + 3)
$end_loop = $cur_page + 3;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 6;
$end_loop = $no_of_paginations;
} else {
$end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 7)
$end_loop = 7;
else
$end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul>";
// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
$msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
if ($cur_page == $i)
$msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
else
$msg .= "<li p='$i' class='active'>{$i}</li>";
}
// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
$msg .= "<li class='inactive'>Next</li>";
}
echo $msg;
// de-allocate memory that was used to store the query results returned by mysql_query(), improve performance
mysql_free_result($query_pag_data);
}

Answer 1

The problem was with the javascript. The pagination is given by the ajax response and it seems that in some cases (or all; I didn't study the issue that deep) javascript events can't be fired after the elements to which they were bound are dynamically added to the page. The very easy to use live() method is deprecated since jQuery 1.7. What worked now was:
$('#container').on('click','.pagination li.active', function(){//... the ajax request here}
The difference between live() and on() is that the element to which you would normally bind the event is the second argument of the on() method and the on() method is called on the parent of the element.