Question

I have a javascript function which builds the user interface of an application.

First I append all needed elements in a div, and one of them is a jqgrid.

Here is an example:

    //Generate the controls
    var c = '';
        c += '<table>';
        c += '<tr>';
        c += '<td><label for="from_date">Start Date</label><td>';
        c += '<td><input type="text" id="from_date"/></td>';
        c += '<td><label for="to_date">End Date</label><td>';
        c += '<td><input type="text" id="to_date"/></td>';              
        c += '</tr>';
        c += '</table>';

    //Perform an ajax call update date pickers
    $.ajax({
        url: "php/daily_schedule/daily.schedule.get.date.limits.php",
        dataType: "json",
        success: function(data) {

        //Update the values of the inputs
        $("#from_date").val(data.MAX);
        $("#to_date").val(data.MAX);

        //Split json results to pass new date objects
        var max_array = data.MAX.split('-');

        var max_yy    = max_array[0];
        var max_mm    = max_array[1]-1;
        var max_dd    = max_array[2];

        var min_array = data.MIN.split('-');

        var min_yy    = min_array[0];
        var min_mm    = min_array[1]-1;
        var min_dd    = min_array[2];

        //Initiate the from date picker
        $( "#from_date" ).datepicker({
                        dateFormat :"yy-mm-dd",
                        defaultDate: new Date(max_yy, max_mm, max_dd),
                        maxDate: new Date(max_yy, max_mm, max_dd),
                        minDate: new Date(min_yy, min_mm, min_dd),                                                                                                           
                        changeMonth: false,
                        numberOfMonths: 1,
                        onClose: function( selectedDate ) {
                                        $( "#to_date" ).datepicker( "option", "minDate", selectedDate );
                        },
                        onSelect:function(){

                            load_FLT();

                        }

        });

        //Initiate the to date picker                                                       
        $( "#to_date" ).datepicker({
                        dateFormat :"yy-mm-dd",
                        defaultDate: new Date(max_yy, max_mm, max_dd),
                        maxDate: new Date(max_yy, max_mm, max_dd),
                        minDate: new Date(min_yy, min_mm, min_dd),                                                                                                                              
                        changeMonth: false,
                        numberOfMonths: 1,
                        onClose: function( selectedDate ) {
                                        $( "#from_date" ).datepicker( "option", "maxDate", selectedDate );
                        },
                        onSelect:function(){

                            load_FLT();

                        }

        });         

        }

    });


    //Append the controls
    $('#daily_schedule_core_filters_container').append(c)

    //Generate grid elements
    $('#daily_schedule_core_grid_container').append('<table id="daily_schedule_grid"></table>')
    $('#daily_schedule_core_grid_container').append('<table id="daily_schedule_grid_pager"></table>')

Then i add the grid:

    //Create the daily schedule grid
    jQuery("#daily_schedule_grid").jqGrid({
        url:'php/daily_schedule/daily.schedule.grid.php',
        datatype: "json",
        hidegrid: false,

etc
etc
etc

My problem is that I add this to my grid:

        postData: {
            df: function() { return $('#from_date').val()},
            dt: function() { return $('#to_date').val()}
        },
        mtype: 'POST',

and it keeps sending POST as an undefined value.

Any ideas on what I am doing wrong?

Answer 1

Issue solved by applying .done() on ajax call and including the grid creation inside the done.
Thanks anyway!