SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding onload event to AJAX loaded div

    Hi, I'm trying to integrate a photo gallery into a site where the content section of the page is loaded using AJAX. I'm using Lightbox for the gallery and although the gallery works fine as a separate page, I now need to add the following events to the <div> containing the gallery:
    Code:
    onload="focus_first_input(); initLightbox();"
    Does anyone know how I can add these to the <div> whenever it is loaded?

    Currently the code is as follows on the top page:
    Code:
    <ul id="nav">
    	<li id="navLineup"><a href="javascript:ajaxpage('lineup.php', 'content_right');">Lineup</a></li>
    	<li id="navStages"><a href="javascript:ajaxpage('retrostages.php', 'content_right');">Stages</a></li>
    	<li id="navGallery"><a href="javascript:ajaxpage('gallery_index.php?level=album&id=1', 'content_right');" onclick="focus_first_input(); initLightbox();">Gallery</a></li>
    	<li id="navRetrospective"><a href="javascript:ajaxpage('retrospective.php', 'content_right');">Gallery</a></li>
    </ul>
    the placeholder div....
    Code:
    <div id="content_right">
    </div>
    and the loaded gallery...
    Code:
    <div id="content_right">
    <h1 id="retrovision">Retro vision</h1>
    <div id="subcontent">
    <?php
    require("gallery.php"); 
    the_gallery(); 
    ?>
    </div>
    </div>
    Grateful for any help!

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I presume the ajaxpage() function calls another function when the server sends back its response.
    That function then adds content to the specified div.
    Can you add calls to focus_first_input() and initLightbox() at the end of the callback function?

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The ajaxpage() functions calls the following script, do you know where I should add the function calls for the lightbox script to work?

    Code:
    //the usual ajax stuff then this...//
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=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
    }
    }
    }

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try inside the first conditional
    Code:
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
        document.getElementById(containerid).innerHTML=page_request.responseText;
    focus_first_input();
    initLightbox();
    }

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks r51 - i gave that a try but it's still not working i'm afraid. In my main page, this is how I'm linking to my external files (in case this is where i'm going wrong):
    Code:
    <link rel="stylesheet" href="css/lightbox2.css" type="text/css" media="screen" />
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>
    <script type="text/javascript" src="includes/ajax.js"></script>
    Do you think there is a problem with me trying to call the lightbox init() functions from the AJAX file?

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once imported, all the scripts are in your page together. There will only be a problem if lightbox creates its own 'namespace' for its functions.

    Maybe someone who knows lightbox can help you.


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
  •