6

I am monitoring a particular form for changes and want to warn the user before they attempt to navigate away from the form without submitting it. I've successfully gotten this working in all instances except for the overlay close button – because that element is bound to the Drupal.overlay.close() function, a user is able to click it and immediately close the overlay, even though I'm listening for all $('a') clicks.

I looked inside of modules/overlay/overlay-parent.js and see that it provides the drupalOverlayBeforeClose event so that other scripts can respond and stop the overlay from closing if needed, but I can't figure out how to implement this. Do I just listen for this event globally, through the $(document) or something? Or do I need to extend the Drupal object and attach my function to this event somehow?

  • Let me add that listening via $(document). drupalOverlayBeforeClose(function() { alert('foo'); }) never fires. – Charlie Schliesser Nov 1 '12 at 13:26
4
+100

You need to use the following code,

jQuery(document).bind('drupalOverlayBeforeClose', function(event) {
   // your code
   return false // This will prevent the overlay from closing.
});

click, dbclick and other methods are shortcut methods for bind('click', function(){}), bind('dbclick', function(){}) respectively. However there is no shortcut method called drupalOverlayBeforeClose, that's why the following code didn't worked,

$(document).drupalOverlayBeforeClose(function(event) {

});

So you need to bind drupalOverlayBeforeClose explicitly using bind. If you return false in your callback, then the overlay won't be closed.

Hope this clarifies the answer.

| improve this answer | |
  • This helps a lot. I should have tried binding that sooner and not treated it like a shortcut. I'm still experiencing an issue where the event that is passed into the function doesn't seem to be the event that I want. For example, if I do $(document).bind('drupalOverlayBeforeClose', function(event) { event.preventDefault(); and then run if (event.isDefaultPrevented()) { alert('foo'); } in overlay-parent.js I see no 'foo'. Is the event being passed into function() the proper "event"? – Charlie Schliesser Nov 1 '12 at 17:40
  • Added the information about preventing the overlay from closing in the answer :) – Mathankumar Nov 1 '12 at 17:51
  • return false; isn't doing it for me. overlay-parent.js is checking if (event.isDefaultPrevented()) { return false; } which is why I tried preventDefault(). – Charlie Schliesser Nov 1 '12 at 17:59
  • No need to try preventDefault(), just return false that's enough. Look at the comment before that line - If a handler returned false, the close will be prevented.. You're making the things more complicated :( – Mathankumar Nov 1 '12 at 18:03
  • 1
    Is your .js file being called by your front-end theme, or the admin theme? – joedougherty Nov 1 '12 at 19:54
3

Try following code

jQuery("#overlay-container").find("iframe").contents().find("#overlay-close").click(function (event) {
    console.log('Clicked on close overlay link');

    event.preventDefault();
    event.stopPropagation();

    var r = confirm("Do you want to close overlay?");
    if (r == true) {
        Drupal.overlay.close();
    } else {
        //do something else
    }


});

When user will click on close overlay link, a confirming dialog should display.

enter image description here

| improve this answer | |
  • Thanks Ajinkya. I'm trying to listen when the event is triggered (drupalOverlayBeforeClose) and have gotten it working thanks to you and mashemetician's code – the issue was with the scope of the event between the parent and the iframe. The issue I still have, however, is that if I press "cancel" the first time, the X never listens for subsequent clicks. Do you have that behavior when you use your code? – Charlie Schliesser Nov 5 '12 at 1:49
  • No that behavior does not happen with my code. I can still listen for subsequent clicks. – Ajinkya Kulkarni Nov 6 '12 at 17:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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