Unable to display Ajax data in table

Question

I am having a web page with two drop down menu, Search button and a table, the table is grabbing information on load using jquery. On loading the table grabs information fine. But when I use drop down menus and search button to update this table, it does not work, How ever the information is there in response console. Here is my code

HTML Code

<div id="table"></div>

Jquery for load table

$(document).ready(function(){
    $.ajax({
        url: 'folder/list.php',
        success: function (data) {
            $('#table').html(data);
        },
        error: function(){
            alert('Error: Unable to display');
        }
    });

});

Jquery for search

$(document).on('click', '#cont-search', function(event) {
event.preventDefault();
var cate = $('#cat-search').val();
var city = $('#city-search').val(); //Important 

$.ajax({
        url: 'folder/list.php',
        type: 'post',
        dataType: 'json',
        data: {
                cate:cate,
                city:city,
            },
        success: function (data) {
            $('#table').html(data);
        },
        error: function(){
            alert('Error: Unable to display Search');
        }
    });});

PHP CODE

require_once('abc/Item.php');

$cat = $_POST['cate'];
$city = $_POST['city'];

$ser_cont = $item->search_cont($cat,$city);?><div class="table-responsive">
    <table id="myTable-item" class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th>S.No.</th>
                <th>Category</th>
                <th>R No.</th>
                <th>Name</th>
                <th>City</th>
             </tr>
        </thead>
        <tbody>
            <?php 
            $sno = 1;
            foreach($ser_cont as $c): ?>
                <tr align="center">
                    <td><?= $sno++; ?></td>
                    <td><?= $c['cate']; ?></td>
                    <td><?= $c['registno']; ?></td>
                    <td align="left"><?= $c['name']; ?></td>
                    <td><?= $c['dist']; ?></td>
</tr>
            <?php endforeach; ?>
        </tbody>
    </table>

Have you added the curly brackets for your $(document).on('click', '#cont-search', function(event) ??? you need to add }) to the end of your code... — H. M.., May 05 '20 at 12:31
Json return is exactly the same what i am looking for. But i dont know why its not displaying in table, Can not place the Json return here — Ricky, May 05 '20 at 12:38
What have you tried to debug the problem? Is this really a PHP problem? — Nico Haase, May 05 '20 at 19:06

score 0 · Answer 1 · answered May 05 '20 at 18:45

0

you can try by changing the action method to onchange

$(document).on('change', '#cont-search', function(event) {
// your event
}

answered May 05 '20 at 18:45

Cristopher Fuentealba

151
1
7

the event he is calling should not work for a dropdown, onchange is the correct event for a dropdown : https://stackoverflow.com/questions/19922729/how-to-get-jquery-dropdown-value-onchange-event – Cristopher Fuentealba May 05 '20 at 19:29
Please add all clarification to the answer by editing it – Nico Haase May 05 '20 at 20:07

score 0 · Accepted Answer · answered May 05 '20 at 19:05

0

I Solved the issue as it was not a json return so I just removed

dataType: 'json',

from my code and it worked, Thanks to every one for the comments

answered May 05 '20 at 19:05

Ricky

35
1
10

Unable to display Ajax data in table

2 Answers2