Question

我有以下HTML代码：

<div>
    <form id="ChartsForm">
        <div id="optionsheader">
            <p>Choose your page:</p>
            <div id="dateoptions">
                <p>Until date: <input type="date" name="until_date" value="Until date"></p>
                <p>Since date: <input type="date" name="since_date" value="Since date"></p>
            </div>
        </div>
        <select name="accmenu" id="accmenu" style="width:300px; float:left; clear:both;">
            <?php
            $user_accounts = $facebook->api('/me/accounts','GET');
            foreach($user_accounts['data'] as $account) {
            ?>
                <option data-description="<?php echo $account['category'] ?>" data-image="https://graph.facebook.com/<?php echo $account['id']; ?>/picture" value="<?php echo $account['id'] ?>"><?php echo $account['name'] ?></options>
            <?php
            }
            ?>
        </select>
        <div class="insightsoptions">
            <p>Choose your insights:</p>
            <input id="newLikes" class="insightsbuttons" type="submit" name="submit" value="Daily new likes">
            <input id="unlikes" class="insightsbuttons" type="submit" name="submit" value="Daily unlikes">
        </div>
        <div class="insightsgraphs">
            <div id="dailyNewLikes"></div>
            <div id="dailyUnlikes"></div>
        </div>
    </form>
</div>

其中包含id=ChartForm的表单，其中包含两个日期输入until_date和since_date，一个选择accmenu，两个提交输入的值为Daily new likes和Daily unlikes。我使用以下Jquery函数：

$(function () {
    $('#accmenu').change(function() {
        $(".insightsgraphs div").hide();
        $(".insightsoptions input").attr("class","insightsbuttons");
    });
    $("#newLikes").one('click', function () {
        $.ajax({type:'GET', url: 'newLikes.php', data:$('#ChartsForm').serialize(), success:
            function(response) {
                var json = response.replace(/"/g,'');
                json = "[" + json + "]";
                json = json.replace(/'/g,'"');
                var myData = JSON.parse(json);
                var myChart = new JSChart('dailyNewLikes', 'line');
                myChart.setDataArray(myData);
                myChart.setSize(960, 320);
                myChart.setAxisNameX('');
                myChart.setAxisValuesColorX('#FFFFFF');
                myChart.setAxisNameY('');
                myChart.setTitle('Daily New Likes');
                myChart.draw();
            }});
        return false;
    });
    $("#newLikes").on('click', function(){
        $(this).toggleClass('green');
        $('#dailyNewLikes').toggle();
    });
    $("#unlikes").one('click', function () {
        $.ajax({type:'GET', url: 'unlikes.php', data:$('#ChartsForm').serialize(), success:
            function(response) {
                alert(response);
                $("#dailyUnlikes").html(response);
            }});
        return false;
    });
    $("#unlikes").on('click', function(){
        $(this).toggleClass('green');
        $('#dailyUnlikes').toggle();
    });
});

以下列方式处理应用程序流程：每次单击其中一个输入提交按钮时，脚本只会向特定的php文件发出一个Ajax GET请求，该文件会向我发回一个响应，我在其中创建了一个Chart一个隐藏的div，其中包含id=dailyNewLikes或id=dailyUnlikes的情况（出于测试目的，我目前仅在第一个按钮上工作）。按钮它会将背景颜色变为绿色，并显示div。我使用$("#newLikes").on('click', function(){来回变换背景颜色和div的显示时间。（从绿色和display:block到红色和display:none，你得到我希望的观点：D）。此外，我使用$('#accmenu').change(function() {将所有按钮更改为红色并隐藏相应的div，以防更改选项中的选项。我的问题是，刷新页面后（Ctrl + R）选择自从和直到日期，单击第一个按钮（它变为绿色并显示div，切换工作正常）然后单击第二个按钮它在第一次单击时正常工作（变为绿色并显示div），但在第二次单击时我遇到了一个问题：脚本正在发出另一个Ajax GET请求（错误的URL）并刷新页面。防爆。一个好的reguest URL：

http://localhost/smd/unlikes.php?until_date=2013-05-01&since_date=2013-04-01&accmenu=497232410336701

和前。错误的请求网址：

http://localhost/smd/?until_date=2013-05-01&since_date=2013-04-01&accmenu=497232410336701&submit=Daily+unlikes#_=_

就像可以看到的那样（它不需要在第一次提出这个额外的请求）php文件不存在，并且还添加了新的提交参数。如果我从另一个选项更改选择，也会发生这种情况。我做错了什么？我真的需要知道，而不仅仅是让我的代码“修复”。它让我烦恼了一会儿。任何反馈都非常受欢迎。附：另外，如果选择了两个日期输入，我怎样才能启动.one功能？有什么能帮助我吗？

var until = $('#dateoptions input[name="until_date"]').val();
var since = $('#dateoptions input[name="since_date"]').val();
if (until == "" || since == "") {
    alert('Until date or Since date missing!');
    return;
}

它会这样工作吗？很抱歉这个问题很长......

Answer 1

我认为你应该让你的问题缩短一点，只需指出你需要什么以及你得到的错误..无论如何......通过你的代码我看到你有两个点击事件为同一个按钮在{其他功能中有{1}}和$("#unlikes").one ..以及$("#unlikes").on(。

尝试添加return false

no return false

我的猜测是，因为你有两个点击事件..当它被点击时..这个事件将被激活，因为你在第二次点击功能中缺少$("#newLikes").on('click', function(){ $(this).toggleClass('green'); $('#dailyNewLikes').toggle(); return false; }); $("#unlikes").on('click', function(){ $(this).toggleClass('green'); $('#dailyUnlikes').toggle(); return false; }); ...表单被提交因此刷新了形式。

然而，如果将代码放在单击功能中比创建两个单独的单击事件更好。

JQuery Ajax调用停止刷新页面

1 个答案: