Jquery $.post to PHP script time lag - php

Question

I have a PHP page with an unordered list. I have a some jQuery code that waits for a user to click on one of the items in the list:
$(function() {
$('li.large_box').css('cursor', 'pointer')
.click(function() {
$('#db_sections').empty();
var show_id = this.id;
$.post('get_section_dates.php', { show_id: show_id }, function(sections) {
$('#section_dates_feedback').html(sections);
});
});
});
When a user clicks on one of these items the jQuery code sends it's id to a php script that makes a database query and builds a dropdown list with the results:
if (isset($_POST['show_id'])) {
$show_id = $_POST['show_id'];
$result = mysql_query("SELECT `id`,`air_date` FROM `daily_show` WHERE show_id = '".$show_id."'");
echo"<div id='dates_select'>";
echo "<select id='date_select'>";
echo "<option value='0'>Choose a date</option>";
while ($query = mysql_fetch_assoc($result))
{
$id = $query['id'];
$air_date = strtotime($query['air_date']);
$date = date("M-d-Y \(D\)",$air_date);
echo "<option value='$id'>$date</option>";
}
echo "</select>";
echo "</div>";
}
The first time I click on one of the list items everything works quickly and the dropdown box comes out correctly. The problem is, when I click on the next list item, the code takes a few seconds longer to build the new dropdown list in place of the old one. Each new click on a different list item compounds the time it takes to build the dropdown list until it takes more then a minute each time.
The database table that it's querying is only 12 records long, and generally it's only returning 1 or 2 rows at the most.
I'm new to PHP/jQuery and was wondering if there was anything blatantly obvious in my code slowing this process down.
Thanks for taking a look at my problem!

Answer 1

you should consider optimizing your transport method as well as your JS that handles it.
First of all, your scripts are building "fat" every click. that is, there are excessive jQuery calls. you can optimize it into this:
$(function() {
//put into reference static elements
$db_sections = $('#db_sections');
$section_dates_feedback = $('#section_dates_feedback');
//delegate event to parent handler using .on()
$('the_containing_ul').on('click', 'li.large_box', function() {
$db_sections.empty();
$.post('get_section_dates.php', {
show_id: this.id
}, function(data) {
//callback
});
});
});
as for your PHP reply, you should at least use JSON for transport and not HTML to make it light. you can use json_encode to turn a PHP array to a JSON string for transport.
if (isset($_POST['show_id'])) {
$show_id = $_POST['show_id'];
$result = mysql_query(query_here);
$resultArray = mysql_fetch_assoc($result)
//do a little formatting before we send over
while ($resultArray){
$resultArray['air_date'] = date("M-d-Y \(D\)",strtotime($resultArray['air_date']));
}
echo json_encode($resultArray);
}
this will print the following JSON string which is better than printing HTML:
[
{"id":"1","air_date":"January 1, 12"},
{"id":"2","air_date":"January 2, 12"},
{"id":"3","air_date":"January 3, 12"},
... and so on
]
now, in the POST request, jQuery intuitively converts it into a JSON object which we can parse. you can now use it to generate your selectbox. this will be the callback:
function(data) {
//create a select and div, and append it to a div
$div = $('<div id="dates_select" />');
$select = $('<select id="date_select" />').appendTo($div);
//create options based on data and append to select
$.each(data,function(index,row){
$('<option />')
.attr('value',row.id)
.text(row.air_date)
.appendTo($select);
}
//put div into the feedback
$section_dates_feedback.html($div);
}

Answer 2

Sounds like a multiple binding issue to me. Just a guess, but maybe you are adding the click function to the clickable item each time the POST returns. So, the next time you click, it's going to run the POST twice. Then three times. That's adding a new request each time as well as adding redundant DOM manipulations each time.
However, the code as it looks in the sample isn't showing obvious signs of having the click bound again. So even though I have a suggestion, it's sort of a shot in the dark.
(Side note: there's no reason to add the CSS via jQuery here. Just put this rule into your style sheet! I've eliminated it from the sample)
Now, I don't know your markup, so I'm going to play safe and use document as my suggested listener to help avoid multiple binding. Basically, the first selector in here is ideally an actual node that never gets destroyed as part of the Ajax call. It's rendered on first page load and then never rendered again. You might use $('#someContainer').on( /* ... */) for example. I'll just use document.
$(function() {
$(document).on('click', '.large_box', function() {
/* all the stuff that should happen on click */
});
});
Now here's the truly important thing that you SEEM to be doing in your sample but may not be. This document ready function must be fired only once when the page first loads. A true document ready function as it was intended to be. Don't put it inside any functions that might get fired.
Quick way to tell if it's being bound multiple times is to open Firebug or Webkit Developer Tools... you'll see the POST HTTP requests. If multiple are getting fired for one click, just figure out why it's being bound again.