CODEWITHSUNDEEP
jqueryajaxdynamichyperlink
daGUY
daGUY

Reputation: 28743

Prevent other links from working during AJAX call

I have a page with multiple links that each perform different AJAX calls and then dynamically insert some data in another area of the page. When the user clicks on any one of these links, I want to disable all the others until the data from the call comes back, so they can't make multiple requests at once.

The links are all located in the same <div>, so I can easily target just all of those without touching other "regular" links elsewhere on the page.

What would be the best way to do this?

Upvotes: 2

Views: 1801

Answers (4)

csharpnumpty
csharpnumpty

Reputation: 3723

How about preventing the default behaviour on links that have class B, when something of class A is clicked?

HTML: 

<a href="1" class="linkTypeA">Link</a>
<a href="2" class="linkTypeB">Link 2</a>
<a href="3" class="linkTypeB">Link 3</a>

Script:

$(document).on("click", "a.linkTypeA", function() {
   $('.linkTypeB').click(function(e) { e.preventDefault(); });
})

You'll need to unbind the click event on linkTypeA when you want to allow clicks on linkTypeB to start working again.

$("a").unbind("click");

If you didn't want to use classes, you could check the source element of the click and prevent the default behaviour on all tags other than the source element.

Upvotes: 2

Maciej
Maciej

Reputation: 7961

One of the ways to do this is to display a translucent image with high z-index. Image can cover your div. This way all is still visible but non-clickable.

Upvotes: 2

Elen
Elen

Reputation: 2343

you could use prevent default while ajax is running, say on beforeSend:

$("a")
.click(function(event){

event.preventDefault();
});

Upvotes: 0

Yichz
Yichz

Reputation: 9671

I think the easiest way is whenever click a link, create a big div on top the page and showing a loading icon, so user can click anything below that div. and then hide the loading div after ajax call ends.

you can use already made loading plugins like jquery showloading

just have to do 

$("#id_div_to_disable").showLoading();

and after ajax call

$("#id_div_to_disable").hideLoading();

it also has other features

Upvotes: 0

Related Questions