PDA

View Full Version : 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


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

it works like this ...

BUT




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)
<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

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 ... !


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 (http://www.let.rug.nl/molendyk/include_via_ajax/includer.html).
===
Arie.

legend.raju
12-29-2009, 09:45 PM
so i used this to change content dynamically

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 (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm)
===
Arie.

legend.raju
12-30-2009, 05:42 PM
document.includeWrite() once executed will remain unchanged
how do i dynamically change it .. !

example :


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


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 (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm), 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

<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

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

external2.html

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

external3.html

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.

molendijk
12-30-2009, 09:03 PM
Legend.raju, I suddenly realized that there may be a better and easier way (no Ajax, no document.write) to import external content, together with all its external css and js. I put a demo here (http://www.let.rug.nl/molendyk/import_external/main.html).
===
Arie.

legend.raju
12-31-2009, 08:49 AM
cool ..
ajaxpage()
with loadobjs() is what i needed ... !
thankyou .. !

i cant use document.write since the problem is
if i have 8 menu items
then i should write 8 items and setting visibility for 1 item

BUT
if i have sub items to those .. ! then what ll i do ?
so there will be a problem that i have to include first all the pages of my website .....
.....
any better solution for document.write


And
What is the use of ajaxinclude()
saw in one of the forums .......
what fun does this use ?

jscheuer1
12-31-2009, 01:51 PM
There is also jQuery's AJAX routines, one of which can be used for getting javascript. Other script libraries have similar or enhanced methods for bringing in and/or executing scripts. One may also just create a script element, set it's src attribute and append it to the head of the document (that's what the loadobjs thinger from ajaxpage does, though it also checks to make sure that script hasn't already been imported).

In any case, regardless of how the javascript arrives on the page, as long as it's in a manner that allows the browser to see it as a javascript, running javascript against the imported content is a different matter and must be done after that content has been made a part of the document. This is generally best done (in the case of an AJAX import) in the onreadystatechange event's function after the imported content is appended/injected (in)to the page.

However, if all you are doing is reacting to events on the imported content's elements, that can be (if done correctly) all setup ahead of time by creating document listeners for those events that analyze the target elements of those events. That way even new content that fits the criteria will set off the functions associated with those event listeners. One can also hard code inline events to the imported content as event triggers, but this latter often isn't all that straightforward, as many scripts need to initialize their trigger elements.