0

私はsom .ajaxコードを通過してからGoogle折れ線グラフをロードするdatepickerのFrom->toセレクターを使用しています。

私の問題は、Chrome では、ボタンがクリックされてスクリプトが 1 回実行されると、入力フィールド「from」と「to」がクリックされたときに日付ピッカーが表示されないことです。

述べたように、これは Chrome のみであり、IE と Firefox では、入力フィールドに常に Datepicker ポップアップが表示されます。

これは、Datepicker の index.php Javascript コードです。

<script type="text/javascript" id="js">

 $(document).ready(function() {

    var dates = $("#from, #to").live('focus', function() { 
        $(this).datepicker({
        defaultDate: "+1w",
        numberOfMonths: 1,
        dateFormat: 'yy-mm-dd',
        beforeShow: function( ) {
            var other = this.id == "from" ? "#to" : "#from";
            var option = this.id == "from" ? "maxDate" : "minDate";
            var selectedDate = $(other).datepicker('getDate');

            $(this).datepicker( "option", option, selectedDate );
        }
    })
            .change(function(){

                var other = this.id == "from" ? "#to" : "#from";

                if ( $('#from').datepicker('getDate') > $('#to').datepicker('getDate') )
                    $(other).datepicker('setDate', $(this).datepicker('getDate') );

        });
    }); 
});

google.load('visualization', '1', {'packages':['corechart']});

 $(document).ready(function() {
    $("#btn").click(function() {


            var from = $("#from").val();

            var to = $("#to").val();


            $('#box1Res , #box2Res, #box3Res').html('<img src="ajax-loader.gif" />'); // placeholder

            $.ajax( {
                url : 'getjson.php',
                type : 'post',
                dataType: 'text',
                data: {tid1: from, tid2: to},               
                success : function( data ) {

                    $('#box1Res').html($('#inner_1' , data).html());
                    $('#box2Res').html($('#inner_2' , data).html());
                    $('#box3Res').html($('#inner_3' , data).html());

                    var test =  ($('#graph_4' , data).html());   
                    $('#chart_div').html('<img src="ajax-loader.gif" />');


                            $("#chart_div").load("", function(event){

                            var data = new google.visualization.DataTable(test);

                            var options = {
                                    width: 'auto',
                                    height: '200',
                                      title: 'Sales'
                                    };

                            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                            chart.draw(data, options);

                            }); 
                }

            });
               return false;

        });

    });


</script>

何かが正しくないコードを見つけました。チャートをロードするこのコードを削除すると、スクリプトの後に Datepicker が機能します。

$("#chart_div").load("", function(event){

                            var data = new google.visualization.DataTable(test);

                            var options = {
                                    width: 'auto',
                                    height: '200',
                                      title: 'Sales'
                                    };

                            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                            chart.draw(data, options);

                            });

ここでは本当にアイデアがありません。どんな助けも大歓迎です。

4

1 に答える 1

0

次の行を置き換えることで、自分で問題を解決したようです。

$("#chart_div").load("", function(event){

と：

$("#chart_div").ready(function(event){

これがなぜなのかはよくわかりませんが…？

とにかく、Chrome で動作するようになりました...しかし、読み込み中の ajax スピナーを失ったようです。どうすれば元に戻すことができますか? 以下の行はもう機能しません。

$('#chart_div').html('<img src="ajax-loader.gif" />');
于 2013-06-29T11:07:22.140 に答える