jQuery UI Accordion with Dynamic Ajax Content

1) Script Title:
Dynamic Ajax Content

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem:
When I want to implement Accordion (http://jqueryui.com/demos/accordion) in ajax content div, it doesn't work. It works though on separate page, so it's DAC fault. How can I fix it?

Using Ajax to load webpages has the pitfall of the browser not loading any inline scripts inside the external page when it's fetched. This is simply a limitation of Ajax. That said, in this case you can do the following to get the Accordion on the target page to run when loaded using Dynamic Ajax Content script.

First, on the main page (that contains DAC script), add the below required files of Accordion to the HEAD of your page:

Code:

---

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

---

This ensures that when the external page containing the Accordion is fetched, all of the required resources are there already.

Then, replace the default DAC script with the below modified version instead, which adds a callback function option to the ajaxpage() function:

Code:

---

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid, callback){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid, callback)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid, callback){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(containerid).innerHTML=page_request.responseText
if (typeof callback != "undefined")
callback(page_request.responseText)
}
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

---

With the modified script in place, add the change in red to your link that calls up the external page containing your accordion:

<a href="javascript:ajaxpage('accordion.htm', 'rightcolumn', function(response){$('#accordion').accordion()});">Porsche Page</a>

The new code initializes the accordion once "accordion.htm" is loaded onto the page. Your accordion page would look something like this:

Code:

---

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

---

without the default initialization code, as it's now replaced by the code in red.

Thanks, you saved my butt ;]

Hi everybody!

Perhaps this solution is somewhat applicable to the problem that I had to activate accordion script via ajax ("solved" embedding "all the elements" inside an iframe file). http://www.dynamicdrive.com/forums/s...ad.php?t=69091

Is not that so?

Luys