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;"> </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 </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
<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.
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;"> </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 </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
<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.