PDA

View Full Version : Dynamic Ajax Content with Javascript



lena
04-21-2006, 07:43 PM
Script: Dynamic Ajax Content
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Hi,

I'm trying to add a javascript (slideshow) into an external pages
to see the slide show code http://www.dhteumeuleu.com/runscript.php?scr=diapo-S.html
click on Voir la source.


I have made 1 css and 1 js file.

I used this code:

<a href="javascript:ajaxpage('files/test.htm', 'rightcolumn'); loadobjs('gallery.css', 'gallery.js')"> test</a>

into my test.htm I put the code of the slideshow without the javascript
and I put this code into the head section

<link rel="stylesheet" href="gallery.css" type="text/css">
<link rel="text/javascript" href="gallery.js" type="text/js">

I not sure for the second line... and it's not working...

thanks for your help

jscheuer1
04-21-2006, 10:12 PM
This:


<link rel="text/javascript" href="gallery.js" type="text/js">

should be:


<script type="text/javascript" src="gallery.js"></script>

There could be other problems.

Twey
04-21-2006, 10:20 PM
You also need to execute script elements in the external page:
<script type="text/javascript">
function runScripts(id) {
var e = document.getElementById(id).getElementsByTagName("script");
for(var i=0;i<e.length;i++) eval(e[i].innerHTML);
}
</script>
<a href="javascript:ajaxpage('files/test.htm', 'rightcolumn'); loadobjs('gallery.css', 'gallery.js'); runScripts('rightcolumn');"> test</a>However, you may still have problems if part of a script needs to be in the head.

lena
04-22-2006, 06:22 PM
Hi,
thanks for your help..

where into the external page do I need to put this code:


<script type="text/javascript">
function runScripts(id) {
var e = document.getElementById(id).getElementsByTagName("script");
for(var i=0;i<e.length;i++) eval(e[i].innerHTML);
}
</script>


cause this not working
I think maybe there is also a problem with the css..

Do you have a suggestion for a gallery with no db that will work into
Dynamic Ajax Content.

Thanks

jackyyll
04-23-2006, 05:28 PM
You dont put that in the external page, you put it on the main one and in the links you make it run the function.

And thanks twey.. Just what I came here to post for :p

But it doesn't seem to work :( Any ideas why?

The link looks like this:

<a onclick="callpage('pages/ch.php', 'content'); runScripts('content');">Something</a>

and the ch.php looks like this

<head>
<script src="../scripts/ajax.js" type="text/javascript"></script>
</head>
<body onload="gethits('name','');setupimg('up1');">
<table id="table" cellspacing="0" cellpadding="0" style="width:510px" border="1">
</body>

Any ideas? :/

Twey
04-23-2006, 06:00 PM
An external Javascript, now, could be more difficult. I'll have a crack at it.

jackyyll
04-23-2006, 06:29 PM
It doesnt work when the javascript is inside the same file either :x

Twey
04-23-2006, 06:53 PM
In that case, I ought to have a look at your page. Can you post a URI?

jackyyll
04-23-2006, 09:42 PM
Okay, heres the URL: http://www.monsterwiki.com/jackyyll/index.php

You have to register to get in but it's real quick. And it's the tab called 'something' that i'm having the problems with.

Twey
04-24-2006, 05:33 AM
Nice site, but after I register, it gives me "Username not found" when I try to log in.

jackyyll
04-24-2006, 01:46 PM
Hmm .. Odd.. I just registered a new account and it worked fine.. :o

jackyyll
04-25-2006, 06:33 PM
Twey, any luck? :x

Twey
04-25-2006, 06:54 PM
Still can't log in. "Username not found."

jackyyll
04-27-2006, 12:35 AM
Here use this to login:

