search

snikch / jquery.dirtyforms

A jQuery Plugin that monitors forms for change and alerts the user before leaving the page.
MIT License
224 stars 55 forks source link

PJAX with dirtyform + bootstrap dialog - "Leave the page" doesn't work #100

Open OlivierGrimard opened 8 years ago

OlivierGrimard commented 8 years ago

Hi, I'm using pjax with dirtyform + bootstrap dialog and have an issue when I click on "Leave the page". The link is never triggered. I'm wondering if this is an issue with the plugin dirtyform bootstrap or in my code. Any help would be appreciated. Thanks See the example here: https://jsfiddle.net/DTcHh/17974/

NightOwl888 commented 8 years ago

Looks like this is just an issue with the order in which the event handlers are declared. Both PJax and Dirty Forms are adding a click event handler to the anchor tag. You just need to make sure Dirty Forms attaches the handler before PJax and then it works fine.

I was unable to get it to completely function in JSFiddle, so I just created a standalone page to test.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />

</head>
<body>

    <script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@1.11.3,bootstrap@3.0.0,jquery.pjax@1.9.5,jquery.dirtyforms@2.0.0(jquery.dirtyforms.min.js+jquery.dirtyforms.dialogs.bootstrap.min.js)"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        //$(document).pjax('a', '#pjax-container');

        $('<div id="custom-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-title">' +
            '<div class="modal-dialog" role="document">' +
                '<div class="modal-content panel-danger">' +
                    '<div class="modal-header panel-heading">' +
                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' + 
                            '<span aria-hidden="true">&times;</span>' + 
                        '</button>' +
                        '<h3 class="modal-title" id="custom-title"></h3>' +      
                    '</div>' +
                    '<div class="modal-body panel-body custom-message"></div>' +
                    '<div class="modal-body panel-body">This is some custom text to include in the dialog.</div>' +
                    '<div class="modal-footer panel-footer">' +
                        '<button type="button" class="custom-proceed btn btn-primary" data-dismiss="modal"></button>' +
                        '<button type="button" class="custom-stay btn btn-default" data-dismiss="modal"></button>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>').appendTo('body');

        $('form').dirtyForms({
            // Message will be shown both in the Bootstrap Modal dialog 
            // and in most browsers when attempting to navigate away 
            // using browser actions.
            message: 'This is a custom message',
            dialog: {
                title: 'This is a custom title',
                dialogID: 'custom-dialog', 
                titleID: 'custom-title', 
                messageClass: 'custom-message', 
                proceedButtonClass: 'custom-proceed', 
                stayButtonClass: 'custom-stay' 
            }
        });

        $(document).pjax('a', '#pjax-container');
    });
    </script>

     <div class="container" id="pjax-container">
         <a href="http://www.google.com">Change page with pjax</a>
         <form>
             <br><br>
             <input type="text">
         </form>
     </div>  
</body>
</html>
NightOwl888 commented 8 years ago

On second pass, that isn't the issue. It appears to work fine when the PJax call is before Dirty Forms as well.

So there is probably a conflict with other JavaScript on your page.

I went through and copied and pasted the references from JSFiddle and it works the same way. So, I am not sure exactly what is happening with the redirect on JSFiddle (I get a blank page instead of Google), but it appears to work in every case in a standalone HTML document.

NightOwl888 commented 8 years ago

Were you able to resolve this issue?