Accessing a JS variable from a different <script> block

Question

I need to access a js variable declared in one block of a html page into another block of the same html page just so I can stop a ajax call that is being made, but I don't know how can I access a variable that was declared into another block. I can't merge the two blocks, everything else is on the table.

<script>
    $(function() {
      var term = new Terminal('#input-line .cmdline', '#container output');
      term.init();
    });
</script>
<script>
       term.ajaxHandler.abort();//but how can I access the variable term from the block above,this will be inside a button later
</script>

Thanks in advance

Answer 1

The way your code example is described, it's not possible to reuse that variable. Because it is not bound to the window object, it's bound to the function that is self-executed. It's an example of a "safe" way of libraries not intervening with your own code.

You can however, since I guess by the syntax it's jQuery, hook into the jQuery ajax handling. Based on your requirements, to stop an ajax call, you need to listen to all ajax requests.

You could take a look at the jQuery ajax hooks, https://api.jquery.com/category/ajax/ .

You could end up with something like:

$(document).ajaxSend(function(event, xhr, settings){
   if (settings.url === "/your/url/to/abort") {
      xhr.abort();
   }
});

Answer 2

just declare var term above the function declaration

 var term function test1(){ term = 'hello there' test2() } function test2(){ console.log(term) } test1()

Answer 3

ok, I managed to solve, basically I created a function only to abort the ajax request like this:

  this.abortAjax = () => {
     requestHandler.abort();
  }

and then accessing it within terminal.js itself using the term object that was instantiated beforehand. After working around the code I was able to keep everything inside the terminal script and not splitted in the two parts, getting something like this:

   function ShowLoadingScreen () {
   var customElement = $("<div>", {
    "class" : "btn btn-danger btn-lg",
    "text"  : "Abort",
    "onclick": "term.abortAjax()"
   });

      $.LoadingOverlay("show", {
       //image       : "/static/loading.gif",
       background              : "rgba(204, 187, 0, 0.8)",
       imageAnimation          : "rotate_right",
       //imageAutoResize         : true,
       text        : "Loading...",
       custom      : customElement
       });
   }

   function request (command) {
   ...
   requestHandler = $.ajax({
      url: _url,
      beforeSend: function () { ShowLoadingScreen(); }, // <Show OverLay      
      type: 'GET',
      dataType: 'json',
      success: function (response) {
         ...
      },
      complete: function () { HideLoadingScreen(); } //<Hide Overlay
   }).fail(function (jqXHR, textStatus, error) {
       ...
   });
   ShowLoadingScreen();
   }

Thanks, everyone.