How to set grid post param dynamically and trigger

Question

I have the following jQgrid Free (version: 4.15.2) definition:

$(document).ready(function () {
    var $load_form = $("#load_form"),
        $form_id = sessionStorage.getItem('form_id') === null ? 1 : sessionStorage.form_id,
        $questions_grid = $("#questions");

    $(document).on("click", $load_form, function (ev) {
        // get the new form_id value and reload the grid by passing 
        // the new form_id as post parameter for the AJAX request
    });

    $questions_grid.jqGrid({
        url: '/ajax/questions/get/' + $form_id,
        datatype: "json",
        colNames: ['id', 'grid_id', 'seq', 'type', 'text'],
        colModel: [
            {name: 'field_id', index: 'id', width: 100, editable: false, editoptions: {readonly: true, size: 10}},
            {name: 'grid_id', index: 'grid_id', width: 50, editable: false, editoptions: {readonly: true, size: 10}},
            {name: 'field_seq', index: 'seq', width: 45, editable: true, editoptions: {size: 10}},
            {name: 'type', index: 'type', width: 125, editable: false, editoptions: {readonly: true, size: 10}},
            {
                name: 'field_name',
                index: 'text',
                width: 585,
                editable: true,
                edittype: "textarea",
                editoptions: {rows: "5", cols: "45"}
            }
        ],
        autowidth: true,
        iconSet: "fontAwesome",
        rowNum: 100,
        guiStyle: "bootstrap",
        pager: 'questions_pager',
        pgbuttons: false,
        pginput: false,
        sortname: 'seq',
        viewrecords: true,
        caption: "Questions",
        width: 100,
        height: "auto",
        editurl: 'ajax/questions/edit',
        multiselect: true,
        subGrid: false,
        subGridUrl: 'ajax/questions/get_options',
        subGridModel: [{name: ['id', 'text', 'is required'], width: [55, 200, 20]}],
        gridComplete: function () {
            // Don't need the +1 because it includes ".jqgfirstrow"
            var seq_number = this.rows.length;
            $("#next_seq_num").val(seq_number);

            $("#field_seq").empty();
            $("#grid_field_seq").empty();
            for (var i = 1; i <= seq_number; i++) {
                var sel = (i == seq_number) ? 'selected' : null;
                $("#field_seq").append("<option " + sel + ">" + i + "</option>");
                $("#grid_field_seq").append("<option " + sel + ">" + i + "</option>");
            }

            $(window).trigger('resize');
        },
        onSelectRow: function (ids) {
            if (ids !== null) {
                $("#option_field_id").val(ids);
                $(".field_seq_section").hide();

                $.ajax({
                    type: "POST",
                    url: "ajax/questions/get_grid_example/" + ids,
                    success: function (msg) {
                        if (msg !== "") {
                            jQuery('#options_ids').empty();
                        }

                        jQuery('#grid_cells_example').html(msg);
                    }
                });

                edit_question("<?php echo site_url('ajax/questions/get_by_id') ?>/" + ids, false);
            }
        }
    }).jqGrid('hideCol', 'cb');
});

At some point and dynamically I am setting the value of the property data-formid for $("#load_form"). Since $("#load_form") is a button (see definition below) I would like to trigger the reloadGrid event using the new $formid value so I get a new fresh data from the DB.

<button type="submit" class="btn btn-default" data-formid="" id="load_form">
   Load form
</button>

In a few logical steps:

• Set the value for data-formid
• Click on the button
• Trigger reloadGrid with $("#load_form").data("formid")

I have found this: how to set postData in jqgrid AFTER it has been constructed? but I am not sure how to apply on my scenerio.

How I can achieve this?

Answer 1

If I understand you correctly you want to change url parameter. The code of the click-event handler could be close to the following:

$(document).on("click", $load_form, function (ev) {
    var p = $questions_grid.jqGrid("getGridParam");
    p.url = "/ajax/questions/get/" + $("#load_form").data("formid");
    $questions_grid.trigger("reloadGrid");
});