CODEWITHSUNDEEP
javascriptjqueryajaxmagento
André Ferraz
André Ferraz

Reputation: 1521

preventDefault of a link depending on the Ajax response

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.

Upvotes: 0

Views: 1122

Answers (1)

Jameson the dog
Jameson the dog

Reputation: 1806

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>

Upvotes: 1

Related Questions