PDA

View Full Version : Does Javascript work on AJAX generated code?



spyd3rr
04-11-2007, 03:35 PM
Hey guys,

There's some great stuff on this site, but unfortunately I can't get them to work on AJAX generated code.

I did some googling but couldn't find much on the topic, so I'm wondering if any of can answer that question confidently: Can Javascript effects work on AJAX generated code?

For example, can you use this:
http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

within the content of (ie. the bird tag) of this:
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

If so, how? If not, why not?

Thanks in advance for the help!

mburt
04-11-2007, 03:38 PM
AJAX is just an implementation of JavaScript, so just use the DOM to access the elements you need. It's not an iframe or anything, so it's just a part of the page.
Use document.getElementById(); to access the element created/accessed with AJAX.

spyd3rr
04-11-2007, 03:44 PM
Thanks for the quick response!

I've gotten basic javascript to work by the method you suggested (using getElementbyId or getElementsbyName).

However, once you get into something more complicated like the switch content script, where you have to include an external .js file and use it by adding tags to the AJAX-generated html, it flakes out.

Any thoughts on that?

mburt
04-11-2007, 03:48 PM
Probably just two conflicting scripts. For example, if both of them use the window.onload event handler, you have to combine the two into one event handler:

window.onload = funct1;funct2;

//edit: 2000th post. Yay :)

spyd3rr
04-11-2007, 04:11 PM
I see...I'll see what i can work with. Thanks for the advice!

and congrats on your 2000th. i have (had) exactly 1/1000th of your posts haha

spyd3rr
04-11-2007, 04:37 PM
Actually, if the webpage uses something, and an included .js file does as well, how would you handle that?

spyd3rr
04-13-2007, 04:15 PM
so, I'm pretty sure thats not the problem because the other script uses window.addEventListener.

Any other ideas? The script works fine when I put it in the main content, but as soon as I move it to the Ajax generated code, it doesn't work anymore.

I would include code, but its rather long to look thru.

jscheuer1
04-13-2007, 05:22 PM
Using addEventListener only helps resolve conflicts with other function(s) already assigned to that event. If the function fires before its content has been made a part of the page, or if it doesn't fire at all because it is added after the event trigger that it is associated with has passed, you have problems. Both of these situations can happen with Ajax added content. See:

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

That is a general discussion of how to deal with this in most situations. Some situations require more code and an outline of how that can done can be found here:

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

spyd3rr
04-18-2007, 09:46 PM
Awesome! got everything to work except for one thing:

Take a look at this sort table script:
http://www.kryogenix.org/code/browser/sorttable/

Its never explicitly called, it looks as if it searches for a class definition within the tables on the page. How would one go about doing that after the AJAX content loads?

jscheuer1
04-19-2007, 02:31 PM
I'm not sure what your problem with that script is. If it is that you don't know how to initialize it, that's easy. The initialization call (normally fired onload of a page) is:

sorttable.init();

So, using either of the two basic methods I linked to in my previous post, all you should need to do is call that after the content for it has been loaded via Ajax.

If you need more help, please explain the problem in more detail and supply a link to your problem page(s).

spyd3rr
04-19-2007, 04:30 PM
Still can't figure it out...unfortunately I can't like you the page because is on a private network but I'll try to be as descriptive as possible.

So here's now the sorttable.js is used on a normal page:


<html>
<head>
<script src="sorttable.js"></script>
</head>

<body>
<table class="sortable">
<!--whatever the table contents are -->
</table>
</body>

</html>

This works fine. But, sorttable.init() is never explicitly called, which confused me when i was trying to apply the instructions in the links you provided me.

This is how my webpage works:

toppage:

<html><head>
<script src="sorttable.js"></script>
<script language="javascript" type="text/javascript">
<!-- here lies some AJAX functions that calls "content.php" and puts it in DIV with id="returnResults" -->
</head>

<body>
<!-- some content -->

<form> <!-- some inputs from user -->
<input type="submit" onClick="javascript:*calls the AJAX function*;"
</form>

<div id="returnResults">AJAX loaded content (with the table i want to be sortable) goes here</div>

</body>
</html>

content.php:


<?php
//does some manipulation from user inputs and echos out the table that needs to be sortable
echo "<table class="sortable"><!--whatever the table contents are --></table>";
?>


I've tried everything suggested in the two tutorials you showed me, but nothing has worked. I've tried adding onLoad to content.php, adding the polling functions that call sorttable.init(), adding the window.acInit functions. So far nothing.

