Question: I have a dynamic website with a lot of AJAX and jQuery loading in different modules to different containers.

For the purpose of my question, consider that I have 3 buttons and one container. Clicking button A loads `a.php` into the container using jQuery 

```
$('.container').load('a.php');

```

Now consider that module `b.php` is a module that takes about 3-4 seconds to load because it's grabbing content from another website and parsing it. 
When I click button B to load module `b.php`, but then quickly click button A again to load module `a.php`, my problem occurs: module `a.php` quickly loads in the container, but the loading of module `b.php` was still in progress, therefore, after another second or 2-3, module `b.php` loads into the container, even though the user last clicked button A.

So here's my question: how can I stop the loading of module `b.php` if a user clicks another button. 

Note: as a work-around I've thought of disabling the buttons until the loading of each module has completed. It does prevent the issue, but it's not the desired end result. 

EDIT: So I've seen this: [Aborting jQuery().load()](https://stackoverflow.com/questions/3002668/aborting-jquery-load) and yes, I can get it working using AJAX. Thanks to everyone who suggested this. I'm hoping to find an answer that actually works with load() but haven't found one that works yet.

Answer: 
By using beforeSend, You can abort first ajax request before sending next ajax request , see example

```
<button onclick="onClickBtnA()">A</button>
<button onclick="onClickBtnB()">B</button>

```

In your jQuery

```
var currentRequest = null; 

function onClickBtnA(){
    currentRequest = $.ajax({
        url: 'AJAX_URL_1',
        beforeSend : function() {           
            if(currentRequest != null) {
                currentRequest.abort();
            }
        },
        success: function(data) {
            //do something
        }
    });
}

function onClickBtnB(){
    currentRequest = $.ajax({
        url: 'AJAX_URL_2',
        beforeSend : function()    {           
            if(currentRequest != null) {
                currentRequest.abort();
            }
        },
        success: function(data) {
            //do something
        }
    });
}

```
If you want to stick with using `load`, rather than doing an `ajax` request as has been suggested, you could load into a hidden div, then use `load`'s callback option to decide whether or not to copy from the hidden div into a visible component.