Username: TweyTest
Password: Tweydhtml
(not sure if it's case sensetive for the password.. dont remember lol

lena
04-27-2006, 09:03 PM
Hi Twey,

I'm still trying to make it work.

So you said that this part of the code should be in the external page?
Do you mean in the body?



You also need to execute script elements in the external page:
Code:
<script type="text/javascript">
function runScripts(id) {
var e = document.getElementById(id).getElementsByTagName("script");
for(var i=0;i<e.length;i++) eval(e[i].innerHTML);
}


But I think the problem is in the css, is it possible?

oliveirard
05-24-2006, 08:59 PM
Hello everybody!

This Dynamic Ajax Content script is really great!! I lost some time working/looking for it. But, although it reads external css and js files succesfully, I have the problem of interpreting the page's inside javascript content. And... hello Twey! Your suggestion was great! However, it worked for me only when not using document.write. For example, when I try to load this following page, it doesn't write "1 2 3", but "1 3" and, after processing the script, erases everything writing only "2":


<html>
<body>
1
<script>document.write("2 ");</script>
3
</body>
</html>

Just to mention, I'm using Twey's runScripts() function to load the page using the loadpage function as follows:


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;
loadobjs('styles.css', 'functions.js'); // suppose they exist and are used by the page requested
runScripts('targetDiv');
}
}


I would really appreciate if you pros could help me on this! Thanks in advance and best wishes!

Twey
05-24-2006, 09:03 PM
That will happen and, unfortunately, is unavoidable. Any document.write() calls after the page is loaded will call document.open(), thus clearing the page.

oliveirard
05-24-2006, 09:12 PM
Hi Tweak! Thanks for your extremely fast answer!! :)

Well, is it really unavoidable? Couldn't we process the "document.write"s, storing the results on different variables, and including them on their respective places on the page_request.responseText?

Twey
05-24-2006, 09:18 PM
"Tweak"? :)
Unfortunately, no. About the best you can do is overwrite document.write so that it puts the text into a designated element. Then you can try to put it where it ought to be with ECMAScript, I guess.
document.oldwrite = document.write;
document.write = function(s) {
document.getElementById("element").innerHTML += s;
}

Rory
05-25-2006, 07:31 AM
Hey folks,

Searching the forum for a solution I came accross this post...Looks like I'm having a similar issue.

I can load simple pages without a problem. Currently I am attempting to load a page that has multiple (external) .js and .php files...In order for the page to load properly I need them all to load in a specific sequence when the (ajax) page is loaded.

so I guess my question is:

Is it possible to load an .html page that containes multiple external .js and .php files in a <div>, and have it maintain the same functionality as it would if it were loaded in a new window?

when I look at the responseText the entire page seems to be returned properly, I need to figure out how to have the external scripts execute on the page load...
(most of the script are located in the <head>)
Any suggestions?

Thanks

Rory

Twey
05-25-2006, 08:11 AM
If you have PHP support, there's really no need for this script...

Rory
05-25-2006, 08:45 AM
not sure how else I would do it...

Basically, I have a webpage that is a simple login screen...using AJAX it attempts to match the USER/PASSWORD combination to those contained in a DB...If a match is found I need to send a request to the server and load the correct page based on the USER (Users will only have access to specific pages).
So far this works great when accessing basic HTML...I was hoping to do the same with more complex (dynamic) pages that are more .js and .php intensive.

is there a better way to go about this?

Thanks

Rory

medianten
06-07-2006, 02:45 PM
It seems there are others than me who are struggling with the issue of making javascript execute in a page loaded by "Dynamic Ajax Content".

I posted this earlier

http://www.dynamicdrive.com/forums/showthread.php?t=10174

and was hoping that I had just missed something really simple but it seems to be a tough case to crack. I've tried the suggestions in this thread without result (and I also experienced the document.write-thing you, Rory, wrote about, when I inserted a small verifying code to the script...

I'll keep trying to beat this thing but my hopes are low as I feel really kind of plain stupid right now... :confused: :)

/Johan

