Search code examples
jquery-uijquery-pluginszclip

Using zClip on click event of a jQuery UI Dialog button


I want to use a jQuery zClip plugin in jQuery UI dialog button, but I don't know how to adapt in this case. Anyone can help me?

Thank you in advance!

    $.ajax({
        url: '/music/lyrics/' + hash,
        success: function (data) {
            data = jQuery.parseJSON(data);
            $('#dialog-modal').html(data.lyrics);
            $('#dialog:ui-dialog').dialog('destroy');
            $('#dialog-modal').dialog({
                modal: true,
                resizable: false,
                title: 'Lyric: ' + data.song,
                width: 500,
                height: 400,
                buttons: {
                    'Copy' : function () {
                         // use zClip to copy $('#dialog-modal').text() here
                     }
                }
            });
        },
        error: function (msg) {
            alert(msg);
        }
    });

Solution

  • I would ignore the normal way dialog buttons handle actions, and separately use the way zClip handles actions. Something like this:

    $.ajax({
            url: '/music/lyrics/' + hash,
            success: function (data) {
                data = jQuery.parseJSON(data);
                $('#dialog-modal').html(data.lyrics);
                $('#dialog:ui-dialog').dialog('destroy');
                $('#dialog-modal').dialog({
                    modal: true,
                    resizable: false,
                    title: 'Lyric: ' + data.song,
                    width: 500,
                    height: 400,
                    buttons: {
                        'Copy' : function () { return true; }
                    }
                });
                $('#dialog-modal ui-button:contains(Copy)').zclip({
                    path:'../whatever/ZeroClipboard.swf',
                    copy:$('#dialog-modal').text()
                });
            },
            error: function (msg) {
                alert(msg);
            }
        });