CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Mumzee
Mumzee

Reputation: 788

How to stop a div loading an HTML page

The remove() on id main is called from clicking another external button. The problem is if the user clicks btn1 and quickly presses that external button, the remove is getting called before the event handler for btn1. As a result of which the popup is loaded after the div has been removed. Is there a way by which the load request can be stopped when event handler for remove is clicked? I tried with jqXHR.abort() when remove method is called,but that doesn't work because the remove is called before the ajax is even sent.

There are many buttons like btn1 which will send ajax requests to load HTML and Few HTMlL files for e.g a.html will load some script files like a.js, which will be executed. And if the script refers to some variable which was deleted in remove(), there will be a TypeError.

<div id="base">
    <div id="main">
        <!-- some more HTML elements -->
        <button id="btn1"></button>
    </div>
    <div id ="popup">
    </div>
</div>

<script>  
    var xhr;      
    $("#btn1").on("click", function(){
        xhr = $.ajax(
        url: "a.html",
        success: function(){
             //do something
        }),
        type: "GET"
    });

    $("#main").on("remove", function(){
       // delete all resources,etc.
       xhr.abort();
    });
</script>

Upvotes: 6

Views: 2241

Answers (2)

Ricky Jiao
Ricky Jiao

Reputation: 529

As the xhr is async, so we cannot guarantee the xhr is finished before #main.remove method. Maybe you could use a flag to control this.

var isRemoved = false, xhr;
$("#btn1").on("click", function(){
    if(isRemoved) return;
    xhr = $.ajax({
      url: "a.html",
      success: function(){
           //do something
        if(isRemoved) return;
      },
      type: "GET"
   });
 });

$("#main").on("remove", function(){
   isRemoved = true;
   xhr && xhr.abort();
});

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Try using a global variable

var removed = 0;
$('externabutton').click(function(){
  $("#main").remove();
   removed = 1;
});
 $("#btn1").on("click", function(){
        xhr = $.ajax(
        url: "a.html",
        success: function(data){
             if (removed == 0 ) {
              //append the data
             } else {removed ==0;}
        }),
        type: "GET"
    });

Upvotes: 1

Related Questions