0

I have the following problem:

On my page I have 2 remote links. The first is:

<p><%= link_to "Description", "#", remote: true, id: "desc-link" %></p>

which is a simple link to fadeToggle the description of an object:

$(document).on "ready page:load", ->
  $("section.object").on "click", "#desc-link",  ->
    $("#object-desc").fadeToggle()

The second one is an Ajax call:

<a type="button" class="btn btn-default", 
  href='/users/<%= Object.find(object_to_display).user.id %>/objects',
  data-remote="true" id='object-link'>Test</a>

and the controller is supposed to do STUFF when it gets clicked:

def objects

  ...

  respond_to do |format|
    format.html { render "users/show_objects" }
    format.js { STUFF }
  end
end

My problem is, that every time when I use the first link to toggle the description on or off, also STUFF happens which is not supposed to be the case. How can I avoid STUFF from happening when clicking on the first link?

Bubibob
  • 191
  • 1
  • 13

1 Answers1

0

The first link does not need remote: true. Setting that causes jquery_ujs to try to submit the link automatically via ajax when you click it. Removing remote: true should prevent the toggle link from triggering the objects action.

Separately, your click handler should either return false or call e.preventDefault() to prevent the browser from trying to follow the link (basically you're telling the browser "ignore this click, I handled it"):

$(document).on "ready page:load", ->
  $("section.object").on "click", "#desc-link", (e) ->
    $("#object-desc").fadeToggle()
    e.preventDefault() // <-- prevents following the link
gmcnaughton
  • 2,233
  • 1
  • 21
  • 28