I have a bootstrap modal pop up. Inside that there are many controls and submit button. So after successfully submitting I want to close that pop up. Below is the code which shows the message as Record Saved successfully.
if (strMessage == "Success" && strSaveSubmit == "Draft")
{
ClientScript.RegisterStartupScript(Page.GetType(), "erroralert", "alert('Record Saved as Draft Successfully');", true);
}
But with this, I want to close the modal popup which I am unable to. here is that div
<div class="modals">
<form id="frmFileUpload" runat="server">
<div class="col-sm-6">
<asp:HiddenField ID="hdnFileInfo" runat="server" />
<asp:HiddenField ID="hdnClose" runat="server" />
<label>Sap ID</label>
<asp:Label ID="lblSapId" Text="" runat="server" />
</div>
<div class="col-sm-6">
<label>Candidate ID</label>
<asp:Label ID="lblCandidateId" Text="" runat="server" />
</div>
<div class="col-sm-6">
<label>Technical Feasible</label>
<div class="selectWraper">
<asp:DropDownList ID="ddlTechFeasible" runat="server">
<asp:ListItem Text="Select" Value="Select" />
<asp:ListItem Text="YES" Value="YES" />
<asp:ListItem Text="NO" Value="NO" />
</asp:DropDownList>
</div>
</div>
<div class="col-sm-6">
<div class="upload">
<label>Upload Document</label>
<asp:HiddenField ID="hdnGetFileName" runat="server" />
<div id="dvFileUpload">
<asp:FileUpload runat="server" ID="flufileUpload" AllowMultiple="true" CssClass="chooseFile" />
</div>
</div>
</div>
<div class="col-sm-6">
<label>Remarks</label>
<asp:TextBox ID="txtRemarks" runat="server" TextMode="MultiLine" />
</div>
<div class="col-sm-6" style="overflow: auto; height: 100px;">
<asp:GridView ID="grdFilesInfo" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded">
<Columns>
<asp:BoundField DataField="Text" HeaderText="Uploaded Files" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDownload" ToolTip="download files" CssClass="fa fa-download" CommandArgument='<%# Eval("Value") %>' runat="server" OnClick="lnkDownload_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDelete" ToolTip="delete files" CssClass="fa fa-trash-o" CommandArgument='<%# Eval("Value") %>' runat="server" OnClientClick="if (!confirm('Are you sure you want delete the file?')) return false;" OnClick="lnkDelete_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="clearfix"></div>
<div class="modalButton">
<asp:Button ID="btnSaveDraft" runat="server" Text="Save as Draft" OnClick="btnSaveDraft_Click" CssClass="button" OnClientClick="return SaveOrDraft('Draft');" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" data-dismiss="modal" OnClick="btnSubmit_Click" CssClass="button" OnClientClick="return SaveOrDraft('Draft');" />
</div>
</form>
</div>
JQuery and Ajax are your friend here.
You could just add this inside a document.ready...
$(document).ready(function() {
$('#<%= btnSubmit.ClientID %>').on('click', function () {
$('.modals').hide(); // hides anything with 'modals' as the class
}
}
You could also just give the modal an ID and use $('#ModalID').hide();
You could assign a static id to the submit button, but the <%= btnSubmit.ClientID %> will pull out the ID for you.
Is this an ajax operation? From the code you have there it looks like it would perform a postback and reload the page anyway.
if (strMessage == "Success" && strSaveSubmit == "Draft")
{
ClientScript.RegisterStartupScript(Page.GetType(), "erroralert", "alert('Record Saved as Draft Successfully');", true);
ScriptManager.RegisterStartupScript(this, this.GetType(), "Popup", "closePopUP();", true);
}
function closePopUP(){
$(".modals").modal('hide');
}
Related
On click of "Confirm", the "btnSubmit_Click" does not get call in the codebehind. ClosePopup gets called on OnClientClick and returns true, which should postback and call submit on the server side. Any ideas why it's not working?
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlId="btnCopyShip"
PopupControlID="ModalPanel" BackgroundCssClass="ui-widget-overlay"
CancelControlID="btnCancel" behaviorid="modalwithinput"
OnCancelScript="ClearUI();"/>
<asp:Panel ID="ModalPanel" runat="server" style="background-color:White; width:320px; padding:0px 10px 10px 10px; border:1px Black; display: none;height:100px" cssClass="shadow">
<asp:UpdatePanel ID="uPnlNewShip" runat="server">
<ContentTemplate>
<fieldset style="width:300px;">
<legend style="font-weight:bold;font-size: medium">Copy Ship</legend>
<label for="lblShip" style="padding-left: 0px" >Ship: </label>
<asp:DropDownList runat="server" ID="ddlNewShips" style="width:150px">
</asp:DropDownList><%-- ValidationGroup="popup"--%>
<asp:RequiredFieldValidator ID="popupRequiredFieldValidator" runat="server"
ControlToValidate="ddlNewShips" Display="None"
ErrorMessage="Required Field" SetFocusOnError="True"
InitialValue="0">
</asp:RequiredFieldValidator> <%--ValidationGroup="popup"--%>
<%--<ajaxToolkit:ValidatorCalloutExtender runat="server"
targetcontrolid="popupRequiredFieldValidator"
id="popupValidatorCalloutExtender"
behaviorid="ddlValidator" enabled="True">
</ajaxToolkit:ValidatorCalloutExtender>--%>
</fieldset>
<br /><br />
<span style="float: right">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" CausesValidation="False"/>
<asp:Button ID="btnSubmit" runat="server" Text="Confirm" OnClick="btnSubmit_Click" OnClientClick="return ClosePopup()"/>
</span>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
function ClosePopup()
{
if (IsValid())
{
ClearUI();
$find('modalwithinput').hide();
return true;
}
else
return false;
}
I have requiredFieldValidator for a dropdownlist inside a panel. If there is no data selected in the dropdown btnSubmitReport works fine to validate and display *. Once data is selected and btnSubmitReport is clicked to display data it still works fine. Now if you unselect the dropdown and hit btnSubmitReport it does not do validation anymore. This is because first time btnSubmitReport_Click is clicked, it checks to see if Page.IsValid and calls JavaScript code, but subsequent calls are just calling JavaScript code and btnSubmitReport_Click is not being called to see if the page is Valid. Please suggest. Here is the sample code on the aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="testValidator.aspx.cs"
MasterPageFile="~/Site.master" Inherits="textXslt.testValidator" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="Styles/Reports.js" type="text/javascript"></script>
<h3>
<asp:Label ID="lblHeader" runat="server" Text="Reporting Filter"></asp:Label>
</h3>
<div style="text-align: right">
<input id="lnkShowFilter" type="button" value="Show Filter" onclick="ShowF()" class="btn" />
<input id="lnkHideFilter" type="button" value="Hide Filter" onclick="HideF()" class="btn" />
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="divFilter">
<asp:UpdatePanel ID="uplMain" runat="server">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<table>
<tr>
<td valign="top">
<table>
<tr>
<td>
<asp:CheckBox ID="chkBusiness" runat="server" Text="Business Division" CssClass="chkbox" />
</td>
<td>
<asp:DropDownList ID="ddlBusiness" runat="server" AppendDataBoundItems="true" AutoPostBack="true"
CausesValidation="True" OnSelectedIndexChanged="ddlBusiness_SelectedIndexChanged"
ValidationGroup="grpSubmit" Width="350px">
<asp:ListItem Selected="True" Value="-1">--- SELECT ---</asp:ListItem>
<asp:ListItem>Orange</asp:ListItem>
<asp:ListItem>Apple</asp:ListItem>
<asp:ListItem>Mango</asp:ListItem>
</asp:DropDownList>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvBusiness" runat="server" ControlToValidate="ddlBusiness"
Enabled="true" ToolTip="Please select a Business." ErrorMessage="*" InitialValue="-1"
ForeColor="Red" CssClass="required" Display="Dynamic" ValidationGroup="grpSubmit">
</asp:RequiredFieldValidator>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:PlaceHolder>
<hr size="1" />
<div style="text-align: center">
<table style="width: 10%">
<tr>
<td>
<asp:Button ID="btnHome" runat="server" Text="Home" OnClick="btnHome_Click" CssClass="btn" />
</td>
<td>
<asp:Button ID="btnSubmitReport" runat="server" Text="Submit" OnClick="btnSubmitReport_Click"
ValidationGroup="grpSubmit" CssClass="btn" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="divResult">
<asp:UpdatePanel ID="uplGrid" runat="server">
<ContentTemplate>
Here go Results of grid
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
Here is the code behind:
protected void btnSubmitReport_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
btnSubmitReport.Attributes["onclick"] = "javascript:SubmitF();";
}
//then do rest of the processing to display grid results
}
and here is Reports.js file:
function ShowF() {
$('#lnkShowFilter').hide();
$('#divFilter').show();
$('#lnkHideFilter').show();
$('#divResult').hide();
$('#MainContent_lblHeader').text("Reporting Filter");
}
function HideF() {
$('#lnkShowFilter').show();
$('#divFilter').hide();
$('#lnkHideFilter').hide();
$('#divResult').show();
$('#').show();
$('#MainContent_lblHeader').text("Report Result");
}
function SubmitF() {
// alert("SubmitF");
$('#lnkShowFilter').show();
$('#divFilter').hide();
$('#lnkHideFilter').hide();
$('#divResult').show();
$('#MainContent_lblHeader').text("Report Result");
}
well, I was able to solve the issue by using client-side validation. So I created a function
<script type="text/javascript">
function ValidateAndShowPopup() {
if (Page_ClientValidate('grpSubmit')) {
SubmitF();
}
}
And added both OnclientClick and OnClick to the submit button
<asp:Button ID="btnSubmitReport" runat="server" Text="Submit" OnClick="btnSubmitReport_Click" ValidationGroup="grpSubmit" OnClientClick="ValidateAndShowPopup()" CssClass="btn" />
I have panel in my HTML like this:
<asp:Panel ID="cropPanel" runat="server">
<div class="col-xs-6">
<h3 style="text-align:center; text-decoration:solid;">Before image: </h3>
<img style="width:100%;" id="before" src="" runat="server" />
<asp:HiddenField ID="X1" runat="server" />
<asp:HiddenField ID="Y1" runat="server" />
<asp:HiddenField ID="W1" runat="server" />
<asp:HiddenField ID="H1" runat="server" />
</div>
<!-- After image -->
<div class="col-xs-6">
<h3 style="text-align:center; text-decoration:solid;">After image: </h3>
<img style="width:100%;" id="after" src="" runat="server" />
<asp:HiddenField ID="X2" runat="server" />
<asp:HiddenField ID="Y2" runat="server" />
<asp:HiddenField ID="W2" runat="server" />
<asp:HiddenField ID="H2" runat="server" />
</div>
</asp:Panel>
This is the logic for getting the cropped image new dimensions using jQuery/JavaScript like following:
$('#<%=before.ClientID%>').Jcrop({
onSelect: SelectCropArea
});
function SelectCropArea(c) {
$('#<%=X1.ClientID%>').val(parseInt(c.x1));
$('#<%=Y1.ClientID%>').val(parseInt(c.y1));
$('#<%=W1.ClientID%>').val(parseInt(c.w1));
$('#<%=H1.ClientID%>').val(parseInt(c.h1));
}
$('#<%=after.ClientID%>').Jcrop({
onSelect: SelectCropArea2
});
function SelectCropArea2(c) {
$('#<%=X2.ClientID%>').val(parseInt(c.x2));
$('#<%=Y2.ClientID%>').val(parseInt(c.y2));
$('#<%=W2.ClientID%>').val(parseInt(c.w2));
$('#<%=H2.ClientID%>').val(parseInt(c.h2));
}
And when I press the link button event:
<asp:LinkButton ID="linkCrop" OnClick="linkCrop_Click" runat="server">Save & Upload</asp:LinkButton>
Code behind:
Rectangle CropAreaBefore = new Rectangle(Int32.Parse(X1.Value), Int32.Parse(Y1.Value), Int32.Parse(W1.Value), Int32.Parse(H1.Value));
Rectangle CropAreaAfter = new Rectangle(Int32.Parse(X2.Value), Int32.Parse(Y2.Value), Int32.Parse(W2.Value), Int32.Parse(H2.Value));
//The `X1/Y1/W1/H1 and X2/Y2/W2/H2 are empty
What am I doing wrong here??
Edit: I checked whether the values are set properly in jquery, they are, here's the pic showing it:
I have an ajax modal popupextender which I would like to show using java script at the end of some processing in the code behind. I get the message
Error: Unable to get property 'show' of undefined or null reference.
<asp:Panel ID="panel1" runat="server" Visible="true" BorderColor="Black" Style="display: none">
<asp:UpdatePanel ID="uppanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btn1" Text="Popup" Visible="true" runat="server" Style="display:none"/>
<ajaxToolKit:ModalPopupExtender ID="mpe1" runat="server" TargetControlID="btn1" PopupControlID="panel1" RepositionMode="None" PopupDragHandleControlID="drag1" BehaviorID="behave1"/>
<div id="div1" runat="server">
<asp:TextBox ID="txt1" runat="server" Text="Text" ></asp:TextBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
function ShowPopUp(mpid) {
var id1 = $find(mpid);
id1.show();
}
Try this
$find("<%= mpe1.ClientID %>").show();
Hello everyone iam trying to open a aspx page in a dialog box window from asp button click event but even after specifying the dialog height and dialog width i want i could see dialog window opening in a default size.It seems like the height and width parameters i am passing are ignored.
Here is the Server Side Code:
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(),Guid.NewGuid().ToString(), "try { showMessageRulesDialog('MessageRuleCenterFrame.htm', true); }catch(e){alert(e);}", true);
JavaScript Code:
function showMessageRulesDialog(dialogName, refresh)
{
try {
var WinSettings = "wcenter:yes;resizable:no;onscroll:off;dialogHeight:700px;dialogWidth:610px;";
var ret = window.showModalDialog("../Dialogs/" + dialogName,"", WinSettings);
if (refresh) {
window.location = window.location;
}
}
catch (e)
{ alert("ShowDialog Error: " + e); }
}
HtmPage Properties
<iframe src="MessageRulesCenter.aspx" style="height:700px;width:610px;" frameborder="0" scrolling="yes"></iframe>
MessageRulesCenter.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="MessageRulesCenter.aspx.cs" Inherits="Dialogs_QuotaCenter" %>
<!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 runat="server">
<%--<base target="_blank" /> --%>
<title>Quota Message Center</title>
<link rel="Stylesheet" href="../Skins/QuotaCenter.css" />
<script language="javascript" type="text/javascript" src="../Scripts/Common.js"></script>
<style type="text/css">
#form1
{
height: 450px;
width: 581px;
}
.formfield * {
vertical-align: middle;
border-width:0px;
}
</style>
</head>
<body style="text-align: left">
<form id="form1" runat="server">
<table style="height: 437px; width: 582px" >
<tr>
<td bgcolor="#91ACFF">
<div class="Section" id="Sec1">
<div>
<br />
<asp:Label ID="Label1" runat="server" Text="Message Rule Name : "
ForeColor="Black" Font-Bold="False"></asp:Label>
<asp:TextBox ID="txtRuleName" runat="server"></asp:TextBox>
<br /><br />
</div>
<div>
<asp:Label ID="Label2" runat="server" ForeColor="Black"
Text="Create Message Rule On :" Font-Bold="False"></asp:Label>
<br />
<br />
</div>
</div>
<div class="Section" id="Sec2">
<div>
<asp:RadioButton ID="rdoIncoming" GroupName="MessageRules" runat="server" ForeColor="Black"
Text="Incoming Message" AutoPostBack="True"
oncheckedchanged="rdoOutgoing_CheckedChanged" />
<asp:RadioButton ID="rdoOutgoing" GroupName="MessageRules" runat="server" ForeColor="Black"
Text="Outgoing Message" oncheckedchanged="rdoOutgoing_CheckedChanged"
AutoPostBack="True" />
<br />
<br />
</div>
<div>
<asp:Label ID="Label3" runat="server" ForeColor="Black" Text="Where"></asp:Label>
<br />
</div>
<div>
<p class="formfield">
<asp:Label ID="lblField1" runat="server" ForeColor="Black" Text="From field Contains :"></asp:Label>
<asp:TextBox ID="txtField3" runat="server" Width="272px" TextMode="MultiLine"></asp:TextBox>
<asp:Button ID="btnAddContact" runat="server" Text="Add Contact" Width="102px" onclick="btnAddContact_Click"/>
<br />
</p>
</div>
<div>
<p class="formfield">
<asp:Label ID="lblFiled2" runat="server" ForeColor="Black" Text="Subject Contains :"></asp:Label>
<asp:TextBox ID="txtField4" runat="server" Width="270px"></asp:TextBox>
<br />
</p>
</div>
</div>
<div class="Section" id ="Sec3">
<div>
<asp:Label ID="Label4" runat="server" ForeColor="Black" Text="Then"></asp:Label>
</div>
<div>
<p class="formfield">
<asp:RadioButton ID="rdoMove" runat="server" GroupName ="ActionType" ForeColor="Black" Text="Move it to the Folder : " />
<asp:DropDownList ID="ddlMove" runat="server" Width="165px" onselectedindexchanged="ddlMove_SelectedIndexChanged" >
</asp:DropDownList>
</p>
</div>
<div>
<p class="formfield">
<asp:RadioButton ID="rdoCopy" runat="server" GroupName ="ActionType" ForeColor="Black" Text="Copy it to the Folder : " />
<asp:DropDownList ID="ddlCopy" runat="server" Width="165px" onselectedindexchanged="ddlMove_SelectedIndexChanged" >
</asp:DropDownList>
</p>
</div>
<div style="text-align:right">
<asp:Label ID="lblError" runat="server"></asp:Label>
<p class="formfield">
<asp:Button ID="btnDone" runat="server" Text="Done" OnClick="btnDone_Click" Width="61px" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Cancel" />
</p>
</div>
</div>
</td>
</tr>
</table>
</form>
I tried your code and it seems it works fine. My guess for why it is not working as expected could be because of the browser version.
Check if you get the required behavior if you remove the Doctype declaration (the top most line in the page).