CODEWITHSUNDEEP
jquery
Brian
Brian

Reputation: 27392

jQuery wait for all select options to load

I have a select box object and an ajax function is called OnChange using the selected value as an input. I also want to call the the same function when the select box is first loaded. I use jQuery .load, but the ajax function is called before any of the options are loaded and the input to my ajax function is undefined. Does anyone know how to get jQuery to wait for all the options to load before calling the function?

Thanks.

Edit - Adding Code I have found that a setTimeout() works pretty well to delay the function. However, I get nervous using setTimeout() because if the page loads slower than usual, it won't work. I tried replacing the timeout with $(document).ready as you suggested, but the function was still called before an option was selected and the input was undefined.

Here's the code:

<script type="text/JavaScript">    
    setTimeout('AjaxFunction($("#SelectID option:selected").val()));', 400);
</script>

<select id="SelectID" name="SelectName" onchange="AjaxFunction(this.value);">
<option value='Inland Empire'>Inland Empire</option>
<option value='San Bernardino'>San Bernardino</option>  
<option value='Riverside'>Riverside</option>
<option value='California'>California</option>  
</select>

Upvotes: 7

Views: 17292

Answers (6)

gnarf
gnarf

Reputation: 106352

You should consider removing the onchange= and using one of the below methods to bind the event / execute it:

<select id="SelectID" name="SelectName">
  <option value='Inland Empire'>Inland Empire</option>
  <option value='San Bernardino'>San Bernardino</option>  
  <option value='Riverside'>Riverside</option>
  <option value='California'>California</option>  
</select>

<script type="text/JavaScript">
    // placing the script after the select SHOULD ensure it executes after the 
    // select has been created
    $("#SelectID").change(function() {  // bind a change event:
      AjaxFunction($(this).val());
    }).change(); // and trigger a "change" event immediately

    // If you are using .load to bring #SelectID into existence, 
    // it would be much better to put the whole segment into the callback of
    // .load() as suggested by gaby

    $("#sometarget").load("/some-url-with-select-box", function() {
      // bind and trigger change event (alternate forms)
      $("#SelectID").bind('change', function() {
        AjaxFunction($(this).val());
      }).trigger('change');    
    });
</script>

Upvotes: 20

Will Madison
Will Madison

Reputation: 3123

The best way to accomplish this is to delay the setting of the on change trigger of the select and dynamically tell it what to do on change. In order to get it to fire as soon as the you just utilize the change() function. So here's what it would look like:

$(document).ready(function(){

  //At this point the select should be fully built, dynamically add the on change handler.

  $('#SelectID').change(AjaxFunction);

  //Fire the change event immediately.

  $('#SelectID').change();
});

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

if you use jquery.load to load for the first time the contents of the select box the first time then you should use the callback parameter of the load function to add your ajaxFunction ..

so ..

wherever/whenever you call the load function do it like this

$("some_selector_where_you_load_the_select_box")
.load("somepage.htm", 
      function(){ AjaxFunction( $("#SelectID option:selected").val() ); }
     );

also instead of calling the AjaxFunction yourself you can just trigger the change event and let the select box handle the AjaxFunction on its own .. (useful if you do this with multiple select boxes)

that would be

$("some_selector_where_you_load_the_select_box")
.load("somepage.htm", 
      function(){ $("#SelectID").change(); }
     );

Upvotes: 3

Adam
Adam

Reputation: 943

As a shortcut for the $(document).ready(function() {...}) syntax, you can use the following to run some code just after the document is ready:

$(function() {
    alert("doc ready");
});

So a complete example would be:

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.3.2.js"></script>
    <script type="text/JavaScript">
        function AjaxFunction(val) {
            alert(val);
        }

        $(function() {
            AjaxFunction($("#SelectID option:selected").val());
        });
    </script>
</head>
<body>
    <select id="SelectID" name="SelectName" onchange="AjaxFunction(this.value);"> 
        <option value='Inland Empire'>Inland Empire</option>
        <option value='San Bernardino'>San Bernardino</option>
        <option value='Riverside'>Riverside</option>
        <option value='California'>California</option>
    </select>
</body>

Upvotes: 1

kgiannakakis
kgiannakakis

Reputation: 104188

jQuery's document.ready should work. What browser are you testing this? Try Firefox with Firebug to see if any errors are reported. In your setTimeout code you have one extra closing parenthesis. Could this be causing the problem?

Upvotes: 2

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103135

Can you show some code that you have so far? Using jQuery's ready() function should accomplish what you want. It basically waits for the entire DOM to load before it executes.

 $(document).ready(function(){
    //code here runs after the DOM is created
 });

Upvotes: 9

Related Questions