Including javascript in ajaxpage loaded dynamically

**legend.raju** · 12-29-2009, 09:44 AM

If i include a javascript in the page that dynamically loads .. it doesnt work .....

In this case

Code:

Main Page
{
something.js containing someFun()
Content div displaying ajax page loads dynamically
}
Ajax page
{
calls someFun()
}

it works like this ...

BUT

Code:

Main Page
{
Content div displaying ajax page.. loads dynamically
}
Ajax Page
{
contains definition for someFun()
calling someFun()
}

doesnt work in this case....

**molendijk** · 12-29-2009, 11:34 AM

This works (using document.write)

Code:

<head>


<script type="text/javascript">
document.includeWrite = function (url) {
if ('undefined' == typeof(url)) return false;
if (window.XMLHttpRequest)reqWrite = new XMLHttpRequest()
else if (window.ActiveXObject){
try {
reqWrite = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
reqWrite = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
reqWrite.open("GET",url,false);
reqWrite.send(null);
document.write(reqWrite.responseText);
}
</script>

</head>

<body>

<script type="text/javascript">
document.includeWrite("something.html")
</script>

</body>

where something.html is supposed to contain something.js.
===
Arie Molendijk.

**legend.raju** · 12-29-2009, 07:24 PM

what you have done above is as i said in the first case
....

where the fun definition and fun call are in the "index page"

i have a prob in

when i have a new page loaded dynamically inside "index page" , which has a fun definition say someFun() and the call is also in new page ..... it doesnt work for me ... !

ok here is my site
prodigy.zxq.net

in the events page

Code:

http://prodigy.zxq.net/#Events

i have put up a small alert button ...... it doesnt work ..

BUT it works in the actual page i.e being called the the index page ... !

Code:

http://prodigy.zxq.net/events.php

**molendijk** · 12-29-2009, 07:56 PM

In the code I gave you, the fun definition (something.js) is not in the main page, but in something.html. When I dynamically load something.html in the main page (which does not contain the fun definition), everything works fine. Everything should be OK also when I put something.js in the main page, not in something.html.
===
Arie.

**legend.raju** · 12-29-2009, 08:11 PM

hmmm...
check out the link i've provided .. !
it doesnt work there .. !

i dont know why .. !

**molendijk** · 12-29-2009, 09:37 PM

The reason is that you're using an Ajax-include loading content via innerHTML. But as I said above, you should use document.write if you want to fetch external scripts (see the part in red of my code above).
I've explained this matter in more details here.
===
Arie.

**legend.raju** · 12-29-2009, 09:45 PM

so i used this to change content dynamically

Code:

document.getElementById(containerid).innerHTML=page_request.responseText

so how do i use document.write to load into that containerid div .. ..!

**molendijk** · 12-29-2009, 10:12 PM

The first line of your Ajax-function should go like:
document.includeWrite = function (url) etc.
(see link to my tutorial above).
The last line of your Ajax-script should then have this:
document.write(page_request.responseText);

Then somewhere in the body:
<script type="text/javascript">document.includeWrite('whatever.html')</script> .

Be sure to understand first what's in the tutorial.
----

Note that you can also leave things as they are, in which case you must however carefully read what DD says about fetching external js when using their Ajax-script
===
Arie.

**legend.raju** · 12-30-2009, 05:42 PM

document.includeWrite() once executed will remain unchanged
how do i dynamically change it .. !

example :

Code:

document.includeWrite() = { .... }

function nav(pageid)
{
 pageid += ".php";
}// This doesnt replace the content when pageid is changed 

function nav1()
{
 document.includeWrite(pageid + ".php");
}//This removes whole page content and the new content is displayed .

function nav2()
{
 pageid="something.php"
}// The same as first case

</script>

<div><script ... >document.includeWrite(pageid)</script>

So how do i then change it dynamically...
im able to include the page dynamically only once
i need to alter the content ....

is there any other way ... What i have is

Code:

function navigationTo(ref)
{
 finds ref.php and sets the newPage var
 calls the ajaxpage(url,targetDiv) function .. which directs it to target div
}

Is there any other function that can direct the page to a div ......
document.write isnt actually working for me ..

**molendijk** · 12-30-2009, 07:14 PM

Either you use this DD Ajax-script, which uses innerHTML (no document.write) and apply what it says about fetching external js, or you do as explained in the tutorial, where it says: 'If we do not want the menu to appear right away but, say, on click, then we must ...'.

To test the latter possibility:
main.html

Code:

<head>

<style type="text/css">
.inserted{display:none}
</style>

<script type="text/javascript">
document.includeWrite = function (url) {
if ('undefined' == typeof(url)) return false;
if (window.XMLHttpRequest)reqWrite = new XMLHttpRequest()
else if (window.ActiveXObject){
try {
reqWrite = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
reqWrite = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
reqWrite.open("GET",url,false);reqWrite.send(null);
document.write(reqWrite.responseText);
}
</script>

<script type="text/javascript">
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = 'inline';
}
}
function hideAll(tag,SomeClass) {
var els = document.getElementsByTagName(tag)
for (i=0;i<els.length; i++) {
if (els.item(i).className == SomeClass){
els.item(i).style.display = 'none';}
}
}
</script>

</head>

<body>

<a href="javascript:void(0)" onclick="hideAll('div','inserted'); toggle('external1')">include external 1</a>
<div id="external1" class="inserted"><script type="text/javascript">document.includeWrite('external1.html')</script> </div>

<br><a href="javascript:void(0)" onclick="hideAll('div','inserted'); toggle('external2')">include external 2</a>
<div id="external2" class="inserted"><script type="text/javascript">document.includeWrite('external2.html')</script> </div>

<br><a href="javascript:void(0)" onclick="hideAll('div','inserted'); toggle('external3')">include external 3</a>
<div id="external3" class="inserted"><script type="text/javascript">document.includeWrite('external3.html')</script> </div>

</body>

external1.html

Code:

This is <a href="javascript:void(0)" onclick="alert('I`m external 1')" style="color:red">external 1</a>

external2.html

Code:

This is <a href="javascript:void(0)" onclick="alert('I`m external 2')" style="color:red">external 2</a>

external3.html

Code:

This is <a href="javascript:void(0)" onclick="alert('I`m external 3')" style="color:red">external 3</a>

Note that if we do a simple document.write after the page has loaded, all existing content will be cleared and replaced by the new content.
===
Arie.

Thread: Including javascript in ajaxpage loaded dynamically

Thread Tools

Search Thread

Including javascript in ajaxpage loaded dynamically

function def and function call in child file

Bookmarks

Bookmarks

Posting Permissions