html loads a new page before the jquery finishes the execution

Question

I want to change the value of variable in jquery when the anchor html tag with link is clicked , this tag also loads new page but when I click on that anchor tag new page is loaded but the variable value is not changed.

I looked on the internet and I found that this is due to asynchronous nature of jquery.

here is my code:-


var req;
$(document).ready(function(){
    $('header').load("navbar.html");
    $('footer').load("footer.html");
    $('#veg-caterer').click(function(){
        req = "c1";
    });
});

in the above code the new html page is loaded when i click on #veg-caterer before changing the value of req

I am checking the value of req on other page using alert and it shows undefined here is code :-

$(document).ready(function(){
    alert(req);
});

I have tried using URL get parameters , setTimeout but there is also I am facing same problems.I know its basic but I am bit new to jquery and js. Please explain your answers

My main motive is to pass the value to other js file when that anchor tag with link is clicked

anchor tags don't load new pages. They scroll to position in existing page. So maybe you have other functionality going on. Regarding your variable change, you could try onmousedown rather than click so it executes before completed click. you could do event.stopPropagation() or event.preventDefault() — Steve Tomlin, Oct 03 '20 at 06:41
Actually you are right. I stand corrected. Its just the term 'anchor' is not often used so is sometimes thought of as anchor to existing page. — Steve Tomlin, Oct 03 '20 at 06:58
for your example use mousedown in place of click. or if you don't want page to refresh, evt.preventDefault() — Steve Tomlin, Oct 03 '20 at 06:59
I guess that the variable is still set, but because of the new page load it doesn't matter. When leaving a page all the variables get deleted. You will want to use query parameters or persistent storage (cookies, sessionStorage, ...). See this question for more details on saving across pages: https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads — A_A, Oct 03 '20 at 07:00
Or, as @SteveTomlin suggested. If you don't need to change the page you can use `preventDefault` to stay on the same page. — A_A, Oct 03 '20 at 07:02
I want to leave that page and I am setting that variable as global variable so I don't think that this variable will be deleted. — Tushar Sureka, Oct 03 '20 at 07:10
It doesn't matter if it is global or not. This is only relevant for the scope within the same page. If you leave the page everything will be reloaded, except for persistent storage (which is helpful, so different pages doesn't accidentally influence each other) — A_A, Oct 03 '20 at 07:17
after all these i am using localstorage, will it be good solution to use that interms of efficiency and security ?? @A_A . — Tushar Sureka, Oct 03 '20 at 12:25
Efficiency should be fine (especially when compared to a page loading time it's negligible). Security probably depends on what your attack vector is. iirc every site on the same domain has access to it, but if you are interested in it just search for it on SO or google — A_A, Oct 03 '20 at 16:01

score 1 · Answer 1 · answered Oct 03 '20 at 07:01

1

You can do a preventDefault on the click event, and then manually set the location of the page after you have set the value of req

$('#veg-caterer').click(function(e){
    e.preventDefault();
    req = "c1";
    window.location = e.currentTarget.getAttribute('href');
});

answered Oct 03 '20 at 07:01

Anish

327
3
8

If you need to pass the value to a new page, you need to use query params or persistent storage, as mentioned [here](https://stackoverflow.com/questions/64181411/html-loads-a-new-page-before-the-jquery-finishes-the-execution/64181578?noredirect=1#comment113494844_64181411) – Anish Oct 03 '20 at 07:13
after all these i am using localstorage, will it be good solution to use that interms of efficiency and security ?? – Tushar Sureka Oct 03 '20 at 12:29

html loads a new page before the jquery finishes the execution

1 Answers1