Home/ Questions/Q 6893673
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:41:18+00:00

I want to initialize a jquery function when the ajax request is done and

  • 0

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 == "complete")
    {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 become 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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    $(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 == "complete")
    {
        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();
    }
}
    • 0