Loading ...

Jquery plugin : Fast confirm like javascript confirm | CodeAsp.Net

Jquery plugin : Fast confirm like javascript confirm

 /5
0 (0votes)

In my recent project, client demanded that confirm button text should be ‘Yes’ and ‘No’ instead of ‘O’ and cancel. I have gone through many forums posts amd  tried out many things to to change text of  JS Confrim box button but didn’t succeed.Even tried vbscript ( Stackoverflow :Javscript Confirm ) , but it didn’t work in FF and Chrome.

Through Google I found a jQuery Plugin Page that lists all plugin that have been tagged with the term confirm. Wanting something fast and easy, I drawn Fast Confirm as the name suggests it is extremely fast and easy to implementSmile.


Here is the Code snippet

<!DOCTYPE html PUBLIC"-// W3C//DTD XHTML 1.0 Transitional//EN"" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link href="jquery.fastconfirm.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.fastconfirm.js" type="text/javascript"></script>
</head>

<body style="background:#EAF4FF; border:0; color:#2F2F2F; font-family:verdana,arial,sans-serif; font-size:80%; font-style:inherit; font-weight:inherit bold;">
<form id="form1" runat="server">
<p>
Integer sollicitudin tortor quis sem bibendum malesuada?
Nam cursus laoreet commodo!
</p>
<p>
<asp:Button ID="btnClick" runat="server" Text="Confirm" onclick="btnClick_Click"/>
</p>

<script type="text/javascript">
$(function() {
$('#<%=btnClick.ClientID %>').click(function(e) {
e.preventDefault();
$(this).fastConfirm({
questionText: "Are you sure you want to ........ ???",
onProceed: function(e) {
// Implement your proceed logic here
//Below i have used __doPostBack('','') function to fire default server event of the btnClick button
// On click of 'Yes'(Ok) button.
__doPostBack('<%=btnClick.ClientID %>', 'btnClick'); //By calling __doPostBack('','') function we can mimic JS Confirm box
},
onCancel: function(e) {
//write your cancel button logic here
}
});
});
});
</script>

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" />
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
</form>
</body>
</html>

I checked out the demo and read through the docs, within few minutes I had my jQuery confirm implemented, only problem faced while mimicking JS Confirm box was that there was no postback (I mean default event doesn’t fire) happens when I click yes button ( like it happens in JS Confirm box) ,  To fire the event on click of Yes button I called __doPostback function in onProceed function .With _doPostBack in the place every thing work perfect for me and confirm looks pretty stylish and easy to use.

Here is a sample project for your reference !!

Note : To know more about __doPostback ( firing server event from javascript) please refer below  links
http://wiki.asp.net/page.aspx/1082/dopostback-function/
http://geekswithblogs.net/mnf/archive/2005/11/04/59081.aspx

Comments (no comments yet)

  • :*
  • :*
  • :
 *

Top Posts