simple loadobjs question

**fisheye** · 10-08-2008, 03:03 PM

I am a low-intermediate scripter, so sorry if this is a simple question.

But I am trying to use the Dynamic Ajax Content script here on this site to load in a page into a div. Works fine, until I try to also load javascript. I want the loaded page to use the spry effects that come with DreamWeaver, but they seem not to work. Here is a simple version of what I am trying to accomplish. 2 pages - page3a loads page3b into a div. Page3b has a spry effect on an image (click it and it fades out). The effect works when I view page3b on its own, but when I open page3a and load page3b into the div, the effect doesn't work. Maybe I made some dumb mistake, like a misplaced comma or something, but I am worried that there is some bigger issue preventing someone from using spry functions within a page loaded into a div.

EDIT: I think I see the problem. The spry effect doesn't just call a function within the js file. It creates a function in the head (MM_effectAppearFade ) which then calls the js file. So I guess I need to load THAT code from an external file or somehow get around the indirect function call. If I was a better scripter, I could probably figure it out quickly, but alas, methinks I need help. Any suggestions on using spry within a loaded page?

EDIT #2: I just copied the MM_effectAppearFade function into the head of Page3a.html and that fixed it! I am so clever! I should probably delete this post now (if I could figure out how), but perhaps it can start an interesting conversation(?)

page3a.html (before I fixed it):

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

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

<style type="text/css">
<!--
#contentFrame {
	position:absolute;
	left:74px;
	top:60px;
	width:438px;
	height:338px;
	z-index:1;
}
->
</style>
</head>

<body>
<a href="javascript:ajaxpage('page3b.html', 'contentFrame'); loadobjs('SpryAssets/SpryEffects.js')">click</a>
<div id="contentFrame"></div>

</body>
</html>

page3b.html:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>
</head>

<body>
<p><img src="images/image.jpg" name="theImage" width="270" height="289" id="theImage" onclick="MM_effectAppearFade(this, 1000, 100, 0, false)" /> </p>
</body>
</html>

Thread: simple loadobjs question

Thread Tools

Search Thread

simple loadobjs question

Bookmarks

Bookmarks

Posting Permissions