CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
user1894647
user1894647

Reputation: 663

Display ajax response in Table

display.html :

<div id="display_result" style="display: none"><table class="table">
<p style="float: right;" >Select All<input type="checkbox" class="allcb" data-child="chk" checked/> </p>                                    
<thead>
  <tr>
     <th>Die No</th>    
     <th> Status </th>    
     <th> Location </th>    
     <th>Select</th>
  </tr>
</thead>
<tbody>
</table>
<div id ="issue_button">       
<input type="submit" id="submit" class="btn btn-success " value="Recieve" style="width: 150px;"></div>  
</div>

Ajax: 

var data = JSON.stringify($("#form").serializeArray());
// alert(data);
$.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod
type: 'POST',
data: {
list: data
},
url: 'die_recieving_process.php',
success: function(data) ){
$('#display_result').html(data);
}
});

die_recieving_process.php

while($fetch = mysql_fetch_array($query))
{
if($fetch[1] == "Table Rack" )
{
echo '<tr class="success"><td>'.$fetch[0].'</td><td>'.$fetch[1].'</td><td>'.$fetch[3] . '</td> <td><input type=checkbox class="chk" id=check_box value= '.$fetch[2].' name= check_list[]  </td>  </tr>';
}
else
{
echo '<tr class="warning"><td>'.$fetch[0].'</td><td>'.$fetch[1].'</td><td>'.$fetch[3] . '</td> <td><input type=checkbox class="chk"  id=check_box value= '.$fetch[2].' name= check_list[] checked </td>  </tr>';
}    
}

Hi friends in display.html I have to display the result processed in die_recieving_process.php . In ajax i've sent all the value to die_recieving_process.php and after fetching the result i've to display the result in display.html

Upvotes: 3

Views: 23617

Answers (3)

Ashraf Sada
Ashraf Sada

Reputation: 4905

Create html table with empty body tags and body id = tBody for example:

<table>
  <caption>Smaple Data Table</caption>
  <thead>
    <tr>
      <th>Field 1</th>
      <th>Field 2</th>
    </tr>
  </thead>
  <tbody id="tBody"></tbody>
</table>

Use the jquery ajax to load json data in the created table after load button is clicked assuming that my json file is storing userData like userName, age, city:

$('#btnLoadAll').click(function () {
                $.ajax({
                    url: "url/data.json",
                    dataType: 'json',
                    success: function (resp) {
                        var trHTML = '';
                        $.each(resp, function (i, userData) {
                                trHTML +=
                                    '<tr><td>'
                                    + userData.userName
                                    + '</td><td>'
                                    + userData.age
                                    + '</td><td>'
                                    + userData.city 
                                    + '</td></tr>';
                            
                        });
                        $('#tBody').append(trHTML);
                    },
                    error: function (err) {
                        let error = `Ajax error: ${err.status} - ${err.statusText}`;
                         console.log(error);
                    }
                })
            });

Upvotes: 3

Marina
Marina

Reputation: 794

First in you Javascript, you have 2 errors: Your code overrides existing contents of div, which is the whole table... And you have one unnecessary bracket in success function declaration

So change this: 

success: function(data) ){
$('#display_result').html(data);
}

To this: 

success: function(data) {//remove unnecessary bracket
   $('#display_result tbody').html(data);//add data - to tbody, and not to the div
}

By the way, using $.post() you can write your javascript code shorter, like this: 

var data = JSON.stringify($("#form").serializeArray());
$.post('die_recieving_process.php',{list:data},function(responseData){
    $('#display_result tbody').html(responseData); //added to tbody which is inside #display_result
    $('#display_result').show();
});

Second you need to close your tbody tag inside the table

Upvotes: 3

Nick
Nick

Reputation: 10163

If you do not see result, try to remove style="display: none" in display.html

Upvotes: 0

Related Questions