Dynamic Ajax Content - loadobjs

[robertvanroon]

1) Script Title: Dynamic Ajax Content

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

3) Describe problem:

Hi!

I am new to dynamic drive en fairly new to javascript. I would really appreciate your help on the following.

I have just used the example from the Dynamic Ajax Content tutorial and added my own .htm file which is called externalmagic.htm

I want to use magiczoom.css and magiczoom.js in externalmagic.htm

I've learned from the tutorial, that I should load them separately using loadobjs

This is what I use to try load externalmagic.htm including "magiczoom.css" and "magiczoom.js" :

[CODE]<div style="margin-top: 2em">Load CSS & JS files</div>
<a href="javascript:ajaxpage('ajaxfiles/externalmagic.htm', 'rightcolumn');loadobjs('ajaxfiles/magiczoom.css', 'ajaxfiles/magiczoom.js');">Load "magiczoom.css" and "magiczoom.js"</a>
</div>[ICODE]

The html loads fine, but magiczoom isn't working. For sure I miss something, but I don't have a clue where to look for it.

Thanks in advance!

Kind Regards,

Robert

[jscheuer1]

That's not how loadobjs works. It's really rather useless. You could get the same result simply by putting the scripts and styles in the head of the 'top' page.

The problem is that magiczoom.js executes when the page's code is first parsed by the browser (domload, or domready, whatever you want to call it, like onload - just a little faster). But since you're using AJAX to import the content, it arrives after that. It's too late.

With a script where the code can be clearly read you can usually just put the initialization for the script (usually just a few lines or less for a typical script) in the loadpage function of Ajax Content (additions red and green):

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
//code for initialization goes here
}
}

Sometimes a test or two should be performed to make sure it's OK to run the init at that point, and/or something might need to be done to remove a previously initialized instance, or to skip portions of the initialization if they've already been performed and need not/should not be duplicated.

But since Magic Zoom is commercial and its code is obfuscated, I'm not sure what initialization code and tests to put there or what you can do to find out other than contact Magic Zoom support.

There is a similar Dynamic Drive Script:

http://www.dynamicdrive.com/dynamici...uredzoomer.htm

It would be easier to get it to work with AJAX because its code is written out more or less plainly. But it's not rated for mobile devices like Magic Zoom is. How important is that to you? Mobile devices have their own innate ways of intuitively zooming in on images. Perhaps they could simply be served the images.

[robertvanroon]

John,

Thanks for your reply! I am at work now and will take a closer look at your solution when I am at home.

I've taken a quick peek at the Dynamic Drive Zoom Script. It really looks good!

One thing I miss is Innerzoom, is it possible to implement it by changing the coordinates where the magnify window should appear?

Really great that you gave me such an extensive answer!

(the mobile functions are not that important at this moment, your suggestion of plain images is a good solution.)

Robert

[magictoolbox]

To use Magic Zoom, you should call MagicZoom.refresh() once your Ajax request has completed and the HTML content has changed. That code will start the Magic Zoom initialization.

Explanation and examples here:

http://www.magictoolbox.com/magiczoom/integration/#api

Inner zoom is activated like so:

<a href="big.jpg" class="MagicZoom" rel="zoom-position: inner"><img src="small.jpg"/></a>

[jscheuer1]

Cool. If that will initialize imported content, then using the Dynamic Ajax Content script we could simply forget about loadobjs. Put the tags for magiczoom.css and magiczoom.js on the 'top' page, and in the loadpage function of Ajax Content (additions highlighted):

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
//code for initialization goes here:
MagicZoom.refresh();
}
}

We might want or need to do a MagicZoom.stop() first:

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
//code for initialization goes here:
MagicZoom.stop();
MagicZoom.refresh();
}
}

[robertvanroon]

Hi John and Igor (I think),

I've tried your suggestions, but it doesn't seem to work until now.

If you want to take a look at what I' ve at this moment over here

Thanks for your help so far and great that Magictoolbox has joined!

Robert

[jscheuer1]

Did you try it without MagicZoom.stop();? Because that's throwing an error. Testing in IE and Opera seems to indicate that getting rid of that will fix it. But if doing it without MagicZoom.stop(); isn't working try:

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
//code for initialization goes here:
setTimeout(function(){MagicZoom.refresh();}, 1000);
}
}

If that works, try gradually reducing the 1000 by half. You may even be able to use 0 there. Even a 0 timeout can give enough of a delay in certain situations.

But I think just getting rid of MagicZoom.stop(): will fix it.

[robertvanroon]

Hi John

(and I thought I had tested that!)

Works!

Great!

You are right setTimeout(function(){MagicZoom.refresh();}, 1000); wasn't necessary.

Removal of MagicZoom.stop(); did it!

Thanks very much for learning me how this works! Still learning every day!

Robert

[robertvanroon]

Hi John and everyone who's reading this on DD,

I really understand what the essence is, why javascripts don't run without extra effort when using Ajax content. (because they are executed on loading)

I've been practicing a bit, but with not too much result

I've made myself a very simple javascript, that just says the right thing according to the time of the day.

I cannot get it right, done everything I've learned so far.

Could you take a look and help me understand things better?

Take a look over here

Thanks in advance!

Robert

[jscheuer1]

Although it works when used without AJAX and while the page is loading, that's not very good javascript. That's almost a separate issue, except that it impacts your question to a degree.

I used this ajaxfiles/hHello.js file (not how I would write it, just made serviceable for these purposes):

function getgreeting(){
	var dDay = new Date()
	var nHours = dDay.getHours()
	if ((nHours <12 ) && (nHours >=6)){
	var hHello = ("Goodmorning !") }
	if ((nHours >=12) && (nHours <18)) {
	var hHello = ("Goodafternoon !") }
	if ((nHours >=18) && (nHours <24)) {
	var hHello = ("Goodevening !") }
	if ((nHours >=0) && (nHours <6)){
	var hHello = ("Goodnight !") }
	return hHello;
}

and this and only this in my ajaxfiles/hello.htm page (which is how external pages should look, no extraneous tags other than a single containing div):

<div>
<div id="externalhello">Hello I say: </div>
</div>

On the top page I put this (addition highlighted):

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Rotating Includes Script</title>
<script type="text/javascript" src="ajaxfiles/hHello.js"></script>
<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  . . .

And my link on that page is:

<a href="javascript:ajaxpage('ajaxfiles/hello.htm', 'rightcolumn');">Hello</a>

Finally, in my loadpage function:

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
if(document.getElementById('externalhello'))
{
	document.getElementById('externalhello').firstChild.nodeValue += getgreeting();
}
}
}

By no means ideal, but certainly workable and illustrates in a basic sort of way the sort of thing that's generally done in such situations.