php - Making AJAX request and returning data on same page -
here's snippet code: page.php
<input type="text" id="search_query" style="float: right" placeholder="search" /> <div id="result"></div> <table> <tr> <th><input type="checkbox" name="select_all" id="select_all" value=""/></th> <th>title</th> <th>author</th> <th>date published</th> <th>actions</th> </tr> <?php if(isset($_post['query'])) { $query = $_post['query']; $res = search_articles($query); // function have query database sql 'like' } else { $res = view_articles(); // function } while($row = $res->fetch_assoc()) { echo '<tr>'; echo '<td><input type="checkbox" name="checked_id[]" class="checkbox" value="' . $row['id'] . ' ?>"/></td>'; echo '<td>' . $row['title'] . '</td>'; echo '<td>' . $row['author'] . '</td>'; echo '<td>' . $row['date_published'] . '</td>'; echo '<td> <a href="?del=' . $row['id'] . '">delete</a> | <a href="?edit=' . $row['id'] . '">edit</a> </td>'; echo '</tr>'; } ?> </table> and ajax request: (also in page.php)
function load_data(query) { $.ajax({ url:"", method:"post", data:{query:query}, success:function(data) { $('#result').html(data); } }); } $('#search_query').keyup(function() { var search = $(this).val(); if(search != '') { load_data(search); } else { load_data(); } }); basically, have search bar user can type , table i'm showing columns (taken database table) change dynamically.
the code have above working fine every time type on search bar, exact copy of page being displayed (everything in page gets displayed twice). there way can make ajax request return table , not entire page? (without moving entire code in separate php file want accomplish in single file)
i believe problem because i'm passing data (which contains whole page) #result div. i've tried looking solution , been tweaking code last 3 hours or no avail. i'm relatively new these web technologies (god there many!) , hope can help.
Comments
Post a Comment