...

View Full Version : make other javascript event work on innerHTML



RamaJin
02-05-2009, 03:05 AM
hello, i've touched ajax a few days ago to make a more responsive site. i hope somebody can enligthen me on my dillema.

PROBLEM : link for modal window doesn't seem to work with the data from the innerHTML. basically i wrote a view_queries.php that when it loads will call
an ajax function getData() which in turn will get the specified data then return an already made table to replace a certain div in my view_queries.php. all
data where loaded except when i click a link in the generated table, the javascript/thickbox_compressed.js doesn't work at all or is not recognized.

WHAT I DID SO FAR : before posting here, i have read that it's impossible, i hope this is not the final answer, because innerHTML excludes? other javascript/events
and sites suggest that use the old DOM style of replacing the div, the problem is since the table was already generated the data is already within the table.

SOURCE CODE:
view_queries.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/thickbox.css" />
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox-compressed.js"></script>
<title>SITE TITLE</title>
</head>
<body onload="getData('<?php echo $user;?>');">
<div class="page-container" style="width:650px;">
<div class="header" style="width:650px;">
<div class="header-top" style="width:650px;">
<div class="sitelogo" style="width:650px;"></div>
</div>
</div>
<div class="main" style="width:650px;">
<center>
<div id="innerTable" style="text-align:center;"></div>
</center>
</div>
<div class="footer" style="width:650px;">&nbsp;</div>
</div>

</body>
</html>

ajax.js


http = getHTTPObject();

function getHTTPObject(){
var xmlhttp;
if(!xmlhttp && typeof XMLHttpRequest != 'undefined'){
try {
xmlhttp = new XMLHttpRequest();
}
catch(e){
xmlhttp = false;
}
}
return xmlhttp;
}
function getData (cUser) {
iHTML = "<img src='images/ajax-loader2.gif' />";
document.getElementById('innerTable').innerHTML = iHTML;
var date = new Date();
var timestamp = date.getTime();
var url = "getData.php?user=" + cUser + "&&stamp=" + timestamp;
http.open("GET", url, true);
http.onreadystatechange = getDataCallback;
http.send(null);
}
function getDataCallback() {
if (http.readyState == 4) {
var table = unescape(http.responseText);
table = table.replace( /\+/g,' ');
document.getElementById('innerTable').innerHTML = table;
}
}

getData.php


<?php
include("../support_files/dbConfig.php");
include("../support_files/MySQLManager.class.php");
$db =& new goMySQL(DB_HOST,DB_USER,DB_PASS,DB_NAME);
$innerTable = "<center>
<table class=\"tablesorter\" cellspacing=\"1\" cellpadding=\"0\" border=\"0\" style=\"width:550px;\">
<thead>
<th colspan=\"5\">Hi $user, here's the list of query issue(s).</th>
</thead>
<thead>
<th style=\"padding:0;text-align:center;width:100px;\">FIELD 1</th>
<th style=\"padding:0;text-align:center;width:75px;\">FIELD 2</th>
<th style=\"padding:0;text-align:center;width:75px;\">FIELD 3</th>
<th style=\"padding:0;text-align:center;width:250px;\">FIELD 4</th>
<th style=\"padding:0;text-align:center;width:50px;\">DETAILS</th>
</thead>
<tbody>
";
$SQL_QUERY = "SELECT `field1`,`field2`,`field3`,`field4`,`id` FROM `database`.`table` WHERE `field5`='4Query';";
$result = $db->query($SQL_QUERY ) OR $db->raiseError("unable to process request for data. please try again later.");
if ($db->num_rows($result)>0)
{
while ($rows = $db->fetch_assoc($result))
{
$field1 = $rows['field1'];
$field2 = $rows['field2'];
$field3 = $rows['field3'];
$field4 = URLENCODE($rows['field4']);
$id = $rows['id'];
$hash_id = SHA1($id);
$innerTable .= "<tr>
<td style=\"text-align:center;\">$field1&nbsp;</td>
<td style=\"text-align:center;\">$field2&nbsp;</td>
<td style=\"text-align:center;\">$field3&nbsp;</td>
<td style=\"text-align:left;\">$field4&nbsp;</td>
<td style=\"text-align:center;\"><a href=\"detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a></td>
</tr>";
USLEEP(10);
}
}
$innerTable .="
</tbody>
</table></center>";
$db->close();
echo $innerTable;


this is the problem


<a href=\"detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a>

this doesn't work or recognize any event thus it cannot create a modal window but rather redirects to the target page like a usual link.

rfresh
02-05-2009, 11:10 PM
What browser are you using?

Have you tried to reproduce this on other browsers to see if you get the same results?

RamaJin
02-06-2009, 03:08 AM
i have deployed it on IE 7 since that's what most of my users use but i also test it on firefox and it still not working. i have read from a site on how to solve this problem but apparently i cannot understand what he is instructing to do :confused: maybe because of my experience with ajax is so little.

here's the link where i read about innerHTML : http://www.skriptfoundry.com/wordpress/?p=11

rangana
02-06-2009, 04:41 AM
I'll assume that this problem is not more of an AJAX problem (with innerHTML), but instead a problem on your thickbox.

This part of your code were parsed correctly:


<a href=\"detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a>


...and you said, that:


