Make PLUpload play nice with ajax loaded jQuery Dialog

He is my custom jQuery code:

/* Files */
$(document).ready(function() {

    // -----------------------------------------------------
    // Define Variables
    // -----------------------------------------------------
    var $filesTab = $("#files");
    var $filesList = $("#files-list");
    var $foldersList = $("#file-folders");
    var $uploadBtn = $("#upload-file");

    var objectData = {
        "object" : $filesTab.data("object"),
        "object_id" : $filesTab.data("object-id")
    };

 开发者_开发知识库   // -----------------------------------------------------
    // Load data
    // -----------------------------------------------------
    var filesDataTable = $filesList.dataTable({
        "oLanguage" : {
                'sSearch': "Search Files:"
        },
        "iDisplayLength" : 25
    });

    $foldersList.bind("load", function() {
        // Load Folders
        $foldersList.load("/global-ajax/files/get-folders/", objectData);
    }); $foldersList.trigger("load");




    // -----------------------------------------------------
    // Events
    // -----------------------------------------------------
    $uploadBtn.bind("click", function() {
        debug.log("Clicked upload file btn");           
        var uploadFileOptions = objectData;

        // Get data and create modal
        $.get("/global-ajax/files/get-upload-modal/", uploadFileOptions, function(response) {
            debug.log("Ajax returned");
            $(response).dialog({
                draggable: false,
                modal: true,
                resizable: false,
                stack: false,
                title: "Upload a File",
                width: '50%',
                buttons: {
                    'Upload': function() {
                        // submit, do callback
                        var $form = $(this);
                        var serialized_form_data = decodeURIComponent($form.serialize());
                        // console.log("Serialized Form Data: " + serialized_form_data);
                        $form.addClass("loading").find("input, select, textarea").attr("disabled", true);
                        $.post("/global-ajax/files/upload-file/", serialized_form_data, function(json) {

                            $form.removeClass("loading").find("input, select, textarea").attr("disabled", false);
                        }, "json");
                    },
                    'Cancel': function() {
                        $(this).dialog("close");
                    }
                },
                open: function(event, ui) {

                    var uploader = new plupload.Uploader({
                        runtimes : 'gears,html5,flash,silverlight,browserplus',
                        browse_button : 'pickfiles',
                        container : 'file-upload',
                        max_file_size : '10mb',
                        url : 'upload.php',
                        flash_swf_url : '/app/javascript/plupload/plupload.flash.swf',
                        multi_selection : false
                    });


                    uploader.bind('Init', function(up, params) {
                        $('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
                    });

                    $('#uploadfiles').live("click", function(e) {
                        uploader.start();
                        e.preventDefault();
                    });

                    uploader.bind('FilesAdded', function(up, files) {
                        $.each(files, function(i, file) {
                            $('#filelist').append(
                                '<div id="' + file.id + '">' +
                                file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
                            '</div>');
                        });

                        up.refresh(); // Reposition Flash/Silverlight
                    });

                    uploader.bind('UploadProgress', function(up, file) {
                        $('#' + file.id + " b").html(file.percent + "%");
                    });

                    uploader.bind('Error', function(up, err) {
                        $('#filelist').append("<div>Error: " + err.code +
                            ", Message: " + err.message +
                            (err.file ? ", File: " + err.file.name : "") +
                            "</div>"
                        );

                        up.refresh(); // Reposition Flash/Silverlight
                    });

                    uploader.bind('FileUploaded', function(up, file) {
                        $('#' + file.id + " b").html("100%");
                    });             

                    uploader.init();
                }
            });


        });

    });
});

HTML Button Code:

<div class="g3" id="files-sidebar">
    <a class="btn green icon big i_cloud_upload" id="upload-file" href="javascript:;">Upload File</a>
    <h4>Folders</h4>
    <div id="file-folders"><ul>
    <li title="Drag and drop files to add to folder" class="i_folder selected">CAD Files (3)</li>
    <li class="i_folder">Estimates (1)</li>
    <li class="i_folder">Photos (24)</li>
    <li class="i_folder">Uncategorized (11)</li>
</ul>
<p>You can create a custom folder when uploading or editing a file.</p>
</div>
    </div>

HTML Ajax Loaded into Dialog:

<form id='' method='POST' enctype='multipart/form-data' action=''  class="">
<input type="hidden" name="key" value="3b53c6cd33f342246b5cbd59440dac18" />
    <fieldset>

            <section id="field_description" class="field">
                <label for="description" id="">Description: </label>
                <div>
                    <textarea id="description" name="description" class="textarea maxwidth-400 "   ></textarea>
                    <span></span>
                </div>

            </section>

            <section id="field_revision_no" class="checkbox-field field">
                <label for="revision_no" id="">Upload as New File</label>
                <div>           
                    <input type="radio" id="revision_no" name="revision"  value="no" class="radio "  CHECKED="CHECKED"   />


                </div>
            </section>

            <section id="field_revision_yes" class="checkbox-field field">
                <label for="revision_yes" id="">Upload as Revision</label>
                <div>           
                    <input type="radio" id="revision_yes" name="revision"  value="yes" class="radio "   />


                </div>
            </section>
                <div id="file-upload">
            <div id="filelist"></div>
            <a id="pickfiles" href="#">[Select files]</a>
        </div>
    </fieldset>
</form>

There are a few things going on here that don't relate to my question. So, to give you a basic idea of what I'm trying to do... I'm working on an Admin system that requires file upload capability for projects. Each project uses jQuery UI Tabs. There is a files tab that has a list for uploaded files and a sidebar with an upload file button. That button is referenced in the code as $uploadBtn.

All necessary jQuery and PLUpload files loaded on the page.

My difficulty is that I want to load my upload form from an ajax file using the jQuery UI Dialog widget. I've got that part working every single time you click the upload button, but PLUpload only initializes properly the first time the upload dialog opens. I've tried destroying the instance in the beforeClose handler of Dialog, but that doesn't seem to work.

How can I make PLUpload initialize properly every single time I open the upload dialog instead of just the first time!? Thanks!

Screenshot

---

I've used the following usage of .remove() to element a previously launched jQuery UI Dialog and have found it working to much success.

'Close':function()
{
  $(this).dialog('close');
  $(this).remove();
}

---

$.extend($.ui.dialog.overlay, { create: function(dialog){
  if (this.instances.length === 0) {
    // prevent use of anchors and inputs
    // we use a setTimeout in case the overlay is created from an
    // event that we're going to be cancelling (see #2804)
    setTimeout(function() {
      // handle $(el).dialog().dialog('close') (see #4065)
      if ($.ui.dialog.overlay.instances.length) {
        $(document).bind($.ui.dialog.overlay.events, function(event) {
          var parentDialog = $(event.target).parents('.ui-dialog');
          if (parentDialog.length > 0) {
            var parentDialogZIndex = parentDialog.css('zIndex') || 0;
            return parentDialogZIndex > $.ui.dialog.overlay.maxZ;
          }

          var aboveOverlay = false;
          $(event.target).parents().each(function() {
            var currentZ = $(this).css('zIndex') || 0;
            if (currentZ > $.ui.dialog.overlay.maxZ) {
              aboveOverlay = true;
              return;
            }
          });

          return aboveOverlay;
        });
      }
    }, 1);

    // allow closing by pressing the escape key
    $(document).bind('keydown.dialog-overlay', function(event) {
      (dialog.options.closeOnEscape && event.keyCode
       && event.keyCode == $.ui.keyCode.ESCAPE && dialog.close(event));
    });

    // handle window resize
    $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
  }

  var $el = $('<div></div>').appendTo(document.body)
  .addClass('ui-widget-overlay').css({
    width: this.width(),
    height: this.height()
  });

  (dialog.options.stackfix && $.fn.stackfix && $el.stackfix());

  this.instances.push($el);
  return $el;
}});