4

I've created some custom "popups" (initially styled with "display:none;") that are toggled via an adjacent ".popup_trigger" link with the following summarized functionality:

# /public/javascripts/application.js
jQuery(document).ready(function(){

  // Trigger a popup
  jQuery('.popup_trigger').live('click', function(event) {
    jQuery(this).next('.popup').toggle(0, function() {
      // Prevent the jQuery('body').click() below if the click occurs inside the popup
      jQuery(this).click(function(event){
        event.stopPropagation();
      });
    });
    return false;
  });

  // "Outside" click hides popup
  jQuery('body').click(function() {
    jQuery('.popup:visible').toggle();
  });
});

This works fine for displaying the popups and then hiding them when an "outside" click occurs. However, inside one such popup I have the following:

<%= link_to 'Delete medical record', medical_record, :confirm => 'Permanently delete this medical record?', :method => :delete, :remote => true %>

Which renders the following:

<a href="/medical_records/1" data-confirm="Permanently delete this medical record?" data-method="delete" data-remote="true" rel="nofollow">Delete medical record</a>

My problem is that when I trigger the popup to display, the event.stopPropagation(); call appears to disable the remote functionality of this link. That is, when I click the link, it sends a plain old (not remote) GET request of '/medical_records/1' which looks for the show action instead of destroy.

If I comment out the event.stopPropagation(); in my JS above, the remote link works fine, but then the popup hides when I click inside.

What can I do to have it so an active popup hides only when clicked outside of itself, and also allow the remote links to work?

Thanks.

1
  • I have the same issue trying to modify the behavior of twitter-bootstraps' dropdown dialogs. Looking at github.com/rails/jquery-ujs/blob/master/src/rails.js, looks like they attach an event delegator to the document for data-remote objects. I'm assuming that provides a good UX when things on the page are changing, but also is annoying because it means a click on a link has to bubble up to the document. Not sure how to work around that...
    – Woahdae
    Mar 18, 2012 at 3:52

2 Answers 2

0

Had exactly the same problem: Now I use this plugin, works great:

http://plugins.jquery.com/project/ba-jquery-outside-events-plugin

1
0

I had the same problem, the only solution I found was to send an ajax request "manually" via jQuery like that :

jQuery(document).ready(function(){
    jQuery('#notification_<%=notification.id%> .remove-not a').on('click', function(e) {
      $.ajax({
        url: '<%=notification_path(notification)%>',
        type: 'delete',
        dataType: 'script',
        success:function(data){
        }
      });
      e.preventDefault();
      e.stopPropagation();
    });
});

This works fine but if anyone has a better solution I'd be glad to try it out ! :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.