1

How to refresh table data using Ajax, tried the below code , but it refresh the whole page rather than the particular section, the URL "/refresh" is a request to Slim(framework) which is turn call the PHP function "getData", the function "getData" is a Mysql query "select server_name from server_data", Results of changing the below line

$(".result").html(results); The whole page is refreshed $('#result').html(results); The data is not refreshed at all.

I need to just refresh the table data without refreshing the whole page when the refresh button is clicked.

<html>
    <script type="text/javascript">
        $(document).ready(function() {
        $('.refresh_data').click(function() {

            $.ajax({
                url: "/refresh",
                method: "GET",
                success: function(results) {
                        $('#result').html(results);
                }
            });
        });
    });
    </script>

    <body>
        <div align=right>
            <button type="button" class="bnt btn-info btn-dark btn-sm refresh_data">Refresh<i class="fa fa-refresh" aria-hidden="true"></i></button>
        </div>
    <div class="result"  align=center>
        <table id="hostTable" class="table table-striped table-bordered table-sm mb-0">
            <thead>
                <tr>
                    <th class="text-center h6 th-sm font-weight-bold">Server Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>name</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

From, Akash.V

Vino
  • 99
  • 6

1 Answers1

0

First of all the content is not refreshed when $('#result').html(results); because #result does not exist, the only result in the html is a class so .result.

So in order for this to work the code has to be: $('.result').html(results); .

Second problem, are you sure that the response is HTML?

And to finish, check for load function. .load(), maybe it will suite your needs better.

.load( url [, data ] [, complete ] )

Description: Load data from the server and place the returned HTML into the matched elements.

Community
  • 1
  • 1
Josep Vidal
  • 2,580
  • 2
  • 16
  • 27
  • If i use $('.result').html(results); it refresh the whole page, but i need only the table data to be refreshed – Vino Jul 08 '19 at 17:57
  • Tried this option $('#hostTable').DataTable.ajax.reload(); but getting an error 'DataTables warning: table id=hostTable - Invalid JSON response" as my data is a php array data. – Vino Jul 08 '19 at 18:43
  • Was able to partially resolve the issue by changing the below line and now the table content is getting refreshed, now the issue is that the string "#hostTable" is used in another ajax script to align the table, so when the content is refreshed the alignment goes off ,so i there is a way to retain the alignment $('#hostTable').load('/refresh #hostTable'); – Vino Jul 09 '19 at 08:39
  • @Vino you have a problem of fundamentals, you don't even know whats the difference between $('.result') and $('#result'), and this is super super basic, first try to understand the fundamentals of jQuery and javascript. – Josep Vidal Jul 09 '19 at 08:42
  • Thank''s for you advice, this forum is not to find whether one has an understanding on the subject or not, it is to help other's irrespective on whether they have knowledge or not, and basically it was a typo in the post, so please do not underestimate anyone without knowing the fact, and in fact i am a newbie as per the forum. – Vino Jul 09 '19 at 08:48
  • @Vino hey please, don't take it bad, what I mean is, you are trying to build a house but you don't know how the hammer works. $('.result') refresh the whole page because, the dot selector aka . means class, and yes, there is a div with the .result class, so the code works and refreshes the entire page, because the click works, but with # the code will never work, because the click evnt is never triggered because there are no element in the code with the id="result". This is what I mean by fundamentals, you are trying to make and ajax call, without even know basics about selectors and events – Josep Vidal Jul 09 '19 at 08:59
  • at last resolved the issue by placing the
    content and other table configuration into another page a changed the ajax load to $('#refresh').load('/refresh'); as "#refresh" is the id for the div tag.
     – Vino Jul 09 '19 at 16:23