preventDefault of a link depending on the Ajax response

Question

I've created a controller in Magento which check whether or not there are products in a list. If there are products in list it will return true otherwise false.

Here is the front-end which triggers the ajax call, bare in mind I can not change this to be a form. It has to be a link.

<a href="[my_controller]" title="Compare Products" target="_blank" class="compare-product-link">Compare Products</a>

Here is the ajax call.

jQuery(".compare-product-link").on("click", function(e) {
    jQuery.ajax({
        async    : false,
        dataType : "json",
        url      : "/compareextra/compare/allowed",
        success  : function(data) {
            //console.log(data);
            if(data.isAllowed != true) {
                e.preventDefault();
            }
        }
    });
});

The problem I have is that the async is deprecated and is not good for user experience, saying that there are many answer out there which add a delay of 3 seconds, I also don't want that because thats not good for user experience.

I've also tried using a promise call but it only works with async : false.

jQuery(".compare-product-link").on("click", function(e) {
        var response = false;
        jQuery.ajax({
            dataType : "json",
            url      : "/compareextra/compare/allowed",
            success  : function(data) {
                console.log(data);
                if(data.isAllowed) {
                    response = true;
                }
            }
        }).done(function (){
            console.log(response);
            if(response != true) {
                e.preventDefault();
            }
        });
    });

EDIT

Another problem I also have is if I store the link into a variable and then open a new window as so window.location = href; most browser will block it and users will have to manually accept pop ups from the target site, which again is not good for user experience.

May not be the source of your issue, but I think you are mixing old and new forms of ajax in the .success() and .done() callbacks. There is a decent explanation of ajax / promises / deferreds at this link: http://tutorials.jenkov.com/jquery/deferred-objects.html. — Vanquished Wombat, Dec 22 '16 at 11:00

Jameson the dog · Answer 1 · 2016-12-22T11:16:34.853

1

you cannot really achieve this using preventDefault like you said - because of async. what I would try is:

preventDefault

store href as a variable

call ajax

redirect to href variable if true and not if false

jQuery(".compare-product-link").on("click", function(e) {
    var href = $(this).attr('href');
    e.preventDefault();
    jQuery.ajax({
        async    : false,
        dataType : "json",
        url      : "/compareextra/compare/allowed",
        success  : function(data) {
            //console.log(data);
            if(data.isAllowed == true) {
               window.location = href;
            }
        }
    });
});

if you need to create a link action you can use this code:

function triggerClick(url){
  $('body').append('<span id="click_me_js"><a href="'+url+'"></a></span>');
  $('span#click_me_js a')[0].click();
  $('span#click_me_js').remove();
}

which will mimic a regular click on <a>

edited Dec 22 '16 at 11:16

answered Dec 22 '16 at 11:00

Jameson the dog

1,796
1
11
12

`window.location = href;`, and preventDefault(), reloading page makes is the difference.. I think. – Vikrant Dec 22 '16 at 11:02
@AndréFerraz, so you want to avoid delay in `async` call.. right? @Jamesonthedog , may be your answer can be modified in focus of the requirement – Vikrant Dec 22 '16 at 11:05
@Vikrant yes I don't want any kind of timeout – André Ferraz Dec 22 '16 at 11:06
@AndréFerraz, The article shared in comment below, your question... is it helping...? ( ≖.≖) – Vikrant Dec 22 '16 at 11:13
@Vikrant not at all, they still using timeout to achieve it. I really don't want to go that route. – André Ferraz Dec 22 '16 at 11:17
@AndréFerraz - I've added to my answer a function that mimics click on `` and so bypasses the JS popup block – Jameson the dog Dec 22 '16 at 11:17
@Vikrant - the only reference to timeout in the OP's request is that he doesn't want to use it. so unless I got it completely wrong (always an option) - my answer should do the trick within his limitations. :) – Jameson the dog Dec 22 '16 at 11:43
@Jamesonthedog the latest code you added does "simulate" a click however if you add the target="_blank" to the link the browser will block it because it because its not a genuine click. – André Ferraz Dec 22 '16 at 14:19
yes, in IE. I hate IE. have a look at this answer: http://stackoverflow.com/questions/2587677/avoid-browser-popup-blockers#25050893 you can "create" the new window when the click happens and set it's location according to the ajax response. another option is to get the validity check for all the links before hand (if possible) or use a redirect page and a server side check and redirect to the right page or to a "sorry" option (personally - this is what I would do) – Jameson the dog Dec 22 '16 at 14:57

preventDefault of a link depending on the Ajax response

1 Answers1