About submitting using the jBox dialog box, the problem cannot be displayed. _ javascript tips-js tutorial

Source: Internet
Author: User
When jBox is used in ASP. NETForm, When you click an event on the client registered by the button, you will find that the dialog box cannot be displayed. jBox is a good dialog box component.
When jBox is used in ASP. NET Form, the dialog box cannot be displayed when you click an event on the client registered by the button.
The result is that the page is submitted in a flash, causing the dialog box to flash and even fail to see it. The Mode dialog box fails.
First, buttons are processed by default. For common ASP. NET buttons, the form is submitted, and the page is refreshed when the form is submitted. Therefore, in order not to submit the form, you need to block the default button behavior, which can be achieved through the following code.

The Code is as follows:


Function stopDefault (e ){
// Prevent the default browser action (W3C)
If (e & e. preventDefault)
E. preventDefault ();
Else
// A closed cut for stoping the browser action in IE
Window. event. returnValue = false;
Return false;
}


Secondly, when closing the dialog box, we hope to be able to submit the form, which can also be achieved through scripts. Is to call the form object submission method submit ();

In implementation, we also need to find the Client ID of the control, which can be obtained as follows:

The Code is as follows:


Var btnSaveId = "<% = this. btnSave. ClientID %> ";
Var form1Id = "<% = this. form1.ClientID %> ";


The client for Button clicking is as follows:

The Code is as follows:


// Click Event Processing for the Registration button
$ ("#" + BtnSaveId). click (function (e ){

// Set to submit the form when closing the dialog.
Var options = {
Closed: function (){
Alert ("submit ");
// Find the form to be submitted
$ ("#" + Form1Id). submit ();
}
};

// Display the jBox dialog box
Var info = 'jquery jBox

Version: v2.0
Date: 2011-7-24
';
Info + = 'official Website: http://kudystudio.com/jbox </a> ';
$. JBox (info, options );

// Stop default event processing
StopDefault (e );

});


For jQuery, returning false in the event processing method can accomplish similar functions.

However, the two methods are different. Return false not only prevents the event from bubbling up, but also blocks the event itself.
StopDefault only blocks the default event and does not prevent event bubbles.
It can also prevent event bubbles, which requires the following method to be called.

The Code is as follows:


Function stopBubble (e ){
// If an event object is provided, then this is a non-IE browser
If (e & e. stopPropagation)
// And therefore it supports the W3C stopPropagation () method
E. stopPropagation ();
Else
// Otherwise, we need to use the Internet Explorer
// Way of canceling event bubbling
Window. event. cancelBubble = true;
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.