Problems getting loadobjs to work properly when implementing Dynamic Ajax Content

1) Script Title: Dynamic Ajax Content

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

3) Describe problem: I am trying to implement the 'Dynamic Ajax Content' into my site. The content I am loading in contains a jquery image slider which I cannot get to function correctly once loaded in. I included the relevant .js and .css files using the loadobjs but only the .css file seems to work. My script is below.

Main Html
<ul class="print">
<li> <a href="javascript:ajaxpage('content1.html', 'content'); loadobjs('css/slider_web.css', 'Scripts/jquery-1.3.2.min.js', 'Scripts/jquery.flow.1.2.js', 'Scripts/slider_web.js')">Mandy Long</a></li>
<li><a href="javascript:ajaxpage('content2.html', 'content');loadobjs('css/slider_web.css', 'Scripts/jquery-1.3.2.min.js', 'Scripts/jquery.flow.1.2.js', 'Scripts/slider_web.js')">Sultan Meat Products</a></li>
<li><a href="javascript:ajaxpage('content3.html', 'content'); loadobjs('css/slider_web.css', 'Scripts/jquery-1.3.2.min.js', 'Scripts/jquery.flow.1.2.js', 'Scripts/slider_web.js')">Bunnies Day Nursery</a></li>
</ul>



Dynamic content HTML
<h1 class="print">WEB</h1>
<div class="jflow-content-slider">
<div id="slides">
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img src="images/bunnies1.jpg" alt="Bunnies Day Nursery" />
</div>

<div class="clear"></div>
</div>
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img src="Images/mandylong1.jpg" alt="Mandy Long website" />
</div>

</div>

</div>

<div id="myController">
<span class="jFlowControl no-margin-right"></span>
<span class="jFlowControl"></span>
<span class="jFlowPrev"><</span>
<span class="jFlowNext">></span>
</div>
<div class="clear"></div>
</div>

<p id="desc">Visit: <a href="http://www.bunniesdaynursery.co.uk">www.bunniesdaynursery.co.uk</a></p>


I am pretty new to all this so I may not have explained myself very well.

Ah this isn't an issue with the script, but rather, just a pesky limitation of Ajax. Pages fetched via Ajax should they contain JavaScripts within it in many cases won't run correctly when brought over this way. Ajax basically copies the contents of the external file similar to copying plain text and just dumps it onto the main page. Browsers don't know to interpret scripts or even CSS (in IE) within that copied content.

Ah ok, is there a way around this then or should I look to an alternative method of loading in my content?

The reason why this doesn't work is that your ajax-script uses innerHTML, see the line having document.getElementById(containerid).innerHTML=page_request.responseText.
Use document.write instead, as explained here.
===
Arie Molendijk.

Thanks for your reply, I think what your saying is exactly what I want. However, I am pretty new to the world of ajax and Javascript and am a little unsure exactly what I need to change.

This is the js in my header of my main file
var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
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)
}
page_request.open('GET', url, true)
page_request.send(null)
}

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

</script>

What do I need to change?

Before answering: I hope I am not impolitely interrupting a discussion between DDADMIN and yourself.

Having said this: I need a link to the relevant pages of your site.
===
Arie.

No not at all, wherever i can get the help I need. Dont suppose it matters who it comes from.

My site is not live yet. I could upload it? or, is there no way i can simply post the code that I am having problems with and you can advise me what to change?

this is the js at the top of my main html file

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
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)
}
page_request.open('GET', url, true)
page_request.send(null)
}

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

</script>

and this is the HTML in which i am trying to load the content

HTML Code:

---

<div id="leftcolumn">
<a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');">Porsche Page</a>
<a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn'); loadobjs('ajaxfiles/style2.css', 'ajaxfiles/slider.js', 'ajaxfiles/jquery-1.3.2.min.js', 'ajaxfiles/jquery.flow.1.2.js')">test</a>
<a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');">Aston Martin Page</a>

</div>

---

it is the second page titled 'test' that i am having problems with, when i load that page, i want to also load a css file and 3 .js files. Only the css seems to be working. The 'external2.htm' file contains an image slider (which is what the .js files are being used for).

Hope I have explained myself clearly (although i doubt it).

The following should work:

Code:

---

<head>

<script type="text/javascript">
function HttpRequest(url){
var pageRequest = false //variable to hold ajax object
/*@cc_on
@if (@_jscript_version >= 5)
try {
pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try {
pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e2){
pageRequest = false
}
}
@end

@*/ if (!pageRequest && typeof XMLHttpRequest != 'undefined')
pageRequest = new XMLHttpRequest()

if (pageRequest){ //if pageRequest is not false
pageRequest.open('GET', url, false) //get page synchronously
pageRequest.send(null)

document.write(pageRequest.responseText)

}
}

function display(which,width,height)
{
document.getElementById(which).style.visibility='visible';
document.getElementById(which).style.marginTop='15px';
document.getElementById(which).style.padding='5px';
document.getElementById(which).style.width=width;
document.getElementById(which).style.height=height;
}

