jquery post value on toggle action

Question

Here is the html code:

        <div class="magic-container">               
            <div class="input-group">
                <input type="text" class="typeahead form-control" placeholder="Select category ..." />
                <ul class="dropdown-menu" style= "margin-top: -10px !important;">
                      <li id="one"><a href="#">Sports</a></li>
                    <li role="presentation" class="divider"></li>
                      <li id="two"><a href="#">Entertainment</a></li>
                    <li role="presentation" class="divider"></li>
                      <li id="three"><a href="#">Travel</a></li>
                    <li role="presentation" class="divider"></li>
                     <li id="four"><a href="#">Business</a></li>

                      <li><a href="#"></a></li>
                </ul>

                <span class="flip">
        <a href="#" class="mirror1"> FLIP </a> 
                </span>
            </div>
       </div>
        <div class="magic-bar">
            <span id="rating-slider" class="ui-slider-range"></span>
            <span class="flip">
                <a href="#" class="mirror2"> FLIP </a>
            </span>
        </div>

When FLIP with mirror1 clicked, I want to post fc1 and when FLIP with mirror2 is clicked I want to post fc2.

Here is my code to perform this:

        $(".flip").on('click', function() {
            $(".magic-bar").toggle();
                    $.ajax({

                            url: "invite_db.php",
                            type: "POST",
                            data: {"flipClick": 'fc1'},
                            success: function(data) {
                                $(".articleContent").html(data);

                                //setInterval("messageDisable()", 5000);
                            }
                        });

            $(".magic-container").toggle();
                    $.ajax({

                            url: "invite_db.php",
                            type: "POST",
                            data: {"flipClick": 'fc2'},
                            success: function(data) {
                                $(".articleContent").html(data);

                                //setInterval("messageDisable()", 5000);
                            }
                        });

        });

But when I click on FLIP both the values get posted and page response remains same. What is the logic mistake here?

Answer 1

You problem is that you only get the click on class flip, insted what anchor is clicked.

Try:

 $(".flip a").on('click', function() {
      if($(this).hasClass('mirror1'))
      {
        $(".magic-bar").toggle(); $(".magic-container").toggle(); 
        $.ajax({
        url: "invite_db.php",
        type: "POST",
        data: {"flipClick": 'fc1'},
        success: function(data) {
        $(".articleContent").html(data);

        //setInterval("messageDisable()", 5000);
        }
        });
       }
      else
        {
            $(".magic-container").toggle(); $(".magic-bar").toggle();
            $.ajax({
            url: "invite_db.php",
            type: "POST",
            data: {"flipClick": 'fc2'},
            success: function(data) {
            $(".articleContent").html(data);
            //setInterval("messageDisable()", 5000);
        }
        });
    }
});

Answer 2

There is no conditional logic in your code

For instance you need to check if the closest anchor tag
of the flip click has class mirror1 or mirror2 then based
on that you will do one of the two calls and toggle

Something like this

$(".flip a").on('click', function() {
if($(this).hasClass('mirror1')){
}

if($(this).hasClass('mirror2')){
}
}

Answer 3

You are simply submitting both values when clicking any DOM object with class "flip". I read your code like this:

$(".flip").on('click', function() {
    $(".magic-bar").toggle();
    $.ajax({ data: {"flipClick": 'fc1'} /* ... */);
    $(".magic-container").toggle();
    $.ajax({ data: {"flipClick": 'fc2'} /* ... */);
});