oliveirard
06-07-2006, 04:37 PM
Hi guys! As I said before, I'm also working on this problem. Twey (not "Tweak" :) ) gave me the first hint among others from other forums. Well.. all I can say is that I may sooner provide one approach to solve this. I won't put it right now as I'm still fixing some bugs. And any other suggestions to overcome this are always welcome!

Twey
06-07-2006, 05:15 PM
Tweak indeed... (grumbles)

lena
06-19-2006, 07:57 PM
Hi,

I still need to add my javascript in the Dynamic Ajax Content.

See the first message of this thread.

I'm trying to add a javascript (slideshow) into an Dynamic Ajax Content
to see the slide show code http://www.dhteumeuleu.com/runscript...r=diapo-S.html
click on Voir la source.


I have made 1 css and 1 js file.

I used this code:

<a href="javascript:ajaxpage('files/test.htm', 'rightcolumn'); loadobjs('gallery.css', 'gallery.js')"> test</a>

into my test.htm I put the code of the slideshow without the javascript
and I put this code into the head section

<link rel="stylesheet" href="gallery.css" type="text/css">
<script type="text/javascript" src="gallery.js"></script>
A lot of post not really related was posted in this thread ..but I'm still not able to implement the javascript

if someone can help me to make it work ?

Thanks

jscheuer1
06-19-2006, 08:59 PM
Hi,

I still need to add my javascript in the Dynamic Ajax Content.

See the first message of this thread.

I'm trying to add a javascript (slideshow) into an Dynamic Ajax Content
to see the slide show code http://www.dhteumeuleu.com/runscript...r=diapo-S.html
click on Voir la source.


I have made 1 css and 1 js file.

I used this code:

<a href="javascript:ajaxpage('files/test.htm', 'rightcolumn'); loadobjs('gallery.css', 'gallery.js')"> test</a>

into my test.htm I put the code of the slideshow without the javascript
and I put this code into the head section

<link rel="stylesheet" href="gallery.css" type="text/css">
<script type="text/javascript" src="gallery.js"></script>
A lot of post not really related was posted in this thread ..but I'm still not able to implement the javascript

if someone can help me to make it work ?

Thanks

Content loaded via ajaxpage is stripped of its head, so putting stuff in the head of the external page is useless at best, it could perhaps cause problems.

It would be helpful, if you don't already know, to understand that ajaxpage is just a fancy way of writing HTML code to an element (usually a div element) on the page after it has loaded. Once that HTML code is added to the page, until the page is reloaded or the added content is removed or replaced, it acts just the same as if it had been hard coded into the page.

The loadobjs function adds css and javascripts, in the same general way. They then become a part of the page, until the page is reloaded.

The key concept is that, once these functions run, you are still dealing with just one page, just one that has been changed since it was loaded.

You could just add those items to the head of the top page, as long as the script has nothing that runs onload. Then you wouldn't need:


loadobjs('gallery.css', 'gallery.js')

However, most likely, there is something that runs onload in the script. In which case, you would need to devise a way to have it run onload of the external content instead.

It makes little difference how the css or script get associated with the page, as long as they are there before needed, the only real considerations are that it is best to associate each one only one time, and devising a method to run the script's initializing function(s), if any, at the appropriate time.

Looking at your script, I'd say this looks like what needs to be run after the content has been loaded:


function dom_onload() {
if(id("slider")) {
diapo.init();
onresize = diapo.resize;
}
else setTimeout("dom_onload();", 128);
}

So you could add that to the main script at the bottom and get rid of this:


<script type="text/javascript">
// ===== start script while loading images =====
function dom_onload() {
if(id("slider")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
// ===== window resize event =====
onresize = diapo.resize;
// ================================================
</script>

Link (via an external script tag), or hard code the main script to the head of the top page and run dom_onload when you load the external content:


<a href="javascript:ajaxpage('files/test.htm', 'rightcolumn'); loadobjs('gallery.css');dom_onload();"> test</a>

If you link or hard code the css to the top page, you can skip:


loadobjs('gallery.css');