A scope question

JavaScript
1

I’m still trying to get my head around local and global scope in JavaScript

Take the following block of code:

$(document.forms.adminError).submit(function () {
        
        sessionStorage.removeItem("errorReport");

        var $errorReport, $message, $content, $result, $store, $thisFun;
        
        $store = window.sessionStorage;

        $message = [];

        $content = "";

        $errorReport = document.forms.adminError.errorReporting.checked;

        if ($errorReport) {

            //start the ajax
            $.ajax({
                //this is the php file that processes the data and send mail
                url: 'http://' + document.domain + '/pin*****-cms/inc/admin/error_reporting_yes.php',

                //GET method is used
                type: "GET",

                //pass the data        
                data: $content,

                dataType: "text",

                // data type
                // dataType: "html",
                //Do not cache the page
                cache: false,

                //success
                success: function ($result) {

                    if($result != "") {
                        
                        $message.push("\
 All errors will now be recorded in the errors.txt file");
                        
                        
                    }

                }// End success

            })


        } else {

            //start the ajax
            $.ajax({
                //this is the php file that processes the data and send mail
                url: 'http://' + document.domain + '/pin*****-cms/inc/admin/error_reporting_no.php',

                //GET method is used
                type: "GET",

                //pass the data        
                data: $content,

                dataType: "text",

                // data type
                // dataType: "html",
                //Do not cache the page
                cache: false,

                //success
                success: function ($result) {
                    
                    if($result != "") {
                     
                       $message.push("\
 No errors will be recorded in a file");

                    }
                  
                  }// End success

            })


        } // end if errorReport






   if ($message.length === 0) {

            alert($message);
            
        } else {

            null;

        }
        
        




        return false;

    });


}); // End document ready

Is there anyway can take the values from the AJAX functions and use them at the end of the code as I have written above?

I tried local storage but that didn’t work

2

Variable scope isn’t the problem, order of execution is. Simple code:

alert('Start!');
$.ajax({...stuff
  onsuccess: function() { alert('Success!'); }
});
alert('End!');

You assume that messages will appear in this order: Start! Success! End!
but they won’t.

$.ajax will request data from server and then continue with the rest of script. Data will be received later and event fired only after that. Messages in that code will appear in this order: Start! End! Success!

You should change your logic assuming that onsuccess or onerror events will be fired long after your function stopped executing. Apply it to variable scope too, your function won’t be running when event will be fired, so your function’s variables won’t exist.

3

Excellent response. Related to your scope question however, in a different situation where you are running into scope issues (which happens often in well-constructed object-oriented JS apps), you can use a closure. This allows you to avoid the drawbacks of global variables, but allowing a critical variable in a nested function to survive after it’s scope and function have expired. This is a good introduction.

JavaScript Closures 101- they’re not magic