Flip a Modal jquery Dialog disable my Javascript

Question

i try to flip a modal dialog of jquery with flippy plugin

Here my code for create the dialog :

$(document).ready(function(){
  [...]
  $('<div class="modal-popup"><div>TEST</div></div>')
            .hide() // Hide the dialog for now so we prevent flicker
            .appendTo(document.body)
            .filter('div') // Filter for the div tag only, script tags could surface
            .dialog({ // Create the jQuery UI dialog
                create: function () {
                   $(this).parent().wrap('<div class="flip" style="border:1px solid red;position:relative;z-index:50000;" />');
                },
                title: link.data('dialog-title'),
                dialogClass: "dialog_shadow",
                modal: true,
                resizable: false,
                draggable: true,
                show: { effect: 'fade', duration: 250 },
                hide: { effect: 'fade', duration: 400 },
                width: 'auto',
                beforeClose: function () {
                    resetForm($(this).find('form'));
                    $('input[type=submit]').css('cursor', 'hand');
                }                       
            })
            .end();
   });

When the dialog appear and when i click on a link, i flip the dialog and i display the same content with this code :

                $('.popCallActionRegister > a').click(function (e) {
                    e.preventDefault();

                    var content = $('div.flip').html(); // ModalDialog -> div.ui-dialog all html

                    $('div.flip').flippy({
                        verso: content,
                        direction: "LEFT",
                        duration: "250"
                    });
                });

That work very well but i lost all Javascript in my content and i can't drag my dialog., the call ajax don't work in my new flipped content

How i can keep my javascript active ? Because it's the same content and i just do a flip...That's all.

UPDATE :

HERE jsFiddle

this solution integrate the propositions below

Any help will be appreciated !

Answer 1

jQuery events can only be attached to existing elements. I made a few assumptions on what your html is, and what you want to achieve, so I may be wrong, but when you do this:

var content = $('div.flip').html();

You are copying the content of your div, and not the events attached to it. So it is not "disabling your javascript", you are just creating new elements with no events attached. So try this instead:

var content = $('div.flip').clone(true, true);

That should copy the element AND all the events, but again, as I don't know what happens behind the scenes of the flip plugin, it may not work.

If you were not using jQuery UI's modal, I would tell you to attach you events using .on() from jQuery, or to re-attach all the events using onReverseFinish callback from the flip plugin.

---

EDIT 1

Ok, I had a look at the flippy plugin, and the way it works is conflicting with jQuery UI dialog and I couldn't find a way to make them work together without editing the plugin's source. Flippy animates Y axis of your container to 90deg, swaps the content by removing what is inside the container and replacing with whatever you provide as "verso" parameter, and animates it back to 0. The problem is that when the dialog element gets removed, jQuery UI runs a method to clear all the references to the dialog widget (you can see that even the overlay disappears).

My suggestion would be to find a more flexible plugin, or edit the one you are using. Instead of removing the content of the flipbox, have your content split in two sub containers, than just switch their display property. For example, split your content:

<div class="flipbox">
    <div class="ui-dialog whatever">
        <div class="toggle_me">Content 1 - front</div>
        <div class="toggle_me" style="display:none;">Content 2 - back</div>
    </div>
</div>

Find this part of the plugin:

this.jO.empty().append(this._Verso);

And change it to something like this:

this.jO.find('.toggle_me').toggle();

Answer 2

See my example: http://codepen.io/jdnichollsc/pen/IcDge

Happy Codings