this doesn't work or recognize any event thus it cannot create a modal window but rather redirects to the target page like a usual link.


...which means that code were relayed correctly, but the thickbox is not functioning correctly.

With that said, please provide a link to your page, and a link to the page where you got your thickbox.

Hope that makes sense.

RamaJin
02-06-2009, 07:10 AM
Hi rangana,

here's the link where i got the thickbox : http://jquery.com/demo/thickbox/

now regarding the site i think that won't be possible because the one i work on belongs only on the company's network so access from outside is impossible.

rangana
02-06-2009, 07:21 AM
Okay, what are you wanting to open on the thickbox?


<a href="detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a>


Is it an image? Could you please let us know the parsed markup on the above-pointed part of your PHP.

RamaJin
02-06-2009, 08:54 AM
Hi rangana,

here's a screenshot of what i want.
http://www.freeimagehosting.net/uploads/th.5550c575f0.gif (http://www.freeimagehosting.net/image.php?5550c575f0.gif)
as you can see, the thickbox works if the link the user clicks is not from a generated link/table thrown by innerHTML. and yes that is a modal window.

and here's the parsed link :
<a href="detailed_query.php?id=1&rand=356a192b7913b04c54574d18c28d46e6395428ab&height=220&width=400" class="thickbox" title="Detailed information of selected issue">details</a>

again thanks for the quick reply.

rangana
02-06-2009, 09:55 AM
Your syntax for iframe content for thickbox seemed incomplete.

Please refer here:
http://jquery.com/demo/thickbox/

You missed to set keepThis and TB_iframe to true when passed.

You might get some hint on the part of your markup where thickbox works fine (manual link).

Hope that helps.

RamaJin
02-06-2009, 10:10 AM
actually i have tried that before and it didn't work, also i'm not using the iFrame content but the Ajax content.

rangana
02-06-2009, 10:16 AM
Could you please try to remove highlighted:


<a href="detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a>


...just to verify that it has no conflict.

Also, please try to run this HTML:


<a href="detailed_query.php?id=1&rand=356a192b7913b04c54574d18c28d46e6395428ab&height=220&width=400" class="thickbox" title="Detailed information of selected issue">details</a>


...on your page (place it as a normal markup and not as dynamic link).

Let us know the results.

RamaJin
02-06-2009, 10:19 AM
Could you please try to remove highlighted:


<a href="detailed_query.php?id=$id&rand=$hash_id&height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">details</a>


even if only height and width is present it still doesn't work when the link was generated by innerHTML


Also, please try to run this HTML:


<a href="detailed_query.php?id=1&rand=356a192b7913b04c54574d18c28d46e6395428ab&height=220&width=400" class="thickbox" title="Detailed information of selected issue">details</a>


...on your page (place it as a normal markup and not as dynamic link).

Let us know the results.
this works

rangana
02-06-2009, 10:22 AM
Thanks, and now, I don't know what else to do than to ask for a link to your page instead.

Could you by chance setup one? So we could be able to see the issue in action.

RamaJin
02-06-2009, 10:37 AM
maybe i'll try to replicate my site and host it somewhere so you can check, i'll try to post the link if i can.

edit:

so i tried to replicate my problem, removed unnecessary codes and styles so we can easily pinpoint the problem. site is here : http://ramajin.150m.com/

as you can see the first link works while the link generated by the inneHTML does not work at all or rather became a simple link.

RamaJin
02-09-2009, 03:08 AM
bumping post :)

rangana
02-09-2009, 05:09 AM
Thanks for the bump ;)

I'm at school right now, and I need bump sometimes.

Anyway, thanks for creating a demo for us to see.

The problem is that your thickbox that is being generated by your innerHTML isn't a part of the DOM (yet) when the page is loaded - so the event handlers are not yet bound.

With that said, you need to recall the thickbox initialise function within your getData() function.

The fix is by adding highlighted:


function getData () {
var table = "<br /><center><table cellspacing=\"0\" cellpadding=\"0\" border=\"1\" style=\"width:450px;font-size:11px;font-family:11px;\">";
table = table +"<thead><th>FIELD 1</th><th>FIELD 2</th><th>FIELD 3</th><th>FIELD 4</th><th>DETAILS</th></thead>";
table = table + "<tbody>";
table = table + "<tr><td>VALUE 1</td><td>VALUE 2</td><td>VALUE 3</td><td>VALUE 4</td><td><a href=\"querywindow.html?height=220&width=400\" class=\"thickbox\" title=\"Detailed information of selected issue\">link generated by innerHTML</a></td></tr>";
table = table + "</tbody>";
table = table + "</table></center>";
document.getElementById('innerTable').innerHTML = table;
tb_init('a.thickbox'); // Initialise again
}


tb_init() is the thickbox initialise function which attaches its events to your selected elements.

For further reading:
http://docs.jquery.com/Tutorials:AJAX_and_Events
http://www.djcnet.co.uk/jquery-thickbox-on-ajax-generated-pages.html

Also, you might want to create the elements via DOM instead of relying on innerHTML.

Hope that helps.

RamaJin
02-09-2009, 07:03 AM
big thanks rangana, so everything is working now. and creating by DOM the table would be a little bit hard for me since i'm quite new to ajax :(

again thanks and i'll look it up on creating table using DOM as suggested by you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum