Combining jQuery Ajax Code Not Working - php

Question

I am trying to amalgamate two ajax functions that use jQuery. Both work perfectly on their own, but I'm having a hell of a time combining the two, and I'm pretty green when it comes to Ajax. I can't figure out what's wrong.
I know this is asking a lot of someone, but I don't know what else to do. I would be extremely grateful for any help, and perhaps an explanation of what I would need to do if I wanted to add more functionality to this code so I don't have to keep bothering you all.
It's an image gallery. The two halves are a combo box to select how many images show per page, and the other is pagination to navigate the pages. I have a feeling it has something to do with the jQuery Ajax data: {page:page, imgs: value} but that might just be part of the problem.
The HTML:
<div id="loading"></div>
<div id="gallery_container">
<ul class="new_arrivals_gallery"></ul>
<div class="pagination"></div>
<form>
<label>Images Number:</label>
<select id="imgNum" name="imgNum">
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
</form>
</div>
The JavaScript (jQuery):
function loading_show(){
$('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function gallery_show(){
$('#gallery_container').fadeIn('slow');
}
function gallery_hide(){
$('#gallery_container').fadeOut(10);
}
function loadData(page){
loading_show();
gallery_hide();
$.ajax
({
type: "GET",
url: "new_arrivals_data.php",
data: {page:page, imgs: value},
success: function(msg)
{
$("#gallery_container").ajaxComplete(function(event, request, settings)
{
gallery_show();
loading_hide();
$("#gallery_container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
//The combo box
var sel = $(this);
//Selected value
var value = sel.val();
loadData(page);
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
.prop("selected","selected")
.change();
The PHP:
<?php
if($_GET['page'])
{
$page = 0;
if(isset($_GET['page'])){
$page = (int) $_GET['page'];
}
$cur_page = $page;
$page -= 1;
if((int) $_GET['imgs'] > 0){
$per_page = (int) $_GET['imgs'];
} else {
$per_page = 12;
}
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";
$query_pag_data = "SELECT `imgURL`,`imgTitle` FROM `images` ".
"ORDER BY `imgDate` DESC LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
echo "<ul class='new_arrivals_gallery'>";
while($row = mysql_fetch_assoc($result_pag_data)) {
echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
}
echo "</ul>";
/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM images";
$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 FIRST BUTTON
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
$msg .= "<li p='1' class='inactive'>First</li>";
}
// 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>";
}
// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>"; // Content for pagination
echo $msg;
}
Thank you so much to whomever takes the time to look at this. I know it's a lot, but even if someone tells me what needs to be done, and then I figure out how to do it, I would be extremely grateful.
*I would be willing to include the code of each part before I tried to combine them, if that would help.
ORIGINAL SEPERATE CODE:
Here are both sets of the original code. The goal is to combine them, in other words add code #2 to code #1.
HTML & jQuery #1:
<body>
<div id="loading"></div>
<div id="gallery_container">
<ul class="new_arrivals_gallery"></ul>
<div class="pagination"></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function loading_show(){
$('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function gallery_show(){
$('#gallery_container').fadeIn('slow');
}
function gallery_hide(){
$('#gallery_container').fadeOut(10);
}
function loadData(page){
loading_show();
gallery_hide();
$.ajax
({
type: "GET",
url: "new_arrivals_data.php",
data: "page="+page,
success: function(msg)
{
$("#gallery_container").ajaxComplete(function(event, request, settings)
{
gallery_show();
loading_hide();
$("#gallery_container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
});
</script>
</body>
PHP #1:
<?php
if($_GET['page'])
{
$page = $_GET['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";
$query_pag_data = "SELECT `imgURL`,`imgTitle` FROM `images` ".
"ORDER BY `imgDate` DESC LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
echo "<ul class='new_arrivals_gallery'>";
while($row = mysql_fetch_assoc($result_pag_data)) {
echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
}
echo "</ul>";
/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM images";
$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 FIRST BUTTON
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
$msg .= "<li p='1' class='inactive'>First</li>";
}
// 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>";
}
// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>"; // Content for pagination
echo $msg;
}
HTML & jQuery #2:
<body>
<form>
<label>Images Number:</label>
<select id="imgNum" name="imgNum">
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
</form>
<div id="imgTray"></div>
<script type="text/javascript" src="js/libs/jquery-1.6.1.min.js"></script>
<script>
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
//The combo box
var sel = $(this);
//Selected value
var value = sel.val();
//Feth the images
$.get("get_images.php",{imgs: value}, function(data){
//Add images to the document
$("#imgTray").html(data);
});
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
.prop("selected","selected")
.change();
</script>
</body>
PHP #2:
<?php
if((int) $_GET['imgs'] > 0){
$limit = (int) $_GET['imgs'];
} else {
$limit = 12;
}
$curPage = 0;
if(isset($_GET['page'])){
$curPage = (int) $_GET['page'];
}
$mysql_link = mysql_connect("localhost", "root", "root");
mysql_select_db("new_arrivals_imgs") or die("Could not select database");
$query = mysql_query("SELECT `imgURL`,`imgTitle` FROM `images` ".
"ORDER BY `imgDate` DESC LIMIT " . $limit * $curPage . ", $limit") or die(mysql_error());
if(!$query) {
echo "Cannot retrieve information from database.";
} else {
while($row = mysql_fetch_assoc($query)) {
echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
}
}
?>
Thought I should mention: When I change the data: {page:page, imgs: value} back to what it was in code #1: data: "page="+page the images show, and the pagination works. Alas, the combo box is not visible. Any thoughts on that?

Answer 1

I dont think the following code:
$("#gallery_container").ajaxComplete(function(event, request, settings)
{
gallery_show();
loading_hide();
$("#gallery_container").html(msg);
});
should be in the success function of your ajax call..
The API states that
Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.
Thus in your case any further ajax requests should fire the ajaxComplete event and call the callback function for the same..
Hope that makes sense.. I have not worked with the ajaxComplete API myself and this is my understanding

Answer 2

Your success callback be just this:
success: function(msg) {
gallery_show();
loading_hide();
$("#gallery_container").html(msg);
}
That way, when you successfully get your HTML (in msg) back from the server, you will show the gallery, hide the loader animation, and stuff the msg HTML into the gallery.
The ajaxComplete function registers an "AJAX is done" handler:
Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.
But you're not doing any AJAX on #gallery_container, you are doing things to it but it doesn't know that those things originate from AJAX actions. The result is that your success handler does nothing that the user can see.
An error handler might be a good addition as well, then you could move the "hide loader animation" to a complete handler:
success: function(msg) {
gallery_show();
$("#gallery_container").html(msg);
},
error: function(jqXHR, textStatus, errorThrown) {
// Tell the human that something broke.
},
complete: function() {
// This is always called regardless of success or failure.
loading_hide();
}
The complete handler is:
A function to be called when the request finishes (after success and error callbacks are executed).
So that's a good place to put any cleanup that you always want to happen.