Develop Reference

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

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";

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>

multiple icons expand gridview

I'm trying to have 2 differents icons on my GridView.
(there is Table ID="gvOrders" and Table ID="gvOrders2" on same level)
<form id="form1" runat="server">
<div style="overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%; margin-left: 147px;">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid" DataKeyNames="ABI" OnRowDataBound="OnRowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="pics/plus.png" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<asp:Table ID="gvOrders" runat="server" CssClass = "ChildGrid">
</asp:Table>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="pics/plus.png" />
<asp:Panel ID="pnlOrders2" runat="server" Style="display: none">
<asp:Table ID="gvOrders2" runat="server" CssClass = "ChildGrid">
</asp:Table>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
and the js
<script type="text/javascript">
$("[src*=plus]").live("click", function ()
{
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "pics/minus.png");
});
$("[src*=minus]").live("click", function ()
{
$(this).attr("src", "pics/plus.png");
$(this).closest("tr").next().remove();
alert($(this).attr("src"));
});
</script>
my question:
could be possible to have an icon for 'gvOrders' and one for 'gvOrders2'?
thanks in advance!

ModalPopupExtender show method does not work from code-behind 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();