Consider the scope of your JavaScript object variables when writing custom 4D Ajax Framework code.

Sometimes scoping object variables at the top level of the JavaScript scope instead of inside of any particular function makes it easier to work with the objects later on in other parts of the code.

Consider the following JavaScript code:

function dax_loginSuccess() {   var myGrid = new dax_dataGrid('myTable', $('myDiv'),1,0,false); } function saveHandler(http_response, passedVariable) {   if (http_response.readyState != 4){     return;   }else{     myGrid.newQuery();     myGrid.addQuery('order number','=',$('detailForm')[3].value);     myGrid.runQuery();   } }

In the above JavaScript example, the object myGrid is declared and created in the dax_loginSuccess function. Then later on in the code, the saveHandler function attempts to reference and modify that object. This will not work in the example above due to the scope of the objects.

To fix this, consider either placing the handler function inside of dax_LoginSuccess or declaring the myGrid object at the top level of the scope. Examples of these two strategies are shown below:

---

Placing the handler function inside of the dax_loginSuccess function

function dax_loginSuccess() {   var myGrid = new dax_dataGrid('myTable', $('myDiv'),1,0,false);   function saveHandler(http_response, passedVariable) {     if (http_response.readyState != 4){       return;     }else{       myGrid.newQuery();       myGrid.addQuery('order number','=',$('detailForm')[3].value);       myGrid.runQuery();     }   } }

In the JavaScript example above the myGrid object is declared inside of the dax_loginSuccess function. In this way, the myGrid object that is declared and used inside of the dax_loginSuccess function will only be available to other functions and code that are also scoped inside of the dax_loginSuccess function. In order to have this object available to our handler function we must also scope the handler method inside of the dax_loginSuccess function.

---

Declaring the object at the top level

var myGrid = new Object(); function dax_loginSuccess() {   myGrid = new dax_dataGrid('myTable', $('myDiv'),1,0,false); } function saveHandler(http_response, passedVariable) {   if (http_response.readyState != 4){     return;   }else{     myGrid.newQuery();     myGrid.addQuery('order number','=',$('detailForm')[3].value);     myGrid.runQuery();   } }

In the JavaScript example above the myGrid object is declared as an object at the top level of the scope, outside of any functions. This allows all functions to use that same object. In this way, the dax_loginSuccess function will be modifing the object that already exists in the scope. Later on, when the handler is used, the same object is available in the scope.