CODEWITHSUNDEEP
firefoxtinymcejquery-ui-dialog
SP-TY
SP-TY

Reputation: 973

jQuery UI Dialog with TinyMCE blocks first button click in Firefox

I have a jQuery UI Dialog form, which has a TinyMCE editor. It is working well with Google Chrome and Internet Explorer 8+.

But in Firefox, when I edit/change the content in the TinyMCE editor and while clicking the submit button, the page gets focused on the TinyMCE editor for the first time. And the second time it gets submitted.

I am using a jQuery validation plugin for the form validation (http://jqueryvalidation.org/). And my code is as follows (This works perfect in IE 8+ and Google Chrome):

//form submit function and the form validation 
jQuery('#frm').submit(function() {
        // update underlying textarea before submit validation
        tinyMCE.triggerSave(true,true);
    }).validate({
        errorClass: 'error',
        rules: {
            //validation rules
            'users':'required'
        },
        submitHandler: function(form) {
            //submit confirmatiom    
            if (confirm('Are you sure you want to submit the form?' ){
                $('#frm').ajaxSubmit({
                    beforeSubmit:   beforeFormSubmit, // pre-submit callback
                    success:        afterSubmit  // post submit callback
                });
                return false;
            }
        }
}); 

//pre-submit callback 
function beforeFormSubmit(){
  $('#btn_submit').val("Saving...");
  $.blockUI(); //block ui plugin
} 

//post submit callback 
function afterSubmit(response, status)  {
  if(status == 'success') {
        $('#message_box').html("Success.")
  }else{
        $('#message_box').html("Error : "+response)
  }
  $.unblockUI();  
}

Can anyone advise me about what I'm doing wrong here?

Upvotes: 1

Views: 305

Answers (1)

SP-TY
SP-TY

Reputation: 973

Finally, found the solution!

Its due to modal : 'true' when creating dialog() instance. I changed it to modal : 'false' and it fixed the problem.

Upvotes: 1

Related Questions