Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
130
rated 0 times [  133] [ 3]  / answers: 1 / hits: 45349  / 11 Years ago, tue, june 25, 2013, 12:00:00

Is there an event handler to use in JQuery when a DOM select element has finished loading?
This is what I want to achieve. It is working with other events except 'load'.



This piece of code is loaded in the head.



$(document).on('load', 'select', function(){
var currentSelectVal = $(this).val();
alert(currentSelectVal);
} );


The question was badly formed earlier. I need to attach the event handler to all select elements, both present when the document is loaded and dynamically created later.



They are loaded from a JQuery Post to a php-page. Similar to this:



$.post(./user_functions.php, 
{reason: get_users, userID: uID})
.done(function(data) { $(#userSelector).html(data);
});

More From » jquery

 Answers
7

I think we're all confused. But a quick break down of your options.

After an update made to the Question, it looks like the answer you might seek is my last example. Please consider all other information as well though, as it might help you determine a better process for your End Goal.



First, You have the DOM Load event as pointed out in another answer. This will trigger when the page is finished loading and should always be your first call in HEAD JavaScript. to learn more, please see this API Documentation.



Example



$(document).ready(function () {
alert($('select').val());
})
/* |OR| */
$(function() {
alert($('select').val());
})


Then you have Events you can attach to the Select Element, such as change, keyup, keydown, etc... The usual event bindings are on change and keyup as these 2 are the most common end events taking action in which the user expects change. To learn more please read about jQuery's .delegate() (out-dated ver 1.6 and below only), .on(), .change(), and .keyup().



Example



$(document).on('change keyup', 'select', function(e) {
var currentSelectVal = $(this).val();
alert(currentSelectVal);
})


Now delegating the change event to the document is not necessary, however, it can really save headache down the road. Delegating allow future Elements (stuff not loaded on DOM Load event), that meet the Selector qualifications (exp. 'select', '#elementID', or '.element-class') to automatically have these event methods assigned to them.



However, if you know this is not going to be an issue, then you can use event names as jQuery Element Object Methods with a little shorter code.



Example



$('select').change(function(e) {
var currentSelectVal = $(this).val();
alert(currentSelectVal);
})


On a final note, there is also the success and complete events that take place during some Ajax call. All jQuery Ajax methods have these 2 events in one way or another. These events allow you to perform action after the Ajax call is complete.



For example, if you wanted to get the value of a select box AFTER and Ajax call was made.



Example



$.ajax({
url: 'http://www.mysite.com/ajax.php',
succuess: function(data) {
alert($(select#MyID).val());
}
})
/* |OR| */
$.post(example.php, function() { alert(success); })
.done(function() { alert($(select#MyID).val()); })
/* |OR| */
$(#element).load(example.php, function(response, status, xhr) {
alert($(select#MyID).val());
});


More reading:





Something else to keep in mind, all jQuery Ajax methods (like .get, .post) are just shorthand versions of $.ajax({ /* options|callbacks */ })!


[#77425] Monday, June 24, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kaleyv

Total Points: 259
Total Questions: 99
Total Answers: 107

Location: Saint Helena
Member since Tue, Nov 3, 2020
4 Years ago
;