Jquery returns old value for an element on refresh

Question

There is an html as follows:

<input id="currency_factor" type="text" style="display:none;" value="20"/>

And there is a jquery function:

$(document).ready(function(){
     var currency_factor = $('#currency_factor').val()
     alert(currency_factor);
 }

Upon refresh the html line shows on the browser as:

<input id="currency_factor" type="text" style="display:none;" value="0"/>

But jquery returns 20.

Why is this happening?

Try `alert($('#currency_factor').val())` rather than use variable to save the value, does it work? — Yin Gang, May 10 '16 at 04:05
@guradio Yes, it alerts 20. But on the browser when I check it with inspect element, the value shows as 0. — Shruti, May 10 '16 at 04:09
It might be changed after `DOM` load. Place a `debugger` before `var currency_factor` and check the value of `$('#currency_factor').val()` — Guruprasad J Rao, May 10 '16 at 04:10
_"Upon refresh the html line shows on the browser as: `` But jquery returns 20."_ The original `html` appears to have `value` set at `20` _"There is an html as follows: ``"_ What is expected result? — guest271314, May 10 '16 at 04:11
@rumman0786 Yes, when I run the code in incognito mode i.e when caching is disabled, it returns the correct value i.e 0. My question is how I can fix it with caching. — Shruti, May 10 '16 at 04:11
@guest271314 Upon reload I want the new value i.e 0 to be returned by the jquery but instead I the value is returned. On the basis, of the returned value some tasks have to be formed. — Shruti, May 10 '16 at 04:22
@Shruti Are you trying to set `value` of original `html` `` to `0`, then at page reload set `value` to `0` ?, That is, the `value` that was set before page reload should be set after page reload? — guest271314, May 10 '16 at 04:24
@Shruti try [this](http://stackoverflow.com/questions/118884/how-to-force-browser-to-reload-cached-css-js-files) or [this](http://stackoverflow.com/questions/7413234/how-to-prevent-caching-of-my-javascript-file) links — rumman0786, May 10 '16 at 04:28
@guest271314 This is the html snippet that gets populated on page load - `.` The value of this input element is correctly set as 0 but jquery is returning the previous set value. — Shruti, May 10 '16 at 04:29
@Shruti What is value of `{{currency_factor}}` ? What do you mean by _"There is an html as follows: ``"_ ? Is `20` `value` set at original `html` ? _"The value of this input element is correctly set as 0 but jquery is returning the previous set value."_ Can you create a stacksnippets or jsfiddle http://jsfiddle.net to demonstrate? Still not certain what expected result is? Do you expect dynamically set `value` of `input` element to retain the dynamically set `value` after page reload? — guest271314, May 10 '16 at 04:32

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

Try adding this to the header of your html file to disable caching:

<meta http-equiv="Cache-Control" content="no-store" />

There are actually a number of cache control tags that may or may not be needed, depending on the browsers being used. Here's another posting on StackOverflow that lists some of them: Using <meta> tags to turn off caching in all browsers?

edited May 23 '17 at 12:07

Community

1
1

answered May 10 '16 at 04:14

jdigital

11,926
4
34
51

Actually, the snippet is a part of larger project . So I cannot disable caching for the entire page. – Shruti May 10 '16 at 04:17
As your experiments show, the problem appears to be due to caching. When you disable the cache or use the browser's debugging tools, you get the proper result. If you can't disable caching, then perhaps you can use an XHR call (Web API) to retrieve the value and insert it into the page. This will also allow you to update the one field (or however many fields you want) without reloading the whole page. – jdigital May 10 '16 at 04:32
Thanks, I will try using XHR. – Shruti May 10 '16 at 04:39

score 0 · Answer 2 · answered May 10 '16 at 04:22

0

Try by first initializing it and then setting it

$(document).ready(function(){
     var currency_factor = 0;
     currency_factor = $('#currency_factor').val()
     alert(currency_factor);
 }

answered May 10 '16 at 04:22

brk

48,835
10
56
78

can you please try by refreshing the browser by pressing Ctrl +F5 – brk May 10 '16 at 04:25

score 0 · Answer 3 · answered May 10 '16 at 05:53

Do you perhaps have more than one element with an id of currency_factor. The first one's value will probably be returned.

Another possibility is that the value is changed after the $(document).ready() function has executed. Try running $('#currency_factor').val() in the browser console after load. If it returns 0 then it was changed after the page load.

Jquery returns old value for an element on refresh

3 Answers3