How To Change Value of Input Button after it loads up in DOM using jQuery

I have this telerik button with class name ruButton & ruBrowse, that loads up a 开发者_StackOverflowlittle 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 ?

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.

Exactly how 'late' is it loaded into to DOM? And how it is loaded?

This is a long shot, and even if it solves it, won't be the best solution, but:

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

EDIT:

Seeing that you updated your question, could you try the following...

Alter your mark-up, like so:

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

I will assume the button type is a Telerik thing, and leave it as is.

Now, adjust your jQuery slightly (I noticed no space between the class names in the selector, which would seem to be an issue):

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

I just thought of another solution, one that is solid even if you don't know how long it will take for the buttons to load (turns out the 1-millisecond timer that worked for you probably really was just a guess). You just have to run a timer over and over to check if they are all loaded, like so:

var wait_for_telerik_buttons = function() {
    if ($("input[type='button']").length === $('ruButton.ruBrowse').length) {
        $(".ruButton.ruBrowse").attr('value', 'Browse');
    } else {
        setTimeout(wait_for_telerik_buttons, 100);
    }
};
setTimeout(wait_for_telerik_buttons, 20);

Can't say it's the most efficient method, but if your first guess is good (20 milliseconds in the example above) then it will usually catch it the first time around. But there is a 100-ms timer loop in case the guess was bad in any particular instance. Race condition solved.

Telerik File Upload Button Value can be changed by using Telerik's localization support itself. I had to use javascript to hack in before I was aware of this.

<telerik:RadUpload ID="RadUpload" runat="server" TargetFolder="..\..\Upload" MaxFileInputsCount="1">
                 <Localization Select="Browse" />
            </telerik:RadUpload>

The Locatlization Select = Browse does the job the right way. Had this option not been available the Javascript work arounds help.

You can also use this

$(document).ready( $(".ruButton.ruBrowse").val('Browse'); );