javascript - jQuery 在第二次刷新之前不会加载数据

Question

好的，我正在使用几个插件首先从 php 文件中填充一些选择，然后使用“选择”插件将一些搜索功能添加到选择中。问题是，一旦我加载页面，所选内容就会添加到选择中，但选择中将有 0 个选项，直到我刷新页面。我不知道这是否与调用它们的顺序有关，但在移动版本上它似乎加载正常。 (虽然我没有看到任何搜索，但它上面有 CSS)。

这是事情发生的顺序。

HTML 标题

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>

    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" );
        });
    }
    </script>

页面中间

                        <select name="teamName" class="fillTeams" id="default-select">
                            <script>
                            fillTeams();
                            </script>
                        </select>

                        <select name="leagueID" class="leagueOpts">
                            <script>
                            LeagueOptions();
                            </script>
                        </select>

页面底部

<script language="javascript" type="text/javascript" src="js/plugins/chosen/chosen/chosen.jquery.min.js"></script> 

    <script type="text/javascript">
        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]);
        }
    </script>

这不应该是正确的顺序吗？声明函数，调用它们来填充选择，然后在底部将插件添加到该特定类中？为什么只有在刷新后它才加载选择中的数据？

Answer 1

是的，这是正确的顺序但是底部的代码将在您的ajax 调用返回内容之前运行。将整个选择的配置放入一个函数中，比如 setupChosen(){...allthatcode...} 并在成功方法中调用它。

load.success(function( res ) { 
    setupChosen(); 
    ...other code... 
}

编辑:看起来您正在设置两个选择，这两个选择都需要在选择可以绑定(bind)到它们之前加载。有几种方法可以做到这一点，但您可以尝试这样的方法。

HTML:

    <select name="teamName" class="fillTeams" id="default-select">
    </select>

    <select name="leagueID" class="leagueOpts">
    </select>

JS:

$(document).ready(function(){
    LeagueOptions();
});
function LeagueOptions() {
    var load = $.get('functions.php',{function:"LeagueOptions"});
    $(".leagueOpts").html('Refreshing');
    load.error(function() {
      $(".leagueOpts").html('failed to load');
    });
    load.success(function( res ) {
      $(".leagueOpts").html(res);
    });
    load.done(function() {
    // Call the next load once it's finished
    fillTeams();
    });
 }
function fillTeams(){
    var load = $.get('functions.php',{function:"fillTeams"});
    $(".fillTeams").html('Refreshing');
    load.error(function() {
      $(".fillTeams").html('failed to load');
    });
    load.success(function( res ) {
      $(".fillTeams").html(res);
        $('#datepicker1').datepicker({
          format: 'yyyy-dd-mm'
        });

    });
    load.done(function() {
        // Now that we've loaded both, set up Chosen
        setupChosen();
    });
}