ansaurus

Question

jQuery wait for all select options to load

Answer 1

+9 A:

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
 });

Vincent Ramdhanie 2009-12-18 02:59:00

I don't believe this works for the OP - they seem to be loading the `<script>` and the `<select>` via a `.load()` on another div, the `$(document).ready()` won't fire in that case.

gnarf 2010-01-06 06:52:19

Answer 2

+2 A:

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?

kgiannakakis 2010-01-04 08:35:13

I'll try Firefox. I've been using chrome so far. I didn't actually copy and paste that function, just rewrote what I have working in the code. The select box is loaded dynamically with JavaScript which I believe is why document.ready does not work. Using SetTimout works somewhat well, however if the AjaxFunction takes longer than usual, the function will be called before the select object appears and it won't function properly.

Brian 2010-01-04 10:40:39

If you are using a jQuery Ajax method to dynamically load the select box (such as $.load), then you should call the AjaxFunction in the callback function of the Ajax method.

kgiannakakis 2010-01-04 11:09:16

Answer 3

+1 A:

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"&gt;&lt;/script&gt;
    <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>

Adam 2010-01-05 16:49:21

Answer 4

+3 A:

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(); }
     );

Gaby 2010-01-05 21:38:41

+1 for change() and for using callback with load(). Guess it's the right solution since select options are being loaded with ajax.

Anton 2010-01-06 05:37:23

Answer 5

+17 A:

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>

gnarf 2010-01-05 22:01:54

+1 for binding a change event with code rather than with html markup.

Anton 2010-01-06 05:38:41

Yea I must have totally read over this post, I was thinking the same thing.

WillMatt 2010-01-06 16:15:30

Answer 6

+1 A:

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();
});

WillMatt 2010-01-06 16:15:50

ansaurus

tags:

views:

answers:

jQuery wait for all select options to load

related questions