-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>

问题演示：小提琴 解决方案演示：小提琴。

于 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,设置为指向 html 节点的事实comment，interaction因为看起来您从未定义过它们。

我期待看到

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 回答