Hoping someone can point me in the right direction to an annoying problem.
To summarize before I put the code; I have two files.. a html file with javascript called "bookings.php", and a php file with php "getBookings.php".
The bookings.php file contains all the static information like menus, text etc along with javascript + ajax calls.
I'm calling the getBookings file successfully with javascript/ajax and works well and i don't have any problems with it.
My problem is, that from the file that is loaded (getBookings.php); there are some html elements that i need to toggle. The jQuery for it, I have included in the bookings.php file.. but the jquery won't apply or work when the ajax file is called.
All the contents on getBookings.php gets loaded into an #bookingSummary element.
Now, my code is very long, so i will include all the important parts..
// Usual Head Content, Meta, CSS, jQuery files
// Filters
<script language="javascript" type="text/javascript">
function bookings()
{
var fltr="";
if(document.frm.bkid.value != "")
fltr+='bkid='+document.frm.bkid.value+'&';
if(document.frm.customer.value != "")
fltr+='cid='+document.frm.customer.value+'&';
if(document.frm.site.selectedIndex != 0)
fltr+='sid='+document.frm.site.value+'&';
if(document.frm.status.selectedIndex != 0)
fltr+='st='+document.frm.status.value+'&';
if(document.frm.supp.selectedIndex != 0)
fltr+='sup='+document.frm.supp.value+'&';
if(document.frm.datefrm.value != "")
fltr+='dfrm='+encodeURI(document.frm.datefrm.value)+'&dto='+encodeURI(document.frm.dateto.value);
document.getElementById('bookingsummary').innerHTML="<br /><p align='center'> <img src='img/bigloading.gif'></p>";
url='get/getBookings.php?'+fltr;
getAjaxRec(url, viewbookings);
}
function viewbookings()
{
if (xmlHttp.readyState == 4 && (xmlHttp.status==200 || window.location.href.indexOf("http")==-1))
{
document.getElementById("bookingsummary").innerHTML = xmlHttp.responseText;
}
}
</script>
The Above code is the javascript that all works fine.. the following is the html code that calls the above function - bookings():
<!-- Several Form fields are here..-->
<input type="button" value="Apply Filter" class="searchBtn" onClick="bookings();">
<!-- Show booking results -->
<div id="bookingsummary"></div>
Now, within the getBookings file there is an html element with a class name "hiddenDetails" that i need to toggle and the Jquery for it is:
<script type="text/javascript">
$(document).ready(function() {
$('.bookingKeyDetails').click(function()
{
$(this).next('.hiddenDetails').slideToggle('medium");
});
});
</script>
The above code all works apart from the jquery.. here is a snippet from the getBookings.php file.. the part i want to apply the jquery to..
<?php
// A while loop happens then..
$result="
<div class=\"bookingKeyInfo\">
<div class=\"lb1\"><input type=\"checkbox\" name=sup1x".$rw['id']." ></div>
<div class=\"lb2\"><a href=\"editbooking.php?id=".$rw['id']."\">".$rw['id']."</a> </div>
<div class=\"lb3\">".date('d/m/Y', strtotime($rw['pickupDate']))." <strong><font color=\"#FF0000\">".date('H:i', strtotime($rw['pickupTime']))."</font></strong></div>
<div class=\"clearLeft\"></div>
</div>
<div class=\"bookingKeyDetails\">
<div class=\"b-one\"><img style=\"margin-top:9px; padding-bottom: 5px;\" src=\"$base_dir/img/".strtolower($rw['status']).".png\"></div>
<div class=\"b-two\"><img id=\"isCustomerEmailed\" style=\"margin-top:9px; padding- bottom: 5px;\" src=\"$base_dir/img/unassigned.png\"></div>
<div class=\"b-three\"><img id=\"isSupplierEmailed\" style=\"margin-top:9px; padding- bottom: 5px;\" src=\"$base_dir/img/unassigned.png\"></div>
<div class=\"b-four\"><img id=\"isSupplierConfirmed\" style=\"margin-top:9px; padding- bottom: 5px;\" src=\"$base_dir/img/unassigned.png\"></div>
<div class=\"b-trip\">".substr($rw['DA'],0,6)."..<strong> to </strong> ".substr($rw['DB'],0,6)."..</div>
<div class=\"b-pax\">".$rw['pax']." Pax</div>
<div class=\"b-cost\">€$cost </div>
<div class=\"b-supplier\">".substr($sup,0,10)."..</div>
<div class=\"clearLeft\"></div>
<div class=\"hiddenDetails\">More Booking Information...</div>
</div>";
echo $result;
?>
I know this is a very long description of the problem.. so I have tried to give my code exactly as it is..
Could anyone shed some light, as to why the jQuery isn't working.. cz it works separately, just not on any element that is called from getBookings..
The problem is, you're binding an event handler with jQuery to bookingKeyDetails before it actually exists on the page. Remember that this element is being added to your html only after the page is loaded, so any actions you make in $(document).ready(function() { will not apply to it.
Bind the event handler only after you change the html:
function viewbookings()
{
if (xmlHttp.readyState == 4 && (xmlHttp.status==200 || window.location.href.indexOf("http")==-1))
{
document.getElementById("bookingsummary").innerHTML = xmlHttp.responseText;
$('.bookingKeyDetails').click(function()
{
$(this).next('.hiddenDetails').slideToggle('medium');
});
}
};
You're using single and double quotes in your function call
$(this).next('.hiddenDetails').slideToggle('medium");
user 'medium' or "medium"
Since the HTML element you need to toggle was never on the page when the calling page instantaiate the jQuery to toggle, you need to reinitialize the function after a successful call from your ajax.
You can use jQuery .success callback function for their AJAX call tools... I use that to help with this kind of processing instead of native AJAX. Makes life simpler and better cross browser support.
Just call your toggle function after the success.
It's very obvious that it will not toggle because you have writtent the Jquery in the "bookings.php". During the page load of bookings.php, it will not find any content of the getBookings.php so that Jquery will not apply as no element is available with that id.
You have to bind the event for the toogle on Ajax success event of the when you are calling for getBooking.php.
$.ajax({
url: URL,
success: function(){
$('.bookingKeyDetails').click(function()
{
$(this).next('.hiddenDetails').slideToggle('medium");
});
},
error: function(){
alert('failure');
}
});