2

I need the user to confirm that he wants to end the current before opening the fancybox to create a new game.

I have both tried to stop onClick event propagation: How to stop event propagation with inline onclick attribute?

<a href="../Dialogs/CreateGameDialog.aspx" class="createGameLink showDialog" onclick=" if(!confirm('<%# Strings.LoggedIn_ComfirmStartNewGame %>')){ disabledEventPropagation(arguments[0]); return false;} return true;">
    <script type="text/javascript">
        function disabledEventPropagation(event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            }
            else if (window.event) {
                window.event.cancelBubble = true;
            }
        } 
    </script>

And tried to unbind/bind fancybox based on confirmation results: Unbinding Fancybox on thumbnail fade

<a href="../Dialogs/CreateGameDialog.aspx" class="createGameLink showDialog" onclick=" if(!confirm('<%# Strings.LoggedIn_ComfirmStartNewGame %>')){ $('.createGameLink.showDialog').unbind('click.fb'); return false;} else{ bindCreateGameDialog(); return true;}">
<script type="text/javascript">
    $('.createGameLink.showDialog').setFancybox( { 'height': 400, 'width': 200 } );
</script>

setFancybox is a wrap of $.fn.fancybox.

But none of the approaches worked.

2 Answers 2

1

Instead of binding fancybox to a tag on the DOM, you can simply wait until it's needed to initialize it, and tie it to an element that isn't in the DOM. It's much cleaner to do it this way.

<a href="../Dialogs/CreateGameDialog.aspx" class="createGameLink showDialog" onclick=" if(confirm('<%# Strings.LoggedIn_ComfirmStartNewGame %>')){ openfancybox();} return false;">
    <script type="text/javascript">
        function openfancybox() {
            var a = document.createElement('a');
            var jqA = $(a);

            jqA.fancybox({
                'autoDimensions': false,
                'width': '400',
                'height': '200',
                // more options here, including which url/element to open, etc...
            });

            jqA.click();
        } 
    </script>
1
  • Thank you it works.. But why isn't it working with the stop onClick event propagation? Commented Nov 15, 2011 at 16:32
1

There is a more elegant way:

<script type="text/javascript">
    $('.createGameLink.showDialog').setFancybox({
        'height': 400,
        'width': 200,
        'onStart': function(){if(!confirm('<%# Strings.LoggedIn_ComfirmStartNewGame %>')){return false;}} 
    } );
</script>

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.