Making scripts run inside a div with content retrieved using ajax

**timo** · 08-21-2009, 10:45 AM

Hey there, I have for many days now tried to solve a problem of mine.
I apologize in advance for the long post

I needed to find some code that could load a html page into a div.
I found it on this page http://www.dynamicdrive.com/dynamici...jaxcontent.htm
and my hopes went up, everything worked like a charm until I tried to load
a html page containing a script.

Since I am using a plugin from jquery, I need 4 links to be loaded for the
script to work. 3 script sources from jquery libraries, and 1 from my own
folders. My html page runs these 4 scripts like a charm if I open the page
in a browser window with all the scripts between the <head> tags, but the
second it loads into the correct div, it stops running.

The script on my html page looks like this:

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<script src="style/jquery.codabubble.js"></script>

<script language="javascript">
$(function(){
   opts = {
      distances : [20,10,10,20,10,20,10,10,10,10],
      leftShifts : [-35,-30,-70,-45,-55,-52,-67,-30,-45,-45],
      bubbleTimes : [500,500,500,500,500,500,500,500,500,500],
      hideDelays : [0,0,0,0,0,0,0,0,0,0],
      bubbleWidths : [200,200,250,250,250,250,250,250,250,250],
      bubbleImagesPath : "images",
      msieFix : true
   };
   $('.coda_bubble').codaBubble(opts);
});
</script>

And according to the above linked page I should be able to load both the
page and the scripts using this in the link:

Code:

<a href="javascript:ajaxpage('mypage.html', 'targetdiv'); loadobjs('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js', 'style/jquery.codabubble.js', 'myscript.js')">LINK</a>

Only thing I am missing really is the last piece of script that isn't an external file,
can anyone help me make the script to a .js file and make it contain code that targets
specifically the HTML inside "mypage.html" like the tutorial on the above linked page says?

**molendijk** · 08-21-2009, 11:37 AM

I wrote something about that problem here.
Arie Molendijk.

**timo** · 08-21-2009, 12:08 PM

Thanks, I'll look into it

In the meantime, this is the script I use on my index page:

Code:

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

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

If someone see a quick and immediate solution, feel free to answer.
I have struggled with this all week, because my boss really really really want's that function on our page

Thread: Making scripts run inside a div with content retrieved using ajax

Thread Tools

Search Thread

Making scripts run inside a div with content retrieved using ajax

Bookmarks

Bookmarks

Posting Permissions