How to re-assign jQueryUI Dialog close button event

问题

Basically I am showing and hiding the Dialog manually via positioning so something like 'swfupload' works (dont ask hehe, the multi-upload flash control i use cannot be hidden or Flash does something funky... so I am using positioning to show/hide the Dialog).

So i set autoOpen: to true so when the page loads its not prehidden... and I just use jquery css to hide it with positioning and then hide its overlay with display:none; (versus a css file since i need to override style="" elements) ... and now i want to hide it...

but the Dialog auto-created close button automatically calls its own close functionality and sets 'display: none'. I want to override this to do my positioning ...

Any idea how to reassign it? I was thinking of somehow unbinding the click event on it and reassigning it. i dunno what is best way really to do it.

Thanks for any ideas :)

回答1:

You can bind to the close event and do your logic in there:

$('#dialogID')
        .dialog({ 
            autoOpen: true
        }).bind('dialogclose', function(event, ui) { /* Do position logic here */ });

I didn't test this code so not sure if you will manually have to call close in order to hide the dialog. If so just add in this line:

$('#dialogID').dialog("close");

Also remember that this close function will be called if the 'X' in the upper right corner of the dialog is clicked as well.

回答2:

This kinda helped me get on track:

i did: my html:

<body>  
  <div id="popup">
    Please upload the files you want associated with this payment below:
    <span id="dialog_file_upload_btn"></span>
  </div>

  <div>
    <a id="attach_1" href="#" class="upload_file">Attach</a>
    ....
    <a id="attach_2" href="#" class="upload_file">Attach</a>
    ...
    <a id="attach_3" href="#" class="upload_file">Attach</a>
  </div>
</body>

my css:

  .ui-widget-overlay{ 
    display: none;  
  }
  .ui-dialog{ /*need to override style="" with jquery. this is just for reference */
    top: -5000px;  
  }

my js:

function closeDialog(){
  $('.ui-dialog').css('top', -5000);
  $('.ui-widget-overlay').css('display','none');
}

var swfu;
var dialog;
var orig_top_css;

$(document).ready (function()
{


    dialog = $('#popup').dialog({
      closeOnEscape: false,
      modal: true,
      title: 'Upload File(s) related to this row'

    }).bind('dialogbeforeclose', function(event, ui) { 
      closeDialog();
      return false;
    });

    orig_top_css = $('.ui-dialog').css('top'); //get after dialog created, possibly see if oncomplete function. but this stores origial 'centered' value


    var settings =
    {
        flash_url: 'scripts/swfupload/Flash/swfupload.swf?'+Math.random(),
        ...

      upload_success_handler: function() { console.log ('success'); alert('You have successfully uploaded the file(s).'); dialog.dialog('close'); }, //catches close and doesnt really close in my dialogbeforeclose event
      upload_progress_handler: function(file, complete, total) { console.log ('progress' + file + " " + complete + " " + total); }

      ,prevent_swf_caching : true
      ,post_params: {payment_id: 'value1'}

    };

    swfu = new SWFUpload (settings);

    $('.upload_file').click(function() {                              
      orig_top_css_wopx = parseInt( orig_top_css.replace('px','') ,10);

      $('.ui-dialog').css('top', orig_top_css_wopx);
      $('.ui-widget-overlay').css('display','block');

      // prevent the default action, e.g., following a link
      return false;
    });


     $('.ui-dialog').css('top', -5000); //hide the dialog when the page loads, the popup also is hidden via css
});

Just need to add setPostParams to customize upload for each row and a progress bar and I'll be set :).

回答3:

I replaced my click function with something like so to get setPostParams working:

  $('.upload_file').click(function() {                              
      orig_top_css_wopx = parseInt( orig_top_css.replace('px','') ,10);

      $('.ui-dialog').css('top', orig_top_css_wopx);
      $('.ui-widget-overlay').css('display','block');


      var row_id = $(this).attr('id').replace('attach_','');          
      row_id = parseInt(row_id,10);          

      //alert(row_id);

      if(row_id && row_id > 0) {
        swfu.setPostParams({row_id_key: row_id}); //think this should dynamically set the post param
      } else { 
        alert('Error getting id'); 
      }

      // prevent the default action, e.g., following a link
      return false;
    });

and my bind event to reset the customparam:

.bind('dialogbeforeclose', function(event, ui) { 
          closeDialog();
          swfu.setPostParams({});
          return false;
        });

and to get progress working, i added handlers.js and fileprogress.js to my page (from their simpledemo example). then changed the callbacks to their settings:

  custom_settings : {
    progressTarget : "fsUploadProgress",
    cancelButtonId : "btnCancel"
  },
  file_queued_handler : fileQueued,
  file_queue_error_handler : fileQueueError,
  file_dialog_complete_handler : fileDialogComplete,
  upload_start_handler : uploadStart,
  upload_progress_handler : uploadProgress,
  upload_error_handler : uploadError,
  upload_success_handler : uploadSuccess,
  upload_complete_handler : uploadComplete,
  queue_complete_handler : queueComplete    // Queue plugin event

and added the html to get that to work:

<div id="popup">
  Please upload the files you want associated with this row below:
  <span id="dialog_file_upload_btn"></span>

  <input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
    <div class="fieldset flash" id="fsUploadProgress">
            <span class="legend">Upload Queue</span>
  </div>
    <div id="divStatus">0 Files Uploaded</div>
</div>

来源：https://stackoverflow.com/questions/3355135/how-to-re-assign-jqueryui-dialog-close-button-event

标签

jquery

jquery-ui

jquery-ui-dialog