ModalPopupExtender show method does not work from code-behind javascript - javascript

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();

Related

Close Modal Pop up after submit message in server side

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');
}

form validates whole page in ASP.NET

I want to validate only part of the page in the same form.
However it validates whole pages textboxes like below. Here is the details;
Code behind is;
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
.
.
.
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLogin" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
// the section that i want to validate only below textbox using reset button however above one is validating too
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="tbMailForgot" minlength="1" required="" runat="server" TextMode="Email" ValidateRequestMode="Enabled" ></asp:TextBox>
<asp:Button ID="btnReset" OnClientClick="return funcmail();" runat="server" Text="Reset" OnClick="btnReset_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnReset" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</form>
How can i do it partly ?
You can use Validation groups. You have to set each validator to a validation group and then set the same validation group to the submit button. For instance:
<asp:TextBox ID="tbMailForgot" minlength="1" required="" runat="server" TextMode="Email" ValidateRequestMode="Enabled"></asp:TextBox>
<asp:requiredfieldvalidator id="RequiredFieldValidator2"
controltovalidate="tbMailForgot"
validationgroup="Forgot"
errormessage="Email required"
runat="Server">
</asp:requiredfieldvalidator>
<asp:Button ID="btnReset" OnClientClick="return funcmail();" runat="server" Text="Reset" OnClick="btnReset_Click" ValidationGroup="Forgot" />

Update progress bar not working with postbacktrigger

I have update progress in master page which shows the loader whenever the content page is refreshed or on postback but on my content page everything is working fine execpt for the download button where the loader does not get disabled when clicked.
this is the master page:
<div class="container-fluid" id="body">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="BodyContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="menuBar" />
<asp:AsyncPostBackTrigger ControlID="MenuCategories" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="progress" runat="server" DynamicLayout="true" DisplayAfter="0">
<ProgressTemplate>
<div class="ui-widget-overlay">
<div id="dvLoading">
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<script type="text/javascript">
var updateProgress = null;
function postbackButtonClick() {
updateProgress = $find("<%= progress.ClientID %>");
window.setTimeout("updateProgress.set_visible(true)", updateProgress.get_displayAfter());
return true;
}
</script>
this is my content page:
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContentPlaceHolder" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table style="float: right;">
<tr>
<td class="Asplabel"><b>No of Records:</b></td>
<td>
<asp:Label ID="lblRecordsCount" runat="server" Text="" CssClass="Asplabel" Font-Bold="true"></asp:Label>
</td>
<td>
<asp:LinkButton ID="BtnDownload" ClientIDMode="Static" OnClientClick="return postbackButtonClick();" runat="server" Enabled="true" ToolTip="Download Files" CssClass="btn" style="color: #0089d0;" OnClick="BtnDownload_Click">
<i class="fa fa-download"></i>
</asp:LinkButton>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="BtnDownload"/>
</Triggers>
</asp:UpdatePanel>
</asp:Content>
On page load loader is working fine and also for other controls where postback occurs except for the download button the loader shows up but does not fade away
How should i set the visibilty false for the download button after the pasotback occurs?
For postbacktrigger controls, update progress can be shown like
Show:
var updateprogress = document.getElementById('<%=((UpdateProgress)Master.FindControl("UpdateProgress1")).ClientID %>');
updateprogress.style.display = "inline-block";
Hide:
var updateprogress = document.getElementById('<%=((UpdateProgress)Master.FindControl("UpdateProgress1")).ClientID %>');
updateprogress.style.display = "none";

using jquery function export to excel not working

I am trying to use jquery for exporting grid view to excel. But I am not successful with the code.
code referred from : http://www.c-sharpcorner.com/blogs/export-to-excel-using-jquery1
My code:
<script type="text/javascript">
$("[id$=btnExcel]").click(function (e) {
alert("testing");
window.open('data:application/vnd.ms- excel,' + encodeURIComponent($('#grdCharges').html()));
e.preventDefault();
});
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="div_report" runat="server" visible="false">
<div id="grdCharges" runat="server" style="width: 90%; overflow: auto;">
<asp:GridView ID="GridView1"
runat="server"
CellPadding="3"
CellSpacing="2"
AutoGenerateColumns="true"
ShowFooter="true"
FooterStyle-HorizontalAlign="Left"
RowStyle-BorderColor="Black" HeaderStyle-BackColor="#0CA3D2">
<FooterStyle BackColor="#87CEFA" />
</asp:GridView>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="div_labels">
<asp:Button ID="btnExcel" class="input-submit" ClientIDMode="Static" runat="server" Text="Excel" />
</div>
But when I press the btnExcel I could not get even the alert window. Why is it so?

How to stop update progress bar for every timer click event

I have asp page with update progress control. I want to rebind grid view every 5 sec. so i am using timer control. but my problem is update progress bar showing every timer click event. how to resolve this.Please help me.
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel">
<ProgressTemplate>
<asp:Panel ID="Panel1" CssClass="overlay" runat="server">
<asp:Panel ID="Panel2" CssClass="loader" runat="server">
<img src="../../images/bx_loader.gif" alt="" />
</asp:Panel>
</asp:Panel>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger EventName="SelectedIndexChanged ControlID="gvMessages" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" ></asp:Timer>
<asp:GridView ID="gvMessages" Width="100%" CssClass="mail-block" runat="server">
</asp:GridView>
<asp:TextBox ID="txtWorkFlow" runat="server" > </asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

Categories

Resources