Change hard coded JS variable value

Question

I am using a 3rd party app and they have a JS variable hard coded into their HTML that I need to change / update with Javascript OR jQuery, both are available to use.

The 3rd party app has variables hard coded into the page:

<script type="text/javascript" charset="utf-8">
var order_poNumber = "";
</script>

Which gets updated when a user selects a value from a dropdown (my dropdown, not 3rd party):

<script type="text/javascript" charset="utf-8">
var order_poNumber = "32380080-64060";
</script>

But the issue is that the value sticks for some reason. If you go to another page and come back (not using the back button, but by going to a different page then clicking a link to return to the order page where this issue is happening) the value is still set to 32380080-64060 but I need it to be blank as it originally was.

I've tried:

function resetPO(){
    order_poNumber = "";
}
window.onload = resetPO();

And a few other variations of that, but it won't work.

I have to do the JS from an external JS file BTW.

Any ideas?

I am looking for a way to overwrite the value that is stored in the variable order_poNumber in the JS script block that is hard coded in the HTML. Ideally I want some kind of late or even delayed JS to come in and overwrite the value once the page has loaded. There are a lot of steps in how that number gets there once selected from the dropdown (AJAX, ActiveX, JS, jQuery, and a mix of 3rd party app and my own codes and functions) which took a lot of work to get working properly so I don't want to mess with all of that anymore.

The only reason I can imagine the value sticks is that it's being stored in a cookie. You would need to verify this, and if so, you'd need to write a script to purge the value from the cookie. — trnelson, Oct 31 '14 at 16:50
How are you "coming back"? If you are using the browser's _back_ button, the `window.onload` may not always be fired. Have a look at [this question](http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button) — Aleks G, Oct 31 '14 at 16:52
Similar to what @trnelson said, that value could also be cached and reset from `sessionStorage` (or, less appropriately in this case, `localStorage`). — Troy Gizzi, Oct 31 '14 at 16:53
Its not a cookie - the back button returns to the page in the previous set state. This is not a bug. Your select box will still contain the same value, so the page acts like nothing has changed. I don't see the problem as the back button is _none of your business_ (unless you build a one-page app with changing location (using history.push(), but then you wouldn't have this issue to begin with)). — somethinghere, Oct 31 '14 at 16:55
I think we are going to need some more information on how the dropdown is instantiated and how it updates the field. Would it be possible to write up a jsfiddle demonstrating this issue? — , Oct 31 '14 at 16:55
Somethinghere is right. If you are using the back button then you are not actually having a post back. — Anuj Yadav, Oct 31 '14 at 16:56
Thanks for all the comments guys! @AleksG I updated the question a bit. I'm not using the back button. Im going from cart (where this issue is) clicking another link, then click the link to return to cart. — Brett, Oct 31 '14 at 17:39
Is that value actually being printed on the page, meaning it's rendered from the server? — Evan Davis, Oct 31 '14 at 17:41
@trnelson I tried deleting any associated cookies and it made no change, so not a cookie issue. — Brett, Oct 31 '14 at 17:46
Otherwise is could always be a $_SESSION variable stored somewhere... If you use PHP. Just sayin' — somethinghere, Oct 31 '14 at 17:48
@somethinghere the app uses asp not php. The variable that holds the number is a JS variable. — Brett, Oct 31 '14 at 17:49
have you tried using the same code that populates the number to begin with to populate it with an empty string after the page loads (perhaps in the footer)? Rather than making another function like you have shown already doesn't work. — KnightHawk, Oct 31 '14 at 18:16
Thank you everyone for your help, but I've found that getting the variable order_poNumber changed does not have the effect I need it to. — Brett, Nov 04 '14 at 15:01

score 2 · Answer 1 · answered Oct 31 '14 at 17:01

2

The browser back button works differently than an initial page load. You can use jquery-address to add a listener to page changes (including ones from navigational arrows):

$.address.change(function(e) {
    resetPO();
});

http://github.com/asual/jquery-address

answered Oct 31 '14 at 17:01

Phillip Schmidt

8,805
3
43
67

Thanks for the suggestion but it's looking like even getting the variable order_poNumber to change does not fix the issue I'm having like I thought it would. – Brett Nov 04 '14 at 15:00

score 1 · Accepted Answer · answered Nov 04 '14 at 09:34

Heres something I would try, just to see if it could work. We'll ask the browser to keep resetting the value until its actually reset. It does need to be executed after any script that sets the value in the first place, so maybe jQuery's ready() function is more useful than window.onload (which may already be in use by something else). Don't forget to put it before the ending </body> tag to make sure its the last thing being executed or loaded.

window.onload = function(){
    var resetValueInterval = setInterval(function(){
        order_poNumber = "";
        if(order_poNumber == ""){
           clearInterval(resetValueInterval);
        }
    },100);
}

You could also, instead of checking if it is set, stop checking when the value gets set. This could be never and use a lot more resources, but its always worth a try. Of course, if you reduce the amount of time between each iteration it becomes more reasonable. Not the most elegant way around the problem, but it might work.

window.onload = function(){
    var resetValueInterval = setInterval(function(){
        order_poNumber = "";
    },100);
    document.getElementById(/* order_poNumber-dropdown-id */).addEventListener("mousedown", function(){
        clearInterval(resetValueInterval);
    }, false);
}

Thanks for the suggestions. I tried them out but no luck. After trying numerous things I've determined that resetting/changing the order_poNumber does not do what I need it to do even when it does end up being changed. — Brett, Nov 04 '14 at 14:58
Answer accepted because it was most helpful, some of the things suggested helped me realize that changing the variable doesn't have the effect I expected. — Brett, Nov 04 '14 at 15:02

Change hard coded JS variable value

2 Answers2