bootgrid custom loading of data

Now i am trying to generate a subject based bootgrid table for college.Now its working fine for displaying all the data.But what i want is an advanced search where subject are selected based on branch and semester.I obtain the branch and semester options and inside the syfetch.php function i perform an advanced serach.Here is sending function

$('#semester').change(function(){

            var branch=$("#branch").val();
            var semester=$("#semester").val();

            var formData = new FormData();
            formData.append('branch', branch);
            formData.append('semester', semester);

            var productTable = $('#product_data').bootgrid({

            url: "sylfetch.php",
            ajax: true,
            data:formData,
            type:"POST",
            post: function(data)
            {
                return{
                id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
                    };
            },

            formatters: {
                "link": function(column, row) {
                return "<a href='" + row.slink + "'>Download</a>";
                }



            }
        });
        $('#product_data').bootgrid('reload');
    });

Now whenever i try to read the values of semester and branch inside sylfetch.php it stops working

$branch = $_POST["branch"];
$semester= $_POST["semester"];

Now i think there is an error with sending of these variables with ajax so please help me out.

One of the parameters in bootgrid's configuration, is post which is a function. This function allows you to add custom values to the post data. Then use it like so:

var productTable = $('#product_data').bootgrid({

    url: "sylfetch.php",
    ajax: true,
    data: formData,
    type: "POST",
    post: function (data) {
        return {
            branch: $("#branch").val(),
            semester: $("#semester").val(),
        };
    },
    formatters: {
        "link": function (column, row) {
            return "<a href='" + row.slink + "'>Download</a>";
        }
    }
});

$('#semester').change(function () {
    productTable.bootgrid('reload');
});

First thing to take note is you don't need to rebuild the whole grid everytime you change a semester, since the only thing which changes in the grid is its data. So you keep a reference to the grid (as you were already doing) and just reload it.

Everytime the bootgrid reloads (e.g user changed to another page, or ordered by another column, or clicked the refresh button), that post function is called again. Therefore, you can load branch and semester from your DOM there.

Your previous code was overriding the formData you were passing to data, because it was creating a new object with just an id property, which you probably got from some demo, and you are not using at all:

return{
    id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
};