0

我有以下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 请求，该文件向我发回一个响应，我用它在隐藏的 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）并且页面被刷新。前任。一个好的请求网址：

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

和前任。错误的请求 URL：

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

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

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

它会这样工作吗？对不起，很长的问题...

4

1 回答 1

1

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

尝试添加 return false

$("#newLikes").on('click', function(){
    $(this).toggleClass('green');
    $('#dailyNewLikes').toggle();
    return false;
});

$("#unlikes").on('click', function(){
    $(this).toggleClass('green');
    $('#dailyUnlikes').toggle();
    return false;
});

我的猜测是，因为你有两个点击事件..当它被点击时..这些事件将触发并且因为你return false在第二次点击功能中丢失了......表单被提交因此刷新表单。

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

于 2013-05-10T10:09:54.317 回答