Dynamic Ajax Content with Galleria

[solyomattila]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.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 (http://solyomattila.extra.hu/tg/index.php?page=termekek). Click the second menu, "Asztali áru", only these submenus work for the purpose of testing.

I welcome any suggestions; thank you in advance.

[molendijk]

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

[jscheuer1]

It looks like you need to remove this 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:


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:


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

Do:


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

[solyomattila]

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