I am redoing my site and have at any time 80-120 vehicles, all identified in my db by their unique stock number. I'm using jQuery's accordion to list the vehicles: http://www.login.carcityofdanbury.com/New/?cat=01
How do I embed edit.php?stock=__STOCK__
into the div of the open accordion, once the accordion opens? I tried just using just an HTML <embed>
tag, but it is making the page load extremely slow.
I am new to the whole jQuery, Ajax, coding thing and am completely a self taught "learn as I go" guy, so a demo, tutorial or example would be great.
You could get some help here: http://api.jquery.com/jQuery.ajax/
Example:
$.ajax({
url: "yourPage.php",
success: function(data){
$("#youarea").text(data);
}
});
You could use a combination of jQuery .load function (http://api.jquery.com/load/) and the jQuery UI Accordion change event (http://jqueryui.com/demos/accordion/#event-change) which gets triggered after an accordion slide opens:
$(document).ready(function(){
$("#listVehicles").accordion({
collapsible: true,
active: false,
autoHeight: false,
change: function(event, ui){
ui.newContent.load('edit.php', { stock: __STOCK__ });
}
});
});
When the change event is triggered, the edit.php file is loaded using AJAX and the HTML is dropped into the opened accordion slide.
I would recommend using the jQuery load()
function which is designed for this specifically. You give it an element, and a url and it will load the content into the element.
So, in your Accordion handling code, you'll want to place the following:
$('#elementToLoadInto').load('edit.php?stock='+id');
From there, your PHP page should server up a single (or multiple if needed) <div>
element, not a full HTML page. That content will be placed into #elementToLoadInto
exactly as it is, just like it was coded there.
jQuery can also load only a piece of the page, so you could also take advantage of that functionality if you need to return a full HTML page for some other reasons.