too long

Question

I am trying to reload a table instead of reloading the whole page

here is my code

    <link href="assets/css/bootstrap.min.css" rel="stylesheet" >


    <script src="assets/js/bootstrap.min.js"></script>
    <input id="check" value="" placeholder="Enter your number here" />
    <button type="button" id="go_check" class="btn btn-success" data-loading-text="Loading..." > <i class="icon-ok icon-white"></i> Check</button>
    <span id="button"></span>
    <br/>
    <div id="response">

    </div>
    <script>
        jQuery(document).ready(function() {

            jQuery('#go_check').click(function() {
                jQuery('#go_check').button('loading');

                jQuery.ajax({
                    type: "POST",
                    url: "ajax.php",
                    data: ({
                        method: "check",
                        number: jQuery('#check').val()
                    }),
                    dataType: "json",
                    success: function(data) {
                        jQuery('#button').html(data.btn);
                        jQuery('#go_check').button('reset');
                        jQuery('#response').html(data.html);
                    },
                    failure: function(errMsg) {
                        jQuery('#go_check').button('reset');

                        alert(errMsg);
                    }
                });
            });
        });
        function delete_item($id) {
            jQuery.ajax({
                type: "POST",
                url: "ajax.php",
                data: ({
                    method: "delete",
                    number: $id

                }),
                dataType: "json",
                success: function(data) {
                    jQuery('#button').html('');
                     window.location.reload();  // would like to replace this line with the table refresh
                },
                failure: function(errMsg) {
                    jQuery('#go_check').button('reset');

                    alert(errMsg);
                }
            });
        }
    </script>         



    <link href="assets/css/jquery.dataTables.css" rel="stylesheet" media="screen">
    <link href="assets/css/jquery.dataTables_themeroller.css" rel="stylesheet" media="screen">



    <script src="assets/js/jquery.dataTables.min.js"></script>
    <table class="table" id="tad">
        <thead>
        <th>
            Order Id
        </th>
        <th>
            Ticket Name
        </th>
        <th>
            Ticket Number
        </th>
        <th>
            Product
        </th>
        <th>
            Model
        </th>
        <th>
            Option Name
        </th>
        <th>
            Option
        </th>
        <th>
            Customer
        </th>
        <th>
            Email
        </th>
        <th>
            Telephone
        </th>
        <th>
            Date
        </th>
    </thead>
    <tbody>
        <?php
        include "config.php";
         $con = mysql_connect(DB_HOSTNAME, DB_USERNAME, DB_PASSWORD);
        mysql_select_db(DB_DATABASE, $con);
        $result = mysql_query("select * from order_serial ", $con);
        while ($row = mysql_fetch_array($result)) {
            echo "<tr>";
            echo "<td>" . $row['order_id'];
            echo "</td>";
            echo "<td>" . $row['serial_name'];
            echo "</td>";
            echo "<td>" . $row['product_serial'];
            echo "</td>";
            echo "<td>" . $row['name'];
            echo "</td>";
            echo "<td>" . $row['model'];
            echo "</td>";
            echo "<td>" . $row['option_name'];
            echo "</td>";
            echo "<td>" . $row['option_value'];
            echo "</td>";
            echo "<td>" . $row['firstname'] . " " . $row['lastname'];
            echo "</td>";
            echo "<td>" . $row['email'];
            echo "</td>";
            echo "<td>" . $row['telephone'];
            echo "</td>";
            echo "<td>" . $row['date'];
            echo "</td>";
            echo "</tr>";
        }
        ?>
    </tbody>  
</table>
<script>
    jQuery(document).ready(function() {
        $('#tad').dataTable({
            "sDom": 'R<"H"lfr>t<"F"ip>',
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
        });

    });
</script>

    </tbody>
  </table>

I have searched for the answer and cant seem to find one it seems a bit silly to reload the whole page instead of just the table ?

Answer 1

Here we can separate the table loading as a separate method and call it on both the go_check button click and after successful deletion of the item.

jQuery(document).ready(function() {

    function loadTable(){
        jQuery('#go_check').button('loading');

        jQuery.ajax({
            type: "POST",
            url: "ajax.php",
            data: ({
                method: "check",
                number: jQuery('#check').val()
            }),
            dataType: "json",
            success: function(data) {
                jQuery('#button').html(data.btn);
                jQuery('#go_check').button('reset');
                jQuery('#response').html(data.html);
            },
            failure: function(errMsg) {
                jQuery('#go_check').button('reset');

                alert(errMsg);
            }
        });
    }

    jQuery('#go_check').click(loadTable);
});
function delete_item($id) {
    jQuery.ajax({
        type: "POST",
        url: "ajax.php",
        data: ({
            method: "delete",
            number: $id

        }),
        dataType: "json",
        success: function(data) {
            jQuery('#button').html('');
            loadTable();
        },
        failure: function(errMsg) {
            jQuery('#go_check').button('reset');

            alert(errMsg);
        }
    });
}