running javascript on a page loaded via ajax

[nicmo]

Hello, i am trying to put together a chat that is loaded whenever i click a button.

Basicly you click on a link that gets an external page loaded via ajax and updates a DIV. Normal ajax stuff... my problem is that the chat is also somewhat complex and needs to run some javascript when its loaded.

The page where i load the chat, click "chat". Notice only the non dinamic bit shows.
http://www.bulletdrive.com/chattest.php

The chat, working:
http://www.bulletdrive.com/chat.php

The ajax bit is a script from dynamicdrive:
http://www.dynamicdrive.com/dynamici...lapcontent.htm

Thanks you very much for your help, in advance

[jscheuer1]

It is best to have all of the scripts on the 'top' page.

If you are lucky, and know what needs to be initialized and how to do that, then you can do (from dropdowncontent.js, addition highlighted):

	loadpage:function(page_request, divId){
		if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
			document.getElementById(divId).innerHTML=page_request.responseText
			initialize your scripts against the added content here
		}
	},

An alternative is (still with all scripts on the 'top' page). Rewrite the initialization routines of the scripts that are used by the imported content so that they instead listen for events on the page. If a relevant element is present and receives an appropriate event, the script can react to that instead of having to initialize the content.

[nicmo]

humm thanks

i really wanted to keep everything on the "load if needed" only because the website has load of pageviews and some users dont even care about the chat, loading the JS and css for them seems pointless, this way we would only load the chat for people that actually want to use it.

[nicmo]

oh and i know very little of javascript, both of these scripts have been writen by someone else, if you could give me a better ideia on what to do...

cheers

[jscheuer1]

This sort of thing can be complicated, even for someone like me who is experienced in such matters. Initially you gave no indication of your level of expertise, so I responded optimistically, hoping you only needed a few clues to get at the heart of the matter.

Now, if someone were familiar with the yshout.js script, they may be able to be of more help. If there is a forum for that script, you can try posting there.

The basic problem is that many scripts, yshout.js apparently included, initialize the page content. There is no initialization when content is imported via AJAX, scripts on the imported page are not run.

A cursory inspection of the scripts associated with the working page:

chat.php

makes it look as though you might be able to get away with this (still with all of the scripts placed on the 'top' page, not the imported page*):

loadpage:function(page_request, divId){
		if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
			document.getElementById(divId).innerHTML=page_request.responseText
			setTimeout(function(){new YShout({
	   yPath: 'http://www.bulletdrive.com/yshout/',
	   log: 1
	});}, 100)
		}
	},

But only if you are loading no other content via AJAX other than the chat.php page. If this is not the case, we would need to be able to determine when the chat.php page was being loaded, and only execute the added code at that point.

To test if any of this is even workable. Insert the code as indicated, and try loading the chat.php page. If that much works, we are on to something.

* do not include:

<script type="text/javascript">
	new YShout({
	   yPath: 'http://www.bulletdrive.com/yshout/',
	   log: 1
	});
</script>

anywhere. We are attempting to integrate it into the AJAX call.

[nicmo]

Hehe i understand i should have said i am really bad when it comes to JS.. anyway...

thanks alot jscheuer1 it worked! seems to need a couple css tweaks but should be ok.
http://www.bulletdrive.com/chattest.php

My only problem is that i did not want to load the scripts and css for the chat unless the user actually is going to use them. Can you see any alternatives?

thank you once more

[jscheuer1]

It is possible to append the scripts to the head of the 'top' page just before they're required. However, with yshout.js coming in at 20K and jqery.js at 32K, we would have to poll to make sure they were loaded before we could run the code I suggested that we add in my previous post. Having them on the 'top' page is a form of preloading. What you could do, is that since both of these scripts are probably hosted on reliable servers (I know for a fact that jQuery is), you could link to them there. Then in at least many cases, they would already be cached on the user's end, so adding them to your 'top' page wouldn't make it take any longer to load than not having them there. I see that you also have another script in your jquery.js file. If it is not remote hosted, it would still need to be loaded from your site.

None of this makes much difference for a high speed connection, but when things are slow, it is probably better that the scripts be preloaded (already on the 'top' page) anyway.

The jQuery script library is a powerful one and should allow you to streamline all of your other scripts, so that loading it should be negligible once your other scripts are rewritten to use it.

Oh, and about the style, put it on the 'top' page as well.

Another thing, with jQuery (and other scripts you might be tempted to use packed), even though the file is larger, the min (jsmin) version is faster than the pack version, because though it takes slightly longer to download, it takes much less time for the browser to parse it.

[diltony]

Sorry, i am feeling a bit sleepy so i could not completely read this whole thread, but from i figure, you want to load in javascript externally and initialize and execute them after the page has finished loading, you can use this solution. You can either use JSON if u are familiar with that, or just use the method here http://www.javascriptkit.com/javatut...criptcss.shtml

[jscheuer1]

Sorry, i am feeling a bit sleepy so i could not completely read this whole thread, but from i figure, you want to load in javascript externally and initialize and execute them after the page has finished loading, you can use this solution. You can either use JSON if u are familiar with that, or just use the method here http://www.javascriptkit.com/javatut...criptcss.shtml

This has basically already been covered, and probably isn't applicable here. In the future, please reserve your comments for when you've already actually read the thread. Especially (in this case):

It is possible to append the scripts to the head of the 'top' page just before they're required. However, with yshout.js coming in at 20K and jqery.js at 32K, we would have to poll to make sure they were loaded before we could run the code

[diltony]

i c, was only tryin to help, not tryin to be irresponsible, ok, correction accepted.