Ajax call before jgrid is loaded

Question

Hi.

I need to pre-load some values from a php script, I'm using a $.post call (jquery) as follows:

...    
var grade, section,from,until,user;


        function loadData(){
            $.post('procstring.php', {data: window.location.hash},
                   function(result){
                    grade = result.grade;
                    section = result.section;
                    from = result.from;
                    until = result.until;
                    user = result.user;
                    },
            'json');
        }

I need this values to render a jqgrid like this

$("#list").jqGrid({

            url: 'report.php?g=' + grade + '&s=' + section + '&f=' + from + '&u='+ until + '&u=' + user + '&report=1&searchString=null&searchField=null&searchOper=null',
            datatype: 'json',
            mtype: 'GET',
…

So I call the loadData before $("#list").jqGrid({… but jqgrid seems to be loaded before loadData, don't know why, so I'm getting undefined values at the grade, section variables.

I've tried with jgrid events like beforeRequest and loadBeforeSend with no avail.

Any suggestion?. Thanks.

Answer 1

Because AJAX is asynchronous. You need to put $("#list").jqGrid({... inside the success callback:

// No need to define the variables outside
$.post('procstring.php', { data: window.location.hash },
    function(result)
        var grade = result.grade;
        var section = result.section;
        var from = result.from;
        var until = result.until;
        var user = result.user;

        $("#list").jqGrid({...
},
'json');