How to change attribute href after click on link and load page JQUERY (Wordpress)?

Question

I try to change the URL link ( href attribute) when I click on a URL after following link and loading page. I tried this:

<a href="http://example.com/ASC/" class="sort_loading_country">link</a>

jQuery( ".sort_loading_country" ).click(function() {
    str = jQuery(".sort_loading_country").attr("href") ;
    if ((str.indexOf('ASC') + 1) > 0) {
        new_str = str.replace(/ASC/g, "DESC");    
        jQuery(".sort_loading_country").attr("href", new_str);
    }
});

This changes the URL, but after clicking on the link open new page with new url. I want change the URL after opening page and following the link. I tried this too:

jQuery(".sort_loading_country").click(function() {
    str = jQuery(".sort_loading_country").attr("href");

    jQuery(document).ready(function() {
        if ((str.indexOf('ASC') + 1) > 0) {
            new_str = str.replace(/ASC/g, "DESC");
            jQuery(".sort_loading_country").attr("href", new_str);
        }
    });

The same behavior, click on the link - then open new page with new url. I want that when I click on the link open page with old url and after that change url to new in href. Am I missing anything ? Anybody knows how to change attribute href after loading page with old URL ?

Answer 1

The main error being (as mentioned in comment), the $(document).ready() needs to wrap all jQuery code.

Working jsFiddle

NB: I have substituted jQuery reference to $ in that jsFiddle. You can use either

Answer 2

Yeah - so the onclick function is being called before the link is followed, so you're changing the URL and then that URL is being followed. What you need to do is delay the execution of your code such that it happens AFTER the URL is followed.

You can do this by using the setTimeout method like so:

jQuery( ".sort_loading_country" ).click(function() {
    setTimeout(function() {
        str = jQuery(".sort_loading_country").attr("href") ;
        if ((str.indexOf('ASC') + 1) > 0) {
            new_str = str.replace(/ASC/g, "DESC");    
            jQuery(".sort_loading_country").attr("href", new_str);
        }
    }, 1);
});

This will delay execution of your code until after the link is followed.

Answer 3

Similar to above, the first click will be /ASC/ and if you click it again it will be /DESC/.

 jQuery( ".sort_loading_country" ).click(function() { console.log($(this).attr("href")); setTimeout(function() { str = jQuery(".sort_loading_country").attr("href") ; if ((str.indexOf('ASC') + 1) > 0) { new_str = str.replace(/ASC/g, "DESC"); jQuery(".sort_loading_country").attr("href", new_str); } }, 1); return false; }); 

Answer 4

So you need to work with storage like if user has clicked the link and whenever he comes back it will directly change the href .

<a href="https://example.com/ASC/" class="sort_loading_country">link</a>

if(localStorage.getItem("url", "DESC")){
    str = jQuery(".sort_loading_country").attr("href");

    jQuery(document).ready(function() {
        if ((str.indexOf('ASC') + 1) > 0) {
            new_str = str.replace(/ASC/g, "DESC");
            jQuery(".sort_loading_country").attr("href", new_str);
        }
    });
}
jQuery(".sort_loading_country").click(function() {
    localStorage.setItem("url", "DESC");
    alert(jQuery(".sort_loading_country").attr("href"))
});

JsFiddle URL

https://jsfiddle.net/8f8dL72v/