I want to initialize a jquery function when the ajax request is done and got response successfuly. Because am trying to get a table as ajax response and sort it out as a grid using data table jquery plugin for girds
The function initializes this way
$(document).ready(function() {
$('#data_grid').dataTable();
} );
Function which will be triggered on success of the ajax response
function showgValid()
{
if(xmlHttp.readyState == 4 || xmlHttp.readyState == "plete")
{document.getElementById('loadingImg').style.display='none';
data =xmlHttp.responseText;
document.getElementById("genPay").innerHTML=data;
}
}
On success of the ajax response, the innerHTML of genPay div will bee the responsetext, the response text will be a table with an id data_table.
The ajax request will be sent and got from the file below:
<?
require_once '../config.php';
$db = $_GET['db'];
$table = $_GET['table'];
$_SESSION['table']=$table;
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" title="currentStyle">
@import "demo_page.css";
@import "demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
<script language ="javascript" src="js/abtAjax.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#data_grid').dataTable();
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="data_grid">
<thead><?
if ( $line == 0 )
{
?>
<tr>
<?php
$sql=mysql_query("show columns from $table");
while($res = mysql_fetch_row($sql))
{
echo "<th bgcolor='".( ( $line % 2 ) ==0 ? '#efefef' : '#ffffff' )."'>$res[0]</td>";
}
?>
</tr>
<?
}
$line++;
?>
</thead>
<tbody>
<?php
$result = mysql_query( "select * from $table" );
$num_rows = mysql_num_rows($result);
while ($get_info = mysql_fetch_object($result)){
print "<tr>";
foreach ($get_info as $field)
print "<td>$field</td>";
print "</tr>";
}
?>
</tbody>
<?
print "</table>";
?>
<div class="spacer"></div>
</div>
</body>
</html>
The problem is that am not getting the grid am expecting. I think the function is not initializing on success of the ajax request. please correct me to get rid of this problem
I want to initialize a jquery function when the ajax request is done and got response successfuly. Because am trying to get a table as ajax response and sort it out as a grid using data table jquery plugin for girds
The function initializes this way
$(document).ready(function() {
$('#data_grid').dataTable();
} );
Function which will be triggered on success of the ajax response
function showgValid()
{
if(xmlHttp.readyState == 4 || xmlHttp.readyState == "plete")
{document.getElementById('loadingImg').style.display='none';
data =xmlHttp.responseText;
document.getElementById("genPay").innerHTML=data;
}
}
On success of the ajax response, the innerHTML of genPay div will bee the responsetext, the response text will be a table with an id data_table.
The ajax request will be sent and got from the file below:
<?
require_once '../config.php';
$db = $_GET['db'];
$table = $_GET['table'];
$_SESSION['table']=$table;
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" title="currentStyle">
@import "demo_page.css";
@import "demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
<script language ="javascript" src="js/abtAjax.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#data_grid').dataTable();
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="data_grid">
<thead><?
if ( $line == 0 )
{
?>
<tr>
<?php
$sql=mysql_query("show columns from $table");
while($res = mysql_fetch_row($sql))
{
echo "<th bgcolor='".( ( $line % 2 ) ==0 ? '#efefef' : '#ffffff' )."'>$res[0]</td>";
}
?>
</tr>
<?
}
$line++;
?>
</thead>
<tbody>
<?php
$result = mysql_query( "select * from $table" );
$num_rows = mysql_num_rows($result);
while ($get_info = mysql_fetch_object($result)){
print "<tr>";
foreach ($get_info as $field)
print "<td>$field</td>";
print "</tr>";
}
?>
</tbody>
<?
print "</table>";
?>
<div class="spacer"></div>
</div>
</body>
</html>
The problem is that am not getting the grid am expecting. I think the function is not initializing on success of the ajax request. please correct me to get rid of this problem
Share Improve this question edited Dec 3, 2011 at 7:34 pyfunc 66.9k15 gold badges154 silver badges139 bronze badges asked Dec 3, 2011 at 7:32 BalaBala 3,62810 gold badges47 silver badges75 bronze badges2 Answers
Reset to default 3$(document).ready() will not fire after your ajax call. It only fires when the page is first loaded. If you want $('#data_grid').dataTable(); called after your ajax call, then just call it from the success handler of the ajax call.
function showgValid()
{
if(xmlHttp.readyState == 4 || xmlHttp.readyState == "plete")
{
document.getElementById('loadingImg').style.display='none';
data =xmlHttp.responseText;
document.getElementById("genPay").innerHTML=data;
// ADD THIS LINE to your ajax success handler
$('#data_grid').dataTable();
}
}
I believe this is what you are looking for :
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
jQuery API refference