Develop Reference

Show jquery dialog confirm/cancel modal. Form submit on confirm click

I have a jquery-ui modal dialog on my page which I show when a user clicks a Decline button on a control which is contained within an asp.net UpdatePanel, there are many of these controls on the page.
Script:
function confirmDecline(event) {
event.preventDefault();
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Confirm": function () {
$('form').submit();
return true;
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
Pod markup:
<div class="dms-pod">
<ul>
<li><strong><asp:Literal ID="litCompanyName" runat="server" /></strong></li>
<li><asp:Literal ID="litVatNumber" runat="server" /></li>
<li><asp:Literal ID="litTown" runat="server" /></li>
</ul>
<asp:Panel ID="pnlDmsForm" runat="server" CssClass="dms-form" DefaultButton="btnAccept">
<asp:TextBox ID="txtDmsNumber" runat="server" placeholder="DMS number" />
<asp:RequiredFieldValidator ID="reqDmsNumber" runat="server" ErrorMessage="Invalid DMS number" Display="Dynamic" CssClass="error" ControlToValidate="txtDmsNumber" />
<ajaxToolkit:ValidatorCalloutExtender ID="valDmsNumber" runat="server" TargetControlID="reqDmsNumber" HighlightCssClass="error" />
<div class="dms-buttons">
<div class="container">
<asp:LinkButton ID="btnAccept" runat="server" CssClass="btn" Text="accept" OnClick="btnAccept_Click" />
</div>
<div class="container">
<asp:LinkButton ID="btnDecline" runat="server" CssClass="btn-alt" Text="decline" OnClick="btnDecline_Click" OnClientClick="confirmDecline(event)" />
</div>
</div>
<div class="clear"></div>
</asp:Panel>
<div class="clear"></div>
<asp:HiddenField ID="hdnDealershipIRLinkID" runat="server" />
Which is then contained inside an update panel:
<asp:UpdatePanel ID="updPendingDms" UpdateMode="Always" runat="server">
<ContentTemplate>
<asp:Repeater ID="rptPendingDmsRequests" runat="server" OnItemDataBound="rptPendingDmsRequests_ItemDataBound" OnItemCreated="rptPendingDmsRequests_ItemCreated">
<ItemTemplate>
<uc:DmsRegisterPod runat="server" ID="ucDmsRegisterPod" />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
I'm using event.preventDefault() to stop the button action from firing, however, I'd also like to allow the action to continue if the user clicks the Confirm button. I had assumed I could just use:
$('form').submit();
In the dialog Confirm function, but this fires the validators of the other controls in the repeater/update panel. Is there a way to achieve this?

Managed to solve this, posting the answer in case it helps anyone else facing a similar problem.
I pass in the id of the control which triggered the click:
OnClientClick="confirmDecline(event, this.id)"
I then fire off __doPostBack with this id in the dialog Confirm function:
function confirmDecline(event, controlId) {
event.preventDefault();
controlId = controlId.replace(/_/g, '$');
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Confirm": function () {
$(this).dialog("close");
__doPostBack(controlId, '');
return true;
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}

button and label event fire using jquery

I have problem with jQuery. I have one button, one label, and one div in C#.
When I clicked on the button , the label shows some message after that the div will be show . So "button click" and "label shows" occurs only the div will be show. 2."button click" and "label Not shows" occurs, the div will not be show.
<script type="text/javascript">
$(document).ready(function () {
if ($('#<%=btnSave.ClientID %>').click(function () {
if ($('#<%=lblRegisteredUser.ClientID %>')==enable) {
$('#<%=RegisteredUser.ClientID %>').show();
$('#<%=btnCreateAccount.ClientID %>').hide();
};
}));
});
</script>
Edit: Code from the comments
<div class="form-controls1" id="RegisteredUser" runat="server">
<asp:TextBox ID="txtRegisteredEmail" placeholder="Email Address" runat="server" class="text-input required email"></asp:TextBox>
<asp:Label ID="lblRegisteredUser" runat="server" Text="" ForeColor="red"></asp:Label><br />
</div>
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save Comment" ValidationGroup="Group2" />

Want to be able to close a Modal Popup when clicked outside of it

I have a modal popup extender and a panel inside of an update panel. I do have a Close button which I bind with the CancelControlId. I however, would like to be able to click outside of my modal/panel to close the panel. (instead of using the close button).
I tried a couple things and a plugin clickoutside. Nothing seems to help. Any help or advice is much appreciated. Thanks.
<asp:Content ID="Content3" ContentPlaceHolderID="rightNavigation" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="mls_title" class="MLS_Title">
<asp:Label ID="lblTitle1" Text="Tasks" runat="server" class="MLS_titleLbl" /><br />
</div>
<asp:UpdatePanel ID="pnlMap" runat="server">
<ContentTemplate>
<div>
<asp:Button ID="btnMap" runat="server" Text="MAP" CausesValidation="false" CssClass="btnMap" />
<ajax:ModalPopupExtender
ID="ModalPopupExtender1"
runat="server"
TargetControlID="btnMap"
PopupControlID="panel1"
PopupDragHandleControlID="PopupHeader"
Drag="true"
BackgroundCssClass="ModalPopupBG">
</ajax:ModalPopupExtender>
<asp:Panel ID="panel1" runat="server">
<div class="popup_large">
<asp:Label ID="Label7" Text="Floor Plan" runat="server" stle="float:left"></asp:Label>
<asp:ImageButton ID="ImageButton1" runat="server" ToolTip="No" ImageUrl="~/Images/no.png" Style="float: right; margin-right: 20px" />
<br />
<asp:ImageButton ID="img" runat="server" Height="30em" Width="45em" />
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Here is a link to an example that adds to the background onclick to close the modal:
http://forums.asp.net/t/1528820.aspx
Copied the key bits here for reference:
function pageLoad() {
var mpe = $find("MPE");
mpe.add_shown(onShown);
}
function onShown() {
var background = $find("MPE")._backgroundElement;
background.onclick = function() { $find("MPE").hide(); }
}
<AjaxToolKit:ModalPopupExtender ID="mdlPopup" BehaviorID="MPE" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" />

C#
<AjaxToolKit:ModalPopupExtender .... BackgroundCssClass="jsMpeBackground" />
JavaScript (using jQuery)
jQuery('.jsMpeBackground').click(function () {
var id = jQuery(this).attr('id').replace('_backgroundElement', '');
$find(id).hide();
});

I had to do it this way so that I was able to click the actual popup without it closing, as I have functional user controls such as tab sections and textboxes on the popup.
<script type="text/javascript">
//Hide's Doc Center when clicking outside
function pageLoad(sender, args) {
if (!args.get_isPartialLoad()) {
$addHandler($find("MPE")._backgroundElement, "click", closePopup);
}
}
function closePopup(e) {
$find("MPE").hide();
}
//End
</script>
Now just make sure your BehaviorID in your actual ModelPopupExtender matches up with the tag above. Like so:
<ajaxToolkit:ModalPopupExtender ID="Popup" runat="server" PopupControlID="Container" BehaviorID="MPE" TargetControlID="fakeTargetControl" BackgroundCssClass="modalBackground" CancelControlID="btnCancel" />
Basically I think this just handles the 'click' event of the _backgroundElement attr of the modal popup, and on that event runs the closePopup() function.

write a dynamically created script that is added, in my example, when the modal popup extender is loaded. Note: In order to bind this event handler to the ModalPopupExtender.OnLoad event, you need to add a reference (in client-side code, you can add 'OnLoad="mpeExample_Load"' to your ModalPopupExtender tag).
protected void mpeExample_Load(object sender, EventArgs e) {
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"hideModalPopupViaClient", String.Format(#"function hideModalPopupViaClient() {
{
var modalPopupBehavior = $find('{0}');
if (modalPopupBehavior) modalPopupBehavior.hide();}}",
mpeExample.ClientID), true);
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "pageLoad", String.Format(#"function pageLoad() {
{
var backgroundElement = $get('{0}_backgroundElement');
if (backgroundElement) $addHandler(backgroundElement, 'click', hideModalPopupViaClient);
}}",
mpeExample.ClientID), true);}

