Home >Web Front-end >JS Tutorial >Solution to the problem that the submission using jBox dialog box cannot pop up_javascript skills

Solution to the problem that the submission using jBox dialog box cannot pop up_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:48:451168browse

jBox is a good dialog component.
When using jBox in ASP.NET Form, you will find that the dialog box cannot pop up in the client click event registered by the button.
The page is submitted in a flash, causing the dialog box to flash by or even not be seen at all. Causes the modal dialog to fail.
First of all, the button will have default processing. For ordinary ASP.NET buttons, it will cause the form to be submitted. Submitting the form will cause the page to be refreshed. Therefore, in order not to submit the form, you need to prevent the default behavior of the button, which can be achieved with the following code.

Copy code The code is as follows:

function stopDefault( e ) {
// Prevent the default browser action (W3C)
if ( e && e.preventDefault )
e.preventDefault();
else
// A shortcut for stopping 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. It is to call the submit method submit() of the form object;

In the implementation, we also need to find the client identifier of the control, which can be obtained as follows

Copy code The code is as follows:

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

The client-side processing of button clicks is as follows

Copy code The code is as follows:

// Register button click event processing
$("#" btnSaveId).click(function ( e ) {

//Set to submit the form when closing the dialog
var options = {
closed: function () {
alert("submit");
// Find the form that needs to be submitted
$("#" form1Id ).submit();
}
};

// Display jBox dialog box
var info = 'jQuery jBox
< ;br />Version: v2.0
Date: 2011-7-24
';
info = 'Official website:http://kudystudio.com/jbox';
$.jBox(info, options);

// Prevent default event handling
stopDefault(e);

});

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

But there is a difference between these two methods. Returning false not only prevents the event from bubbling up, but also prevents the event itself.
stopDefault only blocks the default event itself and does not prevent the event from bubbling.
You can also prevent events from bubbling, which requires calling the following method.
Copy code 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 cancelling event bubbling
window.event.cancelBubble = true;
}
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn