Ruby rails - jQuery JS being executed but not making ajax call

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
}

robbrit · Accepted Answer · 2012-04-21 15:30:03Z

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:

Using :onclick => ... attaches add_remove() to your button.
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.
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.
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;
  });
});

J-_-L · Accepted Answer · 2012-04-21 15:31:30Z

0

You are mixing up the jquery-registering-callbacks style and the old event-handler attributes. So you triggered the registering when calling the add_remove function.

Simply remove the :onclick stuff and function add_remove(){ ... }

answered Apr 21, 2012 at 15:31

J-_-L

9,1872 gold badges43 silver badges38 bronze badges

Collectives™ on Stack Overflow

Ruby rails - jQuery JS being executed but not making ajax call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related