0

Not sure if using jquery is the right way in closing this modal window that was rendered through ajax...

$ ->
  $('body').on 'click', '#Close', ->
    $("#Root").hide()

When I tried this, it only works once. If I click on another object to open a different modal window, the hide doesn't work.

#Root
  #Bg
  #Main
    #Info
    #MainControls
      #Close{style: "cursor:pointer;"}
        %a.CloseButton
          %i X

The modal window is being rendered through this:

$('body').append('<%= j render partial: "trips/quick_view" %>');

In my views:

@trips.each do |trip|
  = link_to trip.id, quick_view_trips_path(:js, id: trip.id), remote: true

The modal window produces dynamic content, so I'm not sure what is the best way to close this and won't lag the application if people are closing and opening different objects.

hellomello
  • 8,219
  • 39
  • 151
  • 297
  • Instead of using `#Root` (ID), try to make it `.Root` (class). – Zulhilmi Zainudin Dec 27 '15 at 05:55
  • @ZulhilmiZainudin hmmm not sure why adding a close would help it? – hellomello Dec 27 '15 at 09:04
  • Check whether the `#close` tag is loaded when all javascript is loaded. If it appears on the page dynamically you should use `$(document).on 'click', '#Close'` instead as `$('body')` will only add the event listener to the tag if it is there when javascript is loaded. – Kkulikovskis Dec 27 '15 at 10:29
  • @Kkulikovskis document doesn't work. the issue is that its not supposed to hide it because it leaves the container still in the DOM, i need to close it. When I refresh the page, `#Root` is not in the DOM to begin with. – hellomello Dec 27 '15 at 17:54

1 Answers1

-1

After commenting on a response, I figured out what I needed to do, I just needed to use .remove() instead of .hide(). This works, not sure if its the ultimate correct way, so I'll mark this one off unless there's a better answer.

$ ->
  $('body').on 'click', '#Close', ->
    $("#Root").remove()
hellomello
  • 8,219
  • 39
  • 151
  • 297