Calling ajax once

Question

I have created a button on my website when it is clicked, I sent data on some php file using ajax and return the results. The code I am using is below,

My Goal :

When that button is clicked for the first time. I want to send the data on some php file using ajax and return the results, and
When it is clicked for the second time, I just want to hide the content, and
When it is clicked for the third time, I just want to show the container without calling the ajax again.

jQuery:

$(function() {
    $('#click_me').click(function(){
        var container = $('#container').css('display');
        var id = $('#id').html();
            if(container == 'none'){
                $.ajax({
                type: 'POST',
                data: {id: id},
                url: "ajax/get_items.php",
                }).done(function(data) {
                $('#container').html(data);
                }).success(function(){
                $('#container').show('fast');
                });
                }else if(container == 'block'){
        $('#container').hide('fast');
        }
        });
});

Html :

<input type="button" id="click_me" value="Click Me"/>
<div id="container"></div>

please implement a counter and do counter++ every time the user clicks. Then you are able to do different things on each click — steven, May 31 '13 at 05:46

score 3 · Answer 1 · answered May 31 '13 at 05:48

3

The jQuery way would be like this:

$(function() {
    $('#click_me').one('click', function() {
        $.ajax({
            // ... other params ...,
            success: function(result) {
                $('#container').html(result).show('fast');
                $('#click_me').click(function() {
                    $('#container').toggle('fast');
                });
            });
        });
    });
});

http://api.jquery.com/one/

http://api.jquery.com/toggle/

answered May 31 '13 at 05:48

leftclickben

4,564
23
24

-1, A previous solution was downvoted for suggesting this solution why? Now this has 3 votes? (No Offence leftclickben) – Starx May 31 '13 at 05:53
Huh? I didn't see any other solution like this, and I didn't downvote anybody. What are you saying? – leftclickben May 31 '13 at 05:58
I din't mean you downvoted. A similar solution is downvoted and now deleted downwards (You cannot see it). But was the exact point as yours. The downvote is intended for the community not you. – Starx May 31 '13 at 05:59
Well like I said, there was no similar solution before mine, unless it was added, downvoted and deleted before I posted mine and I didn't see it. I also don't understand this use of a downvote, but whatever. – leftclickben May 31 '13 at 06:00

score 2 · Answer 2 · edited May 23 '17 at 12:06

2

You can use the counter

http://forum.jquery.com/topic/making-a-number-counter

(function () {
  var count = 0;

  $('table').click(function () {
    count += 1;

    if (count == 2) {
      // come code
    }
  });
})();

JQuery Mouse Click counter

Working Example of your code :-

http://jsfiddle.net/2aQ2g/68/

edited May 23 '17 at 12:06

Community

1
1

answered May 31 '13 at 05:48

Javascript Coder

5,691
8
52
98

d3c0y · Accepted Answer · 2013-05-31T06:00:39.973

Something like this should do the trick...

$("#click_me").click(function(){
  var $btn = $(this);
  var count = ($btn.data("click_count") || 0) + 1;
  $btn.data("click_count", count);
  if ( count == 1 ) {
    $.ajax({
      var container = $('#container').css('display');
      var id = $('#id').html();
      if(container == 'none'){
        $.ajax({
          type: 'POST',
          data: {id: id},
          url: "ajax/get_items.php"
    })
  }
  else if ( count == 2 ) {
    $('#container').hide('fast');
  }
  else {
    $('#container').show('fast');
    $btn.unbind("click");
  }
  return false;
});

score 0 · Answer 4 · answered May 31 '13 at 05:50

0

One way to do it would be to add a class call count using jQuery every time the user clicks on the button (http://api.jquery.com/addClass/) and you can get the count value in the handler and based on that you can handle the click appropriately.

answered May 31 '13 at 05:50

everconfusedGuy

2,709
27
43

score 0 · Answer 5 · answered May 31 '13 at 05:51

You can do this by defining a simple variable counting the clicks.

$(function() {
    var clickCount = 1; //Start with first click

    $('#click_me').click(function(){
        switch(clickCount) {
             case 1: //Code for the first click

                 // I am just pasting your code, if may have to change this
                 var container = $('#container').css('display');
                 var id = $('#id').html();
                     if(container == 'none'){
                         $.ajax({
                         type: 'POST',
                         data: {id: id},
                         url: "ajax/get_items.php",
                         }).done(function(data) {
                         $('#container').html(data);
                         }).success(function(){
                         $('#container').show('fast');
                         });
                         }else if(container == 'block'){
                 $('#container').hide('fast');
                 }
              break;
              case 2: 
                 //code for second click
                 break; 
              case 3:
                 //Code for the third click
                 break;      
        });
        clickCount++; //Add to the click.
});

Calling ajax once

5 Answers5