function erase(tag,className) {
var els = document.getElementsByTagName(tag)
        for (i=0;i<els.length; i++) {
                if (els.item(i).className == className){
                els.item(i).style.visibility="hidden";
                }
      }
      }
</script>

</head>

<body>

<button style="cursor: pointer" onclick="erase('div','inserted')">HIDE</button><br>
<a href="javascript:void(0)" onclick="erase('div','inserted');display('rightcolumn1','540px','585px');">Porsche</a> <br>
<a href="javascript:void(0)" onclick="erase('div','inserted');display('rightcolumn2','540px','545px');">Ferrari</a><br>
<a href="javascript:void(0)" onclick="erase('div','inserted');display('rightcolumn3','540px','450px');">Aston</a>

<div id="rightcolumn1" class="inserted" style="visibility:hidden; position:absolute; height:0px; top:20px; left:30%; border: 1px solid black"><script type="text/javascript">HttpRequest("ajaxfiles/external.htm") </script></div>
 
<div id="rightcolumn2" class="inserted" style="visibility:hidden; position:absolute; height:0px; top:20px; left:30%; border: 1px solid black"><script type="text/javascript">HttpRequest("ajaxfiles/external2.htm") </script></div>
 
<div id="rightcolumn3" class="inserted" style="visibility:hidden; position:absolute; height:0px; top:20px; left:30%; border: 1px solid black"><script type="text/javascript">HttpRequest("ajaxfiles/external3.htm") </script></div>

</body>

---

You don't need the loadobjs function if you do it like this. All the external css and js will function properly. Experiment with it.
===
Arie.

Thankyou again for your reply. I have tried to play around with the script that you suggested but to no avail. I have uploaded the page I am experiencing problems with. The URL is http://www.mef-design.com/site/web.html.

As you can see, the initial images load (which is just contained within the main content div). There is an image slider with forward/ backwards buttons which move the images along and this all works fine in this instance. However, if you click one of the links to the right e.g. "Sultan Meat Products", it loads in content from an external html file to replace the existing image slider and which I want it to work in exactly the same way. The content loads in fine and the css seems to be applied to the new content. However, all the images appear below each other instead of in the image slider format. I assume that the Javascript files are simply not being re-loaded.

Hope this makes my problem a little clearer.

Feel free to dig out any of the code.

Your help is much appreciated.

Ajax seems to have problems indeed with your external files.
I would suggest to put the following script (replacing Ajax) in the head of the main page:

Code:

---

<script type="text/javascript">
function hide_external(which) {
var els = document.getElementsByTagName('div');
for (i=0;i<els.length; i++) {
if (els.item(i).className == which){els.item(i).style.display = 'none';}
}
}

function import_external(destination_in_mainpage,imported_url,css_of_imported)
{
hide_external('inserted');
document.getElementById(destination_in_mainpage).style.display='block';
if(/*@cc_on!@*/false)
{iframe_or_object='<iframe src="' + imported_url + '", style="'+ css_of_imported +'" frameborder="0"><\/iframe>'}
else
{iframe_or_object='<object type="text/html" data="' + imported_url + '", style="'+ css_of_imported +';background:white"><\/object>'}

document.getElementById(destination_in_mainpage).innerHTML=iframe_or_object
}
</script>

---

Then in the div having class="home_test"

Code:

---

<p>
<a href="#" onclick="import_external('content','mandy_long.html', 'position:absolute; width:600px; height:450px;'); return false; ">mandy</a>
</p><p>&nbsp;</p>

<p>
<a href="#" onclick="import_external('content','sultan.html', 'position:absolute; width:600px; height:450px; '); return false; ">sultan</a>
</p><p>&nbsp;</p>

<p>
<a href="#" onclick="import_external('content','bunnies.html', 'position:relative; width:600px; height:450px; '); return false; ">bunnies</a>
</p><p>&nbsp;</p>

---

and in the body tag: onload="import_external('content','mandy_long.html', 'position:relative; width:600px; height:450px;'); return false; "

Also give class="inserted" to the div having id="content".

===
Arie.

Hi, i have tried using the script you suggested but I am still unsure as to when I call the css and js files. I have re-uploaded what i did to the same link. As you can see, there is no css or .js being applied to the content loaded in.
Sorry again if I am being a bit dunse.

I applied another method that seems to work.
Demo HERE.
There'a a download possibility. Examine the sources of the files.
Once you've downloaded it, I'll remove it.
===
Arie.

thats great, thankyou so much. One issue I have is that when you switch content, the div seems to flash white. Is there anyway to get rid of this?

In web.html, you have the following function:

Code:

---

function include(url) {     
window.frames.dataFrame.window.location.replace(url);
}

---

Replace it with:

Code:

---

function include(url) {
document.getElementById('content').style.visibility='hidden';     
window.frames.dataFrame.window.location.replace(url);
setTimeout('document.getElementById("content").style.visibility="visible"',250)
}

---

That will take away the flash. (You may have to increase the value for the timeout).
===
Arie.

Works a treat, thanks so much for your help.