Re-Apply Jquery on ajax load of HTML

[dhanykoe]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem: I am trying to incorporate:

1. Ajax loading html content into div container
2. featured slideshow load on ajax

the content of html is load well but the jquery of featured slideshow doesn't work. You can see here :

working featured slideshow (http://liveaboards-indonesia.com/test/tour.html)
Not working featured slideshow load by ajax (http://liveaboards-indonesia.com/test/index.html)

as you can see in working featured slideshow, when you are mouseover the fragment is working, but when load by ajax the script doesn't work

here is the ajax script i used

<a href="#" onmouseover="javascript:ajaxpage('ajaxfiles/hotel.html', 'rightcolumn'); loadobjs('css/style.css', 'css/slide.css', 'js/jquery1.3.2-min.js', 'js/jquery-ui1.5.3-min.js', 'js/featured.js')">See Hotel</a>

and this jquery script for featured slideshow (featured.js)

$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs({event:"mouseover"}).tabs("rotate", 29000, true);
});


Big Thanks in advance

[dhanykoe]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem: hi all, please help me. when i load my page by dynamic ajax content, the content is load well,css is also working. but the problem is my java script is not working. i have a test link here:


load without script ajax (http://liveaboards-indonesia.com/test/tour.html)
load by ajax (http://liveaboards-indonesia.com/test/index.html)

any thoughts why the JS is not working?

i really need this dynamic ajax content to load it..many thanks for your help.
dhanykoe

[jscheuer1]

AJAX doesn't automatically import javascript in the same way as loading the page into its own window or an iframe will. Usually there are workarounds though.

I don't really get what your script is doing. Looks like some kind of a menu. Generally those sorts of scripts initialize onload of the DOM (document.ready in jQuery) or onload of the page. There are no load events when importing via AJAX. There is an onreadystatechange event and it's used to determine when the requested content is available. When it is, it's injected into the page. Right after that is often the opportunity to initialize that content to a script or scripts. But there are also other strategies. Chief among those is instead of initializing any content, have the script it listen for events. If these events occur on content that fits certain criteria, it can react in the manner it previously would have had it initialized that content.

Both of these methods involve having your other script(s) and style(s) already on the 'top' page.

The document ready code in this case appears to be in featured.js and is the only thing in that script:


$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs({event:"mouseover"}).tabs("rotate", 29000, true);
});

Which appears to use the jQuery UI tabs method to make some kind of rotating nav setup. Here's what I would suggest. Get rid of the highlighted:


<div id="leftcolumn">
<a href="#" onmouseover="javascript:ajaxpage('ajaxfiles/tour.html', 'rightcolumn'); loadobjs('css/style.css', 'css/slide.css', 'js/jquery1.3.2-min.js', 'js/jquery-ui1.5.3-min.js', 'js/featured.js')">See Hotel</a>

Put those styles and scripts (except for 'js/featured.js) on the 'top' page. Then in ajaxload.js around line #34:


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
}

Make that like so:


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;
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs({event:"mouseover"}).tabs("rotate", 29000, true);
}
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

[dhanykoe]

Dear Jhon

Thanks a lot for your help on explanation above, really helpful and now the JS is working.