JQuery Ajax call stop refresing the page

Question

I have the following html code:

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

which has a form with the id=ChartForm that contain two date inputs until_date and since_date, one select accmenu and two submit inputs with the values Daily new likes and Daily unlikes. I use the following Jquery function:

$(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();
    });
});

for the application flow in the following manner: every time I click on one of the input submit buttons the script will make only one Ajax GET request to a specific php file that send me back a response with which I create a Chart in a hidden div with the id=dailyNewLikes or id=dailyUnlikes by case (for testing purposes I work for the moment only on the first button). The button it will change his background color into green and the div it will be shown. I use $("#newLikes").on('click', function(){ for change back and forth the background color and the display time of the div. (from green and display:block to red and display:none, you get the point I hope :D). Also I use $('#accmenu').change(function() { to change all buttons to red and hide the respective div in case an option from the select is changed. My problem is that after I refresh the page (Ctrl+R) choose since and until date, click on the first button (it change to green and the div is shown, also the toggle is working fine) and then click on the second button which works fine on the first click (is becoming green and div is shown) but on the second click I have an issue: the script is making another Ajax GET request (a wrong URL one) and the page is refreshed. Ex. of a good reguest URL:

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

and an ex. of a wrong request URL:

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

Like it can be seen (it doesn't need in the first to make this extra request) the php file is not present and also a new submit parameters is added. This also happen if I change from the select with another option. What am I do wrong? I really need to know, not just to have my code "fixed". It bugging me for a little while. Any feedback is more than welcomed. P.S. Also, how can I start the .one function only if both date inputs has been choosen? Something like how could help me?

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

it will work that way? Sorry for the long question...

Answer 1

i think you should make your question a little shorter and just point what you need and what errors are you getting ..anyways...going through your code i see you have two click event for same button at the end for $("#unlikes").one and $("#unlikes").on(..and no return false in other function.

try adding return false

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

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

my guess is that , since you have two click event..when it gets clicked ..these event will fire and since you are missing return false in second click function...the form gets submitted hence refreshing the form.

however its better if put your codes in single click function than creating two seperate click event.