Question

嗨我有一个按钮组，当所选按钮改变时，应该触发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函数上调用load graph。

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会自动调用一次post类型，但是如果我使用按钮组中的按钮它会转到loadGraphs函数但是ajax似乎被“跳过”

任何帮助都会非常感谢。

更新1 var postData; var commentData; var interactionData;

在与其他javascript函数相同的脚本标记内部的顶部定义。

Answer 1

这是因为使用了变量。将数据变量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。

Answer 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，interaction设置为指向html节点，因为它似乎从未定义过它们

我希望看到

var post, comment, interaction;

或

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

你的代码中的

。

data在哪里定义？

Answer 3

可能是您的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);
}
});

初始页面加载后AJAX不会触发

3 个答案: