0

彼は私のカスタム jQuery コードです。

/* 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 ボタン コード:

<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:

<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>

ここで、私の質問とは関係のないことがいくつかあります。それで、私がやろうとしていることの基本的な考えをあなたに与えるために...私は、プロジェクトのファイルアップロード機能を必要とする管理システムに取り組んでいます。各プロジェクトは jQuery UI タブを使用します。アップロードされたファイルのリストがあるファイル タブと、ファイルのアップロード ボタンのあるサイドバーがあります。そのボタンは、コード内で $uploadBtn として参照されます。

ページにロードされたすべての必要な jQuery および PLUpload ファイル。

私の問題は、jQuery UI Dialog ウィジェットを使用して ajax ファイルからアップロード フォームをロードしたいことです。アップロードボタンをクリックするたびにその部分が機能しますが、PLUpload はアップロードダイアログが最初に開いたときにのみ適切に初期化されます。ダイアログの beforeClose ハンドラでインスタンスを破棄しようとしましたが、うまくいかないようです。

初回だけでなく、アップロード ダイアログを開くたびに PLUpload を適切に初期化するにはどうすればよいでしょうか!? ありがとう！

スクリーンショット

4

2 に答える 2

1

以下の .remove() の使用法を使用して、以前に起動した jQuery UI ダイアログを要素化し、それがうまく機能することを発見しました。

'Close':function()
{
  $(this).dialog('close');
  $(this).remove();
}
于 2011-09-05T22:05:38.580 に答える
0 
$.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;
}});
于 2011-12-15T22:48:38.507 に答える