Unable to Filter and Show data on JSGrid using Form inside Modal

Question

I am using JSGrid for the table. Jsgrid documentation link. Above the table I have made a button called "Filter". I want to filter the data of the Jsgrid table based on the Filter_form data. I have been implementing this by calling an onclick function on "Submit" button inside the Filter_form (Bootstrap Modal). The ajax code does not seem to work properly. Also how to capture the data returned from PHP backend file and display ONLY filtered data in the Jsgrid table. Guys please please help me sort this out. Thanks a lot in advance.

HTML Code for Filter_form (Bootstrap Modal)

    <!-- Filter Modal Start-->
<div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="Filter data dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h1>
                    Filter Data
                </h1>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
            <div class="container-fluid">

                <form class="form-inline" role="form" id="filter_form">

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="column_name">Column Name</label>
                                <select class="form-control" id="column_name" name="column_name" aria-label="Column Name" style="width:100%;">
                                    <option value="Standard Name">Standard Name</option>
                                    <option value="Status">Status</option>
                                </select>
                          </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="condition">Condition</label>
                                <select class="form-control" id="condition" name="condition" aria-label="condition" style="width:100%;">
                                    <option value="contains">contains</option>
                                    <option value="start with">start with</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="keyword">Keyword</label>
                                    <input type="text" class="form-control" id="keyword" name="keyword" placeholder="Enter keyword" aria-label="keyword" style="width:100%;">
                            </div>
                        </div>                  



                <div class="col-md-12" style="padding-top: 2rem;">
                <button type="submit" class="btn btn-primary submitBtn" onclick="submitFilterForm()">Submit</button>
                </form>
                </div>
               </div>

            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--Filter Modal End-->

AJAX Function called on submit button

    function submitFilterForm(){
    var form = $("#filter_form");
    var column_name = $("#column_name").val();
    var condition = $('#condition').val();
    var keyword = $('#keyword').val();
    if(keyword == '' ){
        alert('Please enter keyword.');
        $('#keyword').focus();
        return false;
    }else{
        $.ajax({
            type:'POST',
            url:'submit_filterform.php',
            data:form.serialize(),
            beforeSend: function() {
                $('.submitBtn').attr("disabled","disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success:function(data){
                alert(data.message);
                if(JSON.stringify(data) == 'filtered'){
                    $('#keyword').val('');
                    $('.submitBtn').removeAttr("disabled");
                    $('.modal-body').css('opacity', '');
                    //$("#jsGrid").val(data);
                    $("#jsGrid").jsGrid({
                       onDataLoaded: function(args) {
                          // data is loaded, so do whatever you want, here you have also access to loaded data with args.data
                          alert('Hi I have loaded again');
                       }
                    });
                    //$('.modal').hide();
                    //$("#jsGrid").jsGrid("loadData");
                }else{
                    //$('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
                    alert('Some error occurred while filtering data, please refresh page and try again.');
                }
            }
        });
    }
}

PHP Backend Query

    switch($_SERVER["REQUEST_METHOD"]) {

    case "POST":
        $result = sqlsrv_query($con,"SELECT * FROM report_standard WHERE ".$_POST['column_name']." LIKE '%".$_POST['keyword']."%'");
        //$params = array($_POST['column_name'],$_POST['keyword']);
        if ($result == false) {

            echo "no data";
            exit();
        }
        else {
            while($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
                $data[] = $row;
            }

            $finalArr['data'] = $data;
            $finalArr['itemsCount'] = count($data);
            $finalArr['message'] = 'filtered';
            echo json_encode($finalArr);
        }
        break;

}

score 1 · Accepted Answer · edited May 30 '18 at 07:23

I was finally able to get the solution for this. Please find the changes below.

AJAX Function called on submit button

function submitFilterForm() {
    var form = $("#filter_form");
    var column_name = $("#column_name").val();
    var condition = $('#condition').val();
    var keyword = $('#keyword').val();
    if (keyword == '') {
        alert('Please enter keyword.');
        $('#keyword').focus();
        return false;
    } else {
        $("#filterModal").modal("hide");

        //Simply load the jsGrid again on the same id
        $("#jsGrid").jsGrid({
            height: "400px",
            width: "100%",
            editing: true,
            inserting: true,
            filtering: false,
            paging: true,
            autoload: true,
            pageSize: 15,
            pageButtonCount: 5,
            rowNum: 10,
            controller: {

                loadData: function(filter) {
                    return $.ajax({
                        type: "POST",
                        url: "../submit_filterform.php",
                        data: form.serialize(),
                        dataType: "json"
                    }).then(function(result) {
                        console.log(result);
                        return result.data;
                    });

                },
                fields: [
                    //Fields as required based on the data
                ]
            }
        });
    }
}

Unable to Filter and Show data on JSGrid using Form inside Modal

1 Answers1