title: jQuery won't load data until second refresh
body: <p>Ok i'm using a couple of plugins to first of all fill some selects from a php file and then the "Chosen" plugin to add some search function onto the select. Problem is that Once i load the page the chosen is added to the select but the select will have 0 options in it, until i refresh the page. I don't know if it has something to do with the order that they are being called but on the mobile version it seems to be loading fine. (Although i don't see any search the CSS is there on it).</p>
  
  <p>Here is the order of which things are happening.</p>
  
  <p>HTML
  header</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
      function LeagueOptions() {
          var load = $.get('functions.php',{function:"LeagueOptions"});
          $(".leagueOpts").html('Refreshing');
          load.error(function() {
            console.log("Mlkia kaneis");
            $(".leagueOpts").html('failed to load');
            // do something here if request failed
          });
          load.success(function( res ) {
            console.log( "Success" );
            $(".leagueOpts").html(res);
  
          });
          load.done(function() {
            console.log( "Completed" );
          });
       }
      function fillTeams(){
          var load = $.get('functions.php',{function:"fillTeams"});
          $(".fillTeams").html('Refreshing');
          load.error(function() {
            console.log("Mlkia kaneis");
            $(".fillTeams").html('failed to load');
            // do something here if request failed
          });
          load.success(function( res ) {
            console.log( "Success" );
            $(".fillTeams").html(res);
              // Datepicker
              $('#datepicker1').datepicker({
                format: 'yyyy-dd-mm'
              });
  
          });
          load.done(function() {
            console.log( "Completed" );
          });
      }
      &lt;/script&gt;
  </code></pre>
  
  <p>middle of the page</p>
  
  <pre><code>                        &lt;select name="teamName" class="fillTeams" id="default-select"&gt;
                              &lt;script&gt;
                              fillTeams();
                              &lt;/script&gt;
                          &lt;/select&gt;
  
                          &lt;select name="leagueID" class="leagueOpts"&gt;
                              &lt;script&gt;
                              LeagueOptions();
                              &lt;/script&gt;
                          &lt;/select&gt;
  </code></pre>
  
  <p>Bottom of the page</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript" src="js/plugins/chosen/chosen/chosen.jquery.min.js"&gt;&lt;/script&gt; 
  
      &lt;script type="text/javascript"&gt;
          var config = {
            '.chosen-select'           : {},
            '.chosen-select-deselect'  : {allow_single_deselect:true},
            '.chosen-select-no-single' : {disable_search_threshold:10},
            '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
            '.chosen-select-width'     : {width:"95%"}
          }
          for (var selector in config) {
            $(selector).chosen(config[selector]);
          }
          var config2 = {
            '.fillTeams'           : {},
            '.fillTeams-deselect'  : {allow_single_deselect:true},
            '.fillTeams-no-single' : {disable_search_threshold:10},
            '.fillTeams-no-results': {no_results_text:'Oops, nothing found!'},
            '.fillTeams-width'     : {width:"95%"}
          }
          for (var selector in config2) {
            $(selector).chosen(config2[selector]);
          }
          var config3 = {
            '.leagueOpts'           : {},
            '.leagueOpts-deselect'  : {allow_single_deselect:true},
            '.leagueOpts-no-single' : {disable_search_threshold:10},
            '.leagueOpts-no-results': {no_results_text:'Oops, nothing found!'},
            '.leagueOpts-width'     : {width:"95%"}
          }
          for (var selector in config3) {
            $(selector).chosen(config3[selector]);
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>Shouldn't that be the correct order? Declare the functions, call them to fill the selects, and then at the bottom add the plugin into that specific class? Why is it that only after the refresh it loads the data in the selects?</p>