Results 1 to 4 of 4

Thread: jQuery UI Accordion with Dynamic Ajax Content

  1. #1
    Join Date
    May 2012
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default 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?

  2. #2
    Join Date
    Aug 2004
    Posts
    9,894
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    Lestatt (05-30-2012)

  4. #3
    Join Date
    May 2012
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Thanks, you saved my butt ;]

  5. #4
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •