function declared inside document.ready is undefined?

function, jqgrid, jquery, scope

Solution

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;

Problem

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 ?

Original source