PDA

View Full Version : Dynamic Ajax Content - loadobjs



robertvanroon
11-03-2011, 09:45 PM
1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.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
11-04-2011, 03:53 AM
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/dynamicindex4/featuredzoomer.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
11-04-2011, 04:13 PM
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
11-05-2011, 12:28 AM
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
11-05-2011, 03:40 AM
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
11-05-2011, 10:52 AM
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 (http://www.imagenursery.com/ajaxcars/)

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

Robert

jscheuer1
11-05-2011, 11:53 AM
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
11-05-2011, 12:32 PM
Hi John :D

(and I thought I had tested that!)

Works! (http://www.imagenursery.com/ajaxcars/)

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
11-10-2011, 10:56 PM
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 :confused:

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 (http://www.imagenursery.com/ajaxcars2/)

Thanks in advance!

Robert

jscheuer1
11-11-2011, 12:38 AM
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.

robertvanroon
11-12-2011, 11:12 AM
Hi John!

Thanks for showing me. OK, I see, this needs a completely different approach.

Learned something again. (and I've noticed that I completely miss an overview on javascript.)

It works now!

I already thought that it isn't the most elegant way to solve this, but it worked on its own. I had made myself the conclusion that it must be possible to use it with Ajax content. (and it is, but not in the way I was trying.)

If you've the time could you show me how you would approach this?

Do you have suggestions for me which tut (maybe on DD?) I can follow or book I can read to get the overview I now clearly miss.

Thanks again for showing me the way!

Robert

jscheuer1
11-12-2011, 04:34 PM
"Most elegant", if I used that term and I might, is after all relative. So I don't claim any of my solutions are that. If I were to start over, I would probably scrap the Dynamic Ajax Content Script and use jQuery. It has routines already in place for much of the code in that script and has more flexibility for handling special cases once the external content is obtained. But taking just the getgreeting function:


function getgreeting(){
var nHours = new Date().getHours();
return nHours >= 21 || nHours < 4? "Goodnight !" :
nHours < 12? "Goodmorning !" :
nHours < 18? "Goodafternoon !" :
"Goodevening !";
}

I changed the times a little (6am seemed to late for the onset of morning for me, as did 0hr seem too late for the onset of night) and put things in a more logical sequence visa vis how the nHours var will increase in a given day. That and thinking logically about what constituted a change in relation to what was already tested, reduced the amount of tests that must be done at each stage. I also switched to the conditional chain notation instead of so many if's.



For learning javascript:

http://www.howtocreate.co.uk/

comes highly recommended by folks I trust, but I haven't looked into it in depth.

And there's always the much maligned, but improved as of a makeover a few years back:

http://www.w3schools.com/js/default.asp

I'm not big on books but:

Object-Oriented JavaScript
by: Stoyan Stefanov
publisher: PACKT

really impressed me. It covers the basics and a whole lot more, so can grow with you.

One of the bast ways to learn is just what you're doing (trying to bend existing code to your purposes) and/or helping others to do so in forums like these. If you don't understand something like a command or procedure that's not defined in a script, often Googling it will provide enough clues. After all javascript is a logical language. After awhile you get so you can trace through a number of scripts and see what they're doing. After more time your ability to do that with a greater diversity of coding styles will increase. By then you will be well on your way to developing your own coding style, which will likely continue to evolve over time.

robertvanroon
11-24-2011, 01:29 PM
Hi John,

Until now I really love jQuery and its possibilities. I will definitely take a closer look at it, when it comes to handling external content.

Thanks for your solution concerning the getGreeting, now that I see it, I think by myself: "Why didn't I come up with this myself in the first place" :D That's learning I think :D

Thanks for the links too! I really like http://www.howtocreate.co.uk/

I've ordered your book suggestion on ebay in the UK, so it takes some time before it arrives over here in the Netherlands. I am really looking forward to reading and studying it.

Thanks for your assistance :D

I will stop by at DD every once and a while, I am going back to work now!

Robert