How to show pop up div from server side on button click

I am working on Payment page and i want to show a popup for showing message your payment is processing. so for now i am using CustomValidator and Submit Button. and i want to show this popup when Args is valid. my code is.
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="" OnServerValidate="CustomValidator1_ServerValidate"
EnableClientScript="true" ValidationGroup="Authorize"></asp:CustomValidator>
<asp:Button ID="SubmitButton" runat="server" Text="Pay now" CausesValidation="true" CssClass="blue paynow" style="width:200px;"
ValidationGroup="Authorize" OnClick="SubmitButton_Click" OnClientClick="validate(ContentPlaceHolder1_chk_agree);" />

One better approach is to go with "updateProgress".
Place your submit button inside a updatePanel and place a loading gif image inside updateProgress which will show below loading image when payment progress is going on and will close automatically when payment is complete.
Loading ....
<asp:UpdateProgress id="updateProgress" runat="server">
<ProgressTemplate>
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/loadingNew.gif" AlternateText="Loading ..." ToolTip="Loading ..."/>
</ProgressTemplate>
</asp:UpdateProgress>

To show a message box after validation, you can do the following:
Add the following javascript to your <head>
<script language="javascript">
function SubmitButton_ClientClick()
{
bool isValid = Page_ClientValidate("Authorize"); //triggers validation
if (isValid)
{
alert('Your payment is processing');
}
return isValid;
}
</script>
Then, change your button like this:
<asp:Button ID="SubmitButton" runat="server" Text="Pay now" CausesValidation="true"
CssClass="blue paynow" style="width:200px;"
ValidationGroup="Authorize" OnClick="SubmitButton_Click"
OnClientClick="return SubmitButton_ClientClick();" />
An even better approach is to use a popup div - here is a very basic example:
Add this somewhere in your <body>
<div id="popup_box" style="height:300;width:300;position:absolute;top:150;left:350;border:3px solid red;background:#d8d8d8;display:none;">
<h1>Payment is processing</h1>
<button id="popupBoxClose" onclick="document.getElementById("popup_box").style.display = 'none';">Close</button>
</div>
And modify the SubmitButton_ClientClick like this:
function SubmitButton_ClientClick()
{
bool isValid = Page_ClientValidate("Authorize"); //triggers validation
if (isValid)
{
document.getElementById("popup_box").style.display = '';
}
return isValid;
}

