Question

I have this telerik button with class name ruButton & ruBrowse, that loads up a little late into the DOM.
I am trying to change the Value of the button at page Load.

The Code below does not work at page load, but does work if attached to another button click event.

$(document).ready(
function(){
$(".ruButton.ruBrowse").attr('value', 'Browse');
}
);

My HTML DOM of the button looks like this.

<INPUT class="ruButton ruBrowse" value=Select type=button>

How do I get this to work at Page Load ?

Answer 1

You wrote: “I have this telerik button with class name ruButton & ruBrowse, that loads up a little late into the DOM”.

If it loads late in the dom, the only surefire way to access it is to use its own supplied callback. If it doesn’t have a supplied callback, you have to guess. You can load it on a timer like this:

$(document).ready(function() {
    setTimeout(function() {
        $(".ruButton.ruBrowse").attr('value', 'Browse');
    }, 400);
});

[The above example it waits 400 milliseconds after dom load before trying to alter the button].

You also might want to consider using $(window).load(...) to wait for not just the dom, but the whole page to load.

But again, guessing is really hacky, will probably be wrong at least some of the time, and is certainly not good enough for production-quality code. If the library does not supply it’s own callback, hack the library or use a different one.