Advanced Search

Results 1 to 4 of 4

Thread: Dynamic Ajax Content with Galleria

  1. #1
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Dynamic Ajax Content with Galleria

    1) Script Title: Dynamic Ajax Content

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

    3) Describe problem:

    Fellow coders,

    I am getting a little desperate here, I ask for your help.

    Here's the situation:

    I use a tree-like submenu for my page, which has multiple levels and I wanted them to stay "as is" if the user navigates. Obvious solution was to use the formentioned DD script. Although it works wonderfully, my problem is that the ajax loaded page uses a jquerry gallery (namely, Galleria). Now it may seem like it's working OK but it's not - although I use an onclick event to start galleria when loading the ajax content, if you click a menu twice, it disappears - I think the most likely solution is because the gallery script does not load again. I am not sure though. I tried with loadobj() function as well, did not work either, as it only loads the script once - a second click on the active menu and it falls apart again.

    Please check out for yourselves, I set up a demo page here. Click the second menu, "Asztali áru", only these submenus work for the purpose of testing.

    I welcome any suggestions; thank you in advance.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    It works fine on my machine except for the very first page load. After a page refresh, there's no problem anymore.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    It looks like you need to remove this code:

    Code:
    <script type="text/javascript">
            $(document).ready(function(){
                if (document.cookie.indexOf('visited=true') === -1) {
                    var expires = new Date();
                    expires.setDate(expires.getDate()+30);
                    document.cookie = "visited=true; expires="+expires.toUTCString();
                    
                    $("a[rel='welcomehun']").colorbox({transition:"fade", open:"true", 
    scrolling:false, innerWidth:480, innerHeight:385, opacity:.5}); 
                } 
            });
        </script>
    because if the cookie isn't present, it tries to load colorbox, which isn't there, so it ends up throwing an error and other scripts (like the accordion) don't work as expected. That's why on reload (after the cookie is set) the accordion works.

    Now on to the AJAX issue. I'm surprised it works at all like that. Here's what to do. Forget about loadobjs, you can load any scripts or styles that you want in the head of the page in the normal manner with external script tags and stylesheet links. Use this version of the script which removes loadobjs and adds a success function argument:

    Code:
    function ajaxpage(url, containerid, success){
    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, success)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }
    
    function loadpage(page_request, containerid, success){
    	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
    		document.getElementById(containerid).innerHTML=page_request.responseText
    		if(typeof success == 'function'){
    			success();
    		}
    	}
    }
    Then instead of doing this:

    Code:
    <a href="javascript:ajaxpage('HUN/termekek/kehely02.php', 'contentarea');" onClick="Galleria.run('#galleria2');">Vitrum et Anima</a>
    Do:

    Code:
    <a href="HUN/termekek/kehely02.php" onclick="ajaxpage(this.href, 'contentarea', function(){Galleria.run('#galleria2');}); return false;">Vitrum et Anima</a>
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    Last edited by jscheuer1; 06-14-2013 at 06:04 AM. Reason: saw the real problem
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    solyomattila (06-14-2013)

  5. #4
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Oh god, I can't say how happy I am right now. Thank you John, it works perfectly!

Similar Threads

  1. Preload/Refresh Dynamic Ajax Content with database driven content
    By charlieboy in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-03-2012, 04:50 PM
  2. Dynamic Ajax Content & Ajax tabs running slowly on IE
    By Monclee in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-12-2012, 12:32 AM
  3. Dynamic Ajax Content and Ajax Tabs
    By surajitd in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-27-2010, 10:21 AM
  4. Using Content Glider V2.4 Within Ajax Dynamic Content loaded Page
    By creati29 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-25-2010, 04:42 PM
  5. Replies: 0
    Last Post: 12-20-2006, 11:21 AM

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
  •