jQuery in .net validate dropdownlist, fadein and fadeout panels

I have a dropdownlist control ddlAffilation, a panel pnlForms, a panel Complete, a button Submit, a button Return.
I have a validationcontrol on the dropdownlist.
here is my jquery code
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function () {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
});
$("#<%= Return.ClientID %>").click(function () {
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
});
});
</script>
I have 2 problems:
1) With this jQuery code, I can go back and forth (fade out pnlForms, fade in Complete when click on Submit and vice versa when click on Return) only when i don't choose any value in the dropdownlist box. If I choose any value in the dropdownlist, the Return button doesn't work.
2) The jquery code bypass the .net server validation control. I need the code not do anything if no value is selected from the dropdownlist. I have tried
var isValid = true;
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
isValid = false;
return false;
}
if (isValid == true) {
...
but it doesn't work. What's the best way to do this?
Thanks,
==================================================================================
I can't add an answer to my own question so I reply to John here:
Thanks John. I have my code like this and it solves problem 2.
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#<%= Return.ClientID %>").click(function () {
alert('blah2');
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
});
</script>
However, problem 1 still exists. Let me clarify. I have a few textboxes, a dropdownlist and a submit button to collect feedback from the users. They are all in the panel pnlForms.
All controls can be empty except for the dropdownlist. We took care of this using your code and a server validation control.
when the users click the submit button, I want the pnlForms to fadeOut and a hidden panel called pnlComplete to fadeIn. The pnlComplete has a text saying thanks for the feedback and a button called Return that let the users send another feedback.
When the users click on the Return button, the opposite happens here. The pnlComplete fadeOut and the pnlForms fadeIn.
The Submit button works well but the Return button doesn't work at all. I set some alert() inside the Return.click(function but it doesn't hit.
Any ideas?
Here is the code of the whole page.
<%# Page Title="" Language="C#" MasterPageFile="~/Master.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="content" runat="Server">
<asp:UpdatePanel ID="pnlForms" runat="server">
<ContentTemplate>
<fieldset>
<legend>Your Information</legend>
<ol>
<li>
<label for="ctl00_content_name">
Your Name:</label>
<asp:TextBox ID="Name" runat="server" Width="150px"></asp:TextBox>
<em class="optional">Optional </em></li>
<li>
<label for="ctl00_content_status">
Your Affiliation:*</label>
<asp:DropDownList ID="ddlAffilation" runat="server" Width="155px">
<asp:ListItem Text="--Select One--" Value="" Selected="True" />
<asp:ListItem>F</asp:ListItem>
<asp:ListItem>S</asp:ListItem>
<asp:ListItem>T</asp:ListItem>
</asp:DropDownList>
<em class="required">Required
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage=" - Please select your affiliation"
ControlToValidate="ddlAffilation" SetFocusOnError="True" ForeColor=""></asp:RequiredFieldValidator>
</em></li>
</ol>
</fieldset>
<div style="text-align: center;">
<asp:Button ID="Submit" runat="server" Text="Submit" OnClick="submit_Click" /></div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="Complete" style="display: none;">
<asp:UpdatePanel ID="pnlComplete" runat="server">
<ContentTemplate>
<p>Thank you</p>
<div style="text-align: center;">
<asp:Button ID="Return" runat="server" Text="Return" /></div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="cpClientScript">
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#<%= Return.ClientID %>").click(function () {
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(1000).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
});
</script>
</asp:Content>

