Question

If I declare a function inside document.ready, I get an error.
Like this

$(document).ready(function(){
    function updateSizeOptions()
    {
        alert("updateSizeOptions");
    }

    var jGrid = $("#list_main");
    jGrid.jqGrid({
        url:'db.php?ajaxOp=getData',
            colModel:[
                $.extend(true,
                { name:'shape_id'
                  ,index:'shape_id'
                  ,edittype:'select'
                  ,formatter:'select'
                  ,editoptions: { onclick:"javascript:updateSizeOptions();" }
                }
                ,{}
            ]
        ....
});

It will give Error : “ReferenceError: updateSizeOptions is not defined”.
But If I moved the function outside document.ready, everything works fine.
Like this

function updateSizeOptions()
{
    console.debug("updateSizeOptions");
}

$(document).ready(function(){
    var jGrid = $("#list_main");
....

WHY ?

Answer 1

Because in Javascript, functions declared within other functions are local references, and are not visible outside the scope of their parent function. If you want to make your updateSizeOptions function globally accessible, you will need to assign a reference to it in a global namespace, say a window property:

window.updateSizeOptions = updateSizeOptions;