$('#textboxId').val() 返回旧值（浏览器缓存问题）

Question

I can't figure this out despite spending hours. I have a simple dynamically created page (a vbhtml that is loaded using a controller) with two text boxes.

There is a save button on the page. This button invokes an in-page Javascript function. In the function I have these lines:

function saveData()
{
var lDescr = $('#FundNote').val();  // FundNote is the id of a textbox
var DocUrl = $('#DocUrl').val();  // DocUrl is the id of another textbox
alert(lDescr);
alert(DocUrl);
  //ajax call to a controller
}

The issue is that every time this page displayed, these variables continue returning the same values as entered the very first time. If I clean browser cache, the newly entered values are returned but then it keeps returning the same values until the browser cache is cleaned again. Every time this page is displayed, the text boxes are empty and user enters values, so the page itself is not being holding up the values.

Any pointers?

UPDATE

After spending days, this is how I fixed it (temporarily).

It appears that even though the controller is sending the updated html and was displayed ok on the browser (the html includes a dropdown box, which is dynamically filled with different values. Everytime the values are different but in javascript, old values are being returned (for example, old value of the select option, the value did not even included in the current rendering of the html). Still no idea why this is happening. There are other similar pages in the solution and they work fine.).

Anyway, what I did (for now to make it working), I added a RandonNo() property in the class that dynamically creates this html (via a controller and a vbhtml file). Then in the vbhtml, I appended this randon number to all html component ids. I also passed the same number to the javascript " Save() " function like this OnClick="Save('@Model.RandonNo') . In the Save method, then I changed $('#idOption') to $('#idOption-'+ randomno) . It seems to be working because the ids are different everytime.

Answer 1

I know this is an old question, but I felt it needed a solution, as jQuery is still doing this. I had been having a very similar issue, but was able to finally find a work-around. The problem seems to be in .val( ). For some reason, jQuery wants to automatically fill inputs from cache when it is used to get/set inputs. In my situation, I was doing something like this:

HTML File:

<form ...>
    <input type="hidden" name="my_value" value="X" />
</form>

JS File:

$( document ).ajaxSuccess( function ( event, jqxhr, settings, data ) {
    if ( settings.dataType == 'json' && data && data.my_value ) {
        $( 'input[name="my_value"]' ).val( data.my_value );
    }
} );

If I refreshed the page without clearing the cache, the inputs would be automatically overwritten with a cached value from an AJAX request on the initial page request even if they were already filled with the value in the server response. To solve the problem, I changed .val( ... ) to .attr( 'value', ... ), so the line:

$( 'input[name="my_value"]' ).val( data.my_value );

became

$( 'input[name="my_value"]' ).attr( 'value', data.my_value );

So I think what you would need to do here to fix your issue is to simply change:

var lDescr = $('#FundNote').val();  // FundNote is the id of a textbox
var DocUrl = $('#DocUrl').val();  // DocUrl is the id of another textbox

to

var lDescr = $('#FundNote').attr( 'value' );  // FundNote is the id of a textbox
var DocUrl = $('#DocUrl').attr( 'value' );  // DocUrl is the id of another textbox

I'm not sure if this is jQuery itself or a plugin for it causing this, but it is really strange. It just seems that if you use .val( ) at any point to get/set a value from/to an input, you'll cause your inputs' values to be corrupted with a cached value if you refresh or visit the page again later. This corruption doesn't seem to happen when .val( ) is called, but rather when the document is loaded.

To summarize, a call to .val( ) for get/set on inputs causes the value returned/set to be cached during the initial page request. Future requests will have the inputs' values corrupted after document load with the value returned/set during the initial request until you clear the browser cache.

Answer 2

Sometimes the browser caches form input values so if you return to the page you need not re-type stuff. To disable it, set <form ... autocomplete="off"> . This will block the form re-loading what the user typed last time on page load.

It sounds like this isn't your concern, but rather your concern is the text in the input isn't what's return from .val() . If that's the case, show some code, and let's dig in.

Answer 3

Don't cache the value (.val()), cache the jQuery object:

function saveData() {
var lDescr = $('#FundNote');  // FundNote is the id of a textbox
var DocUrl = $('#DocUrl');  // DocUrl is the id of another textbox
    alert( lDescr.val() );
    alert( DocUrl.val() );
  //ajax call to a controller
}

Answer 4

I had the same issue, after some tries, I discovered an alternative that works for me...

$("#id").valueOf().valueOf().valueOf().val();

Could look some "weird" solution, but it works!

Answer 5

我遇到了同样的问题，我用attr("value")切换了val() attr("value")来修复它。