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.
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
Code:
<?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 </td>
<td style=\"text-align:center;\">$field2 </td>
<td style=\"text-align:center;\">$field3 </td>
<td style=\"text-align:left;\">$field4 </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
Code:
<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.
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 maybe because of my experience with ajax is so little.
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:
PHP Code:
<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:
Quote:
Originally Posted by RamaJin
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.
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.
Okay, what are you wanting to open on the thickbox?
PHP Code:
<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.
here's a screenshot of what i want.
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 :
Code:
<a href="detailed_query.php?id=1&rand=356a192b7913b04c54574d18c28d46e6395428ab&height=220&width=400" class="thickbox" title="Detailed information of selected issue">details</a>
<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:
Code:
<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).
<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
Quote:
Originally Posted by rangana
Also, please try to run this HTML:
Code:
<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).
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.
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.
Before you post, read our: 
maybe because of my experience with ajax is so little. 
