-1

こんにちは、選択したボタンが変更されたときに ajax 呼び出しをトリガーするボタン グループがあります。

        <div class="btn-group" id="graphSelection">
            <button type="button" class="btn disabled btn-info" id="post" onclick="graphSelection(this.id)">Posts</button>
            <button type="button" class="btn" id="comment" onclick="graphSelection(this.id)">Comments</button>
            <button type="button" class="btn" id="interaction" onclick="graphSelection(this.id)">All Interaction</button>
        </div>

そして、javascript/jquery と ajax

var postData;
var commentData;
var interactionData;

function graphSelection(clickedID) {
if(!$('#' + clickedID).hasClass('disabled')) {
    $('#graphSelection').find('button.disabled').removeClass('disabled btn-info');
    $('#' + clickedID).addClass('disabled btn-info');

    loadGraphs(clickedID);
}
}

この最初の JavaScript は、個々のボタンの CSS を変更するだけで、ajax を含む次の JavaScript 関数で負荷グラフを呼び出します。

function loadGraphs(type) {
if ((type == "post" && !postData) || (type == "comment" && !commentData) || (type == "interaction" && !interactionData)) {
    $.ajax({
        url : 'parts/' + type + '_graph.php',
        cache: false,
        type : 'POST',
        data : data,
        dataType : 'json',
        beforeSend: function() {
            $("#report-loading").fadeIn(500);
        },
        success : function (jsonData) {
                    alert(type);
            if (type == "post")
                postData = jsonData;
            else if (type == "comment")
                commentData = jsonData;
            else if (type == "interaction")
                interactionData = jsonData;

            drawChart(jsonData);
            $("#report-loading").fadeOut(500);
        },
        error : function () {
            $("#report-loading").fadeOut(500);
            alert("error");
        }
    })
}
else if (type == "post") {
    drawChart(postData);
}
else if (type == "comment") {
    drawChart(commentData);
}
else if (type == "interaction") {
    drawChart(interactionData);
}
}

この例では、ロードするグラフのタイプを確認し、以前にデータをロードしたことがあるかどうかを確認します。そうでない場合は、ajax がトリガーされ、必要なデータが取得されます。ページの読み込みが完了すると、ajax は投稿のタイプで一度自動的に呼び出されますが、ボタン グループのボタンを使用すると loadGraphs 関数に到達しますが、ajax は「スキップ」されているようです。

どんな助けでも大いに感謝します。

1 var postData を更新します。var コメントデータ; var インタラクションデータ;

他の JavaScript 関数と同じスクリプト タグ内の上部に定義されています。

4

3 に答える 3

2

これは、使用されている変数が原因です。データ変数post、commentおよびinterationをpostData、commentDataおよび にinteractionDataそれぞれ変更します。

次に、if条件を次のように変更します

if ((type == "post" && !postData) || (type == "comment" && !commentData) || (type == "interaction" && !interactionData)) {

また、ajax コールバックも変更します。

変数postは要素を参照していますがbutton id="post"、他の変数も同じです。要素がグローバルに公開されているためだと思いますが、id理由はわかりません。

また、グローバル変数を次のように定義する必要があります

<script type="text/javascript">
    var postData, commentData, interactionData;
</script>

問題のデモ: Fiddle 解決のデモ: Fiddle .

于 2013-01-30T15:29:43.783 に答える
2

これは問題に対する答えではなく、コメントに投稿するにはコードが多すぎます。なぜインライン ハンドラーを使用しているのですか? jQuery の機能を使用します。

function graphSelection () { 
    var clickedID = this.id;
    $(this)
        .addClass("disabled btn-info")
        .siblings()
            .removeClass("disabled btn-info");
    loadGraphs(clickedID);
}

$("#graphSelection").on("click", "button", graphSelection);

postそして、あなたの問題は、変数を定義したことがないように見えるため、ブラウザが変数、commentをinteractionhtml ノードを指すように設定しているという事実に基づいています。

見ると思っていた

var post, comment, interaction;

また

var post = false, 
    comment = false, 
    interaction = false;

あなたのコードで。

また、どこでdata定義されていますか?

于 2013-01-30T15:34:31.443 に答える
0

typeパラメータが入力されていない可能性があります。

jquery を使用するより適切な方法は、イベント リスナーをボタンに追加することです。これにより、必要に応じて ID を使用して関数が呼び出されます。

$(':button.btn').click(function(){
if(!$(this).hasClass('disabled')) {
    $('#graphSelection').find('button.disabled').removeClass('disabled btn-info');
    $(this).addClass('disabled btn-info');

    loadGraphs(this.id);
}
});
于 2013-01-30T15:26:43.367 に答える