JQuery event handler when select element is loaded

Question

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 e

Answer 1

Why dont you just use:

$(document).ready(function () {
   //Loaded...
});

Or am I missing something?

Answer 2

Do you want all Selects to be checked when the User-Select is loaded, or just the User-Select?...

$.post("./user_functions.php", {reason: "get_users", userID: uID}).done(function(data) {  
    $("#userSelector").html(data);
    //Then this:
    var currentSelectVal = $("#userSelector").val();
    alert(currentSelectVal);
});

Answer 3

For your dynamic selects you can put the alert in the callback.

In your .post() callback function, try this:

.done(function(data) {
    data = $(data);
    alert(data.find("select").val());
});

Answer 4

If your select elements are dynamically loaded, why not add the event handler after you process the response?

e.g. for ajax

$.ajax({
  ...
  success: function(response) {
   //do stuff 
   //add the select elements from response to the DOM 
   //addMyEventHandlerForNewSelect();

   //or

   //select the new select elements from response
   //add event handling on selected new elements
  },
  ...
});

Answer 5

Ok, correct me if I understand this wrong. So you want to do something with the selects when the document is loaded and also after you get some fresh data via an ajax call. Here is how you could accomplish this.

First do it when the document loads, so,

<script>
//This is the function that does what you want to do with the select lists
function alterSelects(){
 //Your code here
}
  $(function(){
      $("select").each(function(){
           alterSelects();
      });
  });
</script>

Now everytime you have an ajax request the ajaxSend and ajaxComplete functions are called. So, add this after the above:

$(document).ajaxSend(function () {
}).ajaxComplete(function () {
    alterSelects();
});

The above code will fire as soon as the request is complete. But I think you probably want to do it after you do something with the results you get back from the ajax call. You'll have to do it in your $.post like this:

$.post("yourLink", "parameters to send", function(result){
    // Do your stuff here
    alterSelects();
});

Answer 6

My solution is a little similar to the posters above but to use the observer (pubsub) pattern. You can google for various pub sub libraries out there or you could use jQuery's custom events. The idea is to subscribe to a topic / custom event and run the function that attach the event. Of course, it will be best to filter out those elements that have been initialize before. I havent test the following codes but hopefully you get the idea.

function attachEventsToSelect(html) {
    if (!html) { // html is undefined, we loop through the entire DOM we have currently
        $('select').doSomething();
    } else {
        $(html).find('select').doSomething(); // Only apply to the newly added HTML DOM
    }
}

$(window).on('HTML.Inserted', attachEventsToSelect);

// On your ajax call
$.ajax({
    success: function(htmlResponse) {
        $(window).trigger('HTML.Inserted', htmlResponse);
    }
});

// On your DOM ready event
$(function() {
    $(window).trigger('HTML.Inserted'); // For the current set of HTML
});