Update progress bar not working with postbacktrigger

Update progress bar not working with postbacktrigger - javascript

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

Related

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?

Page Validation not functioning with JavaScript code

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

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>

Using the same asp.net user control in multiple update panels

I have an update panel on two different pages. I want to use the same user control on both pages and assign it to the update panel with asyncpostbacktrigger. It runs fine in the dev environment but then gets a java script error when we put it into the live site.
I understand you cant use the same user control in multiple update panels, but is there anyway around this?
Thank you.
Edit:
Here is the code for my first page:
<%# Page Title="" Language="C#" MasterPageFile="~/Licensing.Master" AutoEventWireup="true" CodeBehind="VendorLicenses.aspx.cs" Inherits="Licensing.Web.ManageLicenses.VendorLicenses" %>
<%# Register Src="~/ManageLicenses/OwnerLicenseEdit.ascx" TagName="LicenseEdit" TagPrefix="licensing" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function EditLicense(LicenseID) {
// set title
if (LicenseID == "")
{
$get('<%= LicensePanelHeaderText.ClientID %>').innerHTML = "Add License";
$get('<%= LicenseEditDelete.ClientID %>').style.display = "none";
}
else
{
$get('<%= LicensePanelHeaderText.ClientID %>').innerHTML = "Edit License";
$get('<%= LicenseEditDelete.ClientID %>').style.display = "";
}
<%= Page.ClientScript.GetPostBackEventReference(LicenseEdit, "[LicenseID]").Replace("'[LicenseID]'", "LicenseID") %>
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<ajax:ToolkitScriptManager runat="server" ID="ScriptManager" />
<font style="font-weight:bold; font-size:large;">Vendor Licenses</font>
<br /><br />
<!-- License Popup -->
&nbsp<a href='javascript:EditLicense("");'>Add License</a>
<asp:LinkButton runat="server" ID="AddLicense" style="display:none;" />
<asp:Panel ID="LicensePanel" runat="server" style="display:none; width:100%;" CssClass="modalPopup">
<asp:Panel ID="LicensePanelHeader" runat="server" HorizontalAlign="Center">
<asp:Label runat="server" ID="LicensePanelHeaderText" style="font-weight:bold; font-size:large; text-decoration:underline;"></asp:Label>
</asp:Panel>
<br />
<asp:UpdatePanel ID="LicenseUpdatePanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LicenseEdit" />
<asp:AsyncPostBackTrigger ControlID="LicenseEditSave" />
<asp:AsyncPostBackTrigger ControlID="LicenseEditDelete" />
</Triggers>
<ContentTemplate>
<licensing:LicenseEdit runat="server" ID="LicenseEdit" OnLicenseLoaded="LicenseEdit_OnLicenseLoaded" />
</ContentTemplate>
</asp:UpdatePanel>
Here is the code for my second page:
<%# Page Title="" Language="C#" MasterPageFile="~/Licensing.Master" AutoEventWireup="true" CodeBehind="OwnerLicenses.aspx.cs" Inherits="Licensing.Web.ManageLicenses.OwnerLicenses" %>
<%# Register Src="~/ManageLicenses/OwnerLicenseEdit.ascx" TagName="LicenseEdit" TagPrefix="licensing" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function EditLicense(LicenseID) {
// set title
if (LicenseID == "")
{
$get('<%= LicensePanelHeaderText.ClientID %>').innerHTML = "Add License";
$get('<%= LicenseEditDelete.ClientID %>').style.display = "none";
}
else
{
$get('<%= LicensePanelHeaderText.ClientID %>').innerHTML = "Edit License";
$get('<%= LicenseEditDelete.ClientID %>').style.display = "";
}
<%= Page.ClientScript.GetPostBackEventReference(LicenseEdit, "[LicenseID]").Replace("'[LicenseID]'", "LicenseID") %>
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<ajax:ToolkitScriptManager runat="server" ID="ScriptManager" />
<font style="font-weight:bold; font-size:large;">Prasco Licenses</font>
<br /><br />
<!-- License Popup -->
&nbsp<a href='javascript:EditLicense("");'>Add License</a>
<asp:LinkButton runat="server" ID="AddLicense" style="display:none;" />
<asp:Panel ID="LicensePanel" runat="server" style="display:none; width:100%;" CssClass="modalPopup">
<asp:Panel ID="LicensePanelHeader" runat="server" HorizontalAlign="Center">
<asp:Label runat="server" ID="LicensePanelHeaderText" style="font-weight:bold; font-size:large; text-decoration:underline;"></asp:Label>
</asp:Panel>
<br />
<asp:UpdatePanel ID="LicenseUpdatePanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LicenseEdit" />
<asp:AsyncPostBackTrigger ControlID="LicenseEditSave" />
<asp:AsyncPostBackTrigger ControlID="LicenseEditDelete" />
</Triggers>
<ContentTemplate>
<licensing:LicenseEdit runat="server" ID="LicenseEdit" OnLicenseLoaded="LicenseEdit_OnLicenseLoaded" />
</ContentTemplate>
</asp:UpdatePanel>

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

Develop Reference

JavaScript is the programming language of the Web.

Update progress bar not working with postbacktrigger - javascript

Related

using jquery function export to excel not working

Page Validation not functioning with JavaScript code

How to stop update progress bar for every timer click event

Using the same asp.net user control in multiple update panels

ModalPopupExtender show method does not work from code-behind javascript

Categories

Resources