Any ideas?

Thanks for your ongoing patience and helpfulness!

jscheuer1
04-19-2007, 04:46 PM
First you should do a test, just to see if the initialization would work if we could run it at an appropriate time. To perform this test, use only the setup you have just outlined, make no attempt to code in anything extra on the pages. Now, here's what you do - after you have loaded the table onto the page via Ajax, paste this into the address bar of the browser:


javascript:void(sorttable.init())

Hit enter. There should be no error and the table should now work. If not, either the generated code of content.php doesn't conform to the sorting script (most likely) or one cannot init the script after the top page has loaded (very unlikely). Most likely of all, the table will work after doing this. If so, you should be able to use the method described here:

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

with the final onmouseover of step e as an event of the table on content.php


<table onmouseover="if(!window.acInit){sorttable.init();window.acInit=true;};" class="sortable">

spyd3rr
04-19-2007, 09:34 PM
Hey, thanks again for the suggestion, but unfortunately it still does not work. I made another top page with nothing but the table and the ajax call function (in which the table worked) and the ajax generated an identical table (just copied and pasted into a new content.php) and its a no go no matter what i do.

Since I don't know exactly how sorttable.js works, I think I'll probably have to get in touch with its maker and see what they know =P

But if you'd like to play with it, just copy and paste the following code:

sorttable.js:
http://www.kryogenix.org/code/browser/sorttable/
(credit to Stuart Langridge)

toppage.html:

<html>
<head>
<script src="sorttable.js"></script>
</head>

<body>

<script language="javascript" type="text/javascript">

var http_request = false;
/**************************************/
//AJAX handler
function makePOSTRequest(url, parameter, updateFunction) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
// alert("got here");
http_request.onreadystatechange = updateFunction;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameter.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameter);
}

/**************************************/
//Second AJAX request
function displayTable() {

var loadingText = "<p>Loading...</p>";
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('returnResults').innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
if(http_request.readyState == 1) {
document.getElementById('returnResults').innerHTML = loadingText;
}
}
function submitSelected(selectedShmooList){
var queryString = "parameter=5";
makePOSTRequest('content.php', queryString, displayTable);
}
</script>

<table class="sortable">
<tr><td>section 1</td><td>section 2</td><td>section 3</td></tr>
<tr><td>31</td><td>asdf</td><td>tduae</td></tr>
<tr><td>54734</td><td>dyjdf</td><td>affyu</td></tr>
<tr><td>235</td><td>zstdf</td><td>aflykgfu</td></tr>
<tr><td>3453</td><td>jdf</td><td>aw46tae</td></tr>
<tr><td>845</td><td>kdetykdf</td><td>nstrae</td></tr>
</table>

<form>
<input type="button" value="Submit Selected" onClick="javascript:submitSelected();"/></input>
</form>

<div id="returnResults"> Content here</div>
</body>

</html>


content.php

<html>
<body>

<?php

echo "$parameter<br>";
echo "<table nmouseover=\"if(!window.acInit){sorttable.init();window.acInit=true;};\" class=\"sortable\">
<tr><td>section 1</td><td>section 2</td><td>section 3</td></tr>
<tr><td>31</td><td>asdf</td><td>tduae</td></tr>
<tr><td>54734</td><td>dyjdf</td><td>affyu</td></tr>
<tr><td>235</td><td>zstdf</td><td>aflykgfu</td></tr>
<tr><td>3453</td><td>jdf</td><td>aw46tae</td></tr>
<tr><td>845</td><td>kdetykdf</td><td>nstrae</td></tr>
</table>";
?>
</body></html>

spyd3rr
04-19-2007, 09:45 PM
Ok nevermind, i got it to work. It appears that the sorttable.js has an if statement in the sorttable.init() that only allows it to run once, which is efficient, but we can't rerun it after the AJAX function calls another table. Which is stupid on my part that i didn't notice before because it was clearly commented //quit if this function has already been called.
:mad:

But one thing i am still confused about is how when I DID NOT include the sorttable.js in the toppage, and only called it in the AJAX loaded content, it still didn't work. And it should've only been run once. Oh well...

Thanks a bunch for all your help! I really appreciate it.

maxdynamic
11-13-2007, 10:45 PM
Hi,

Try sorttable.makeSortable(table_name); in your ajax callBack

Works for me,

Hope this helps