Question

Trying to find out why this jQuery JS isn’t making ajax call though it is being called for execution.

I have this button to make an ajax GET request to a method in the controller, the method will partial render. When I click on the button I don’t see any request coming on the console but I see the alert “test” on the browser.
I have the same exact JS with other parameters working for other tupes of ajax calls, so I just copied one of them and changed all required parameters, expecting it shall work right away. Neither I get any errors on the console. My routes and id names are good and verified. What is it that I am missing here?

view – Note: this button is rendered via a different ajax, that part works.

<%= button_tag "Add / Remove", :id => "add_remove_button", :onclick => "javascript:add_remove();" %> #note: this is buried under div tags in a html table

JS-

 function add_remove(){
$('#add_remove_button').click(function() {
      $.ajax({
        type: 'GET',
        url: "/item/add_remove", 
        success:$('#view_item').html(data)

        /*function(){  },
        data:$('#test').serialize(),
        error: function(){  },
        success: function(data){   },
        complete: function (){   }*/
        }); #No ajax call made
/*return false;*/
});
alert('test'); #I get this alert
}

Answer 1

You’ll always see that alert() because click() is asynchronous: the code inside the function() passed to click does not get executed until you click, but the rest of add_remove() will get called.

Here’s what is actually happening in your code, which explains why the AJAX call doesn’t get made:

1. Using :onclick => ... attaches add_remove() to your button.
2. You click the button, add_remove() gets called and attaches another click callback to your button. Then add_remove() calls alert(). There is no AJAX call happening here, just adding a new click handler, and sending an alert.
3. You click the button a second time, and you will attach a third click callback to the button. However since you also attached a click handler the first time you clicked the button, you should see an AJAX request here.
4. Click it a third time and you’ll see two AJAX requests this time, for a total of 3 AJAX requests.

Here’s what you actually want to do. Remove the :onclick => … from the button:

<%= button_tag "Add / Remove", :id => "add_remove_button" %>

Attach a click event to the button when the page first loads:

$(function(){
  $('#add_remove_button').click(function() {
    $.ajax({
      type: 'GET',
      url: "/item/add_remove", 
      success: function(data) { $('#view_item').html(data); },
      data: $('#test').serialize(),
      error: function(){  },
      success: function(data){   },
      complete: function (){   }
    });
    return false;
  });
});