I'm not sure if I read your question right or not, but if your issue is that you don't want the jquery to continue firing and allow the form to submit if the dropdown is empty do this:
Instead of attaching a .click event to your button, attach a .submit event to your form. Then you want to use e.PreventDefault() to stop the main submit execution if its not valid
Eg:
$("#FORMNAME").submit(function(e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
// Submitting form...
}
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
Also, you should ALWAYS do server validation along with your client validation.. otherwise all someone has to do is directly submit / bypass your javascript checks
Edit for your edit:
Is the return button being created dynamically or is it there on page load? If its dynamic, its probably never getting assigned to in your jquery, as it doesn't exist when it runs.
Here is a quick test you could try:
var returnButton = $("#<%= Return.ClientID %>");
alert(returnButton.attr("id");
If you don't get back the ID of your return button, its not matching up in your code and thats why your click event isn't working. If thats the case, do a view source on your page and find out what the actual return button ID is set to (this is easier with FireBug or similar tool)

Adding this as a separate answer since its just a huge chunk of code that isn't exactly related to the original answer, but does work as intended. I took the code you gave and converted to basic html from asp.net, and it does work correct, does it work for you?
Could you try posting the output from the asp.net page instead of the code itself? Maybe something isn't being set right on the button element's ID.
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js" type="text/javascript"></script>
</head>
<body>
<div ID="Content1">
<div ID="pnlForms">
<fieldset>
<legend>Your Information</legend>
<ol>
<li>
<label for="ctl00_content_name">
Your Name:</label>
<textbox ID="Name" runat="server" Width="150px"></TextBox>
<em class="optional">Optional </em></li>
<li>
<label for="ctl00_content_status">
Your Affiliation:*</label>
<select ID="ddlAffilation" Width="155px">
<option Value="" Selected="True">--Select One--</option>
<option>F</option>
<option>S</option>
<option>T</option>
</select
</li>
</ol>
</fieldset>
<div style="text-align: center;">
<Button ID="Submit" Value="Submit" OnClick="submit_Click">Submit</Button></div>
</div>
<div id="Complete" style="display: none;">
<div ID="pnlComplete">
<p>Thank you</p>
<div style="text-align: center;">
<Button ID="Return" Value="Return">Return</Button></div>
</div>
</div>
</div>
<div ID="Content3">
<script type="text/javascript">
$(document).ready(function () {
$("#Submit").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#pnlForms").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#Return").click(function () {
$("#Complete").fadeOut('slow');
$("#pnlForms").delay(1000).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#ddlAffilation").val() == "") {
return false;
}
return true;
}
});
</script>
</div>
</body>
</html>