Develop Reference

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

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

Masked Input Plugin not working

EDIT: I found the the answer which fixed my issue at this link
How to make JQuery masked-input plugin working after AsyncPostback in asp.net Ajax Update pannel?
I am using this plugin
http://digitalbush.com/projects/masked-input-plugin/
My reference:
<script src='<%# ResolveUrl("~/Scripts/jquery-maskedInput-1.3.1.js")%>' type="text/javascript"></script>
I have my function in a script
$(function () {
$('<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
});
and my textbox control in a pane/updatepanel/contentTemplate
<asp:Panel ID="PanelAddPhoneNumber" runat="server" Style="display: none; min-width: 500px; min-height: 500px;" Title="Add Phone Numbers">
<asp:UpdatePanel ID="UpdatePanelAddPhoneNums" runat="server" UpdateMode="Always">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Label ID="Label21" runat="server" Text="Phone Type:" />
</td>
<td>
<asp:DropDownList runat="server" ID="dropDownListPhoneType" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label28" runat="server" Text="Phone Number:" />
</td>
<td>
<asp:TextBox runat="server" ID="txtPhoneNum" type="text" AutoPostBack="true" Width="300" />
</td>
</tr>
</table>
<div style="text-align: center;">
<br />
<br />
<br />
<asp:Button ID="btnAddPhoneNum" runat="server" OnClientClick="ButtonCancelClient();" OnClick="btnAddPhoneNum_Click" Text="Add" />
<asp:Button ID="btnCancelPhoneNum" runat="server" OnClientClick="ButtonCancelClient();" OnClick="btnCancelPhoneNum_Click" Text="Cancel" />
<asp:Button ID="btnDeletePhoneNum" runat="server" OnClick="btnDeletePhoneNum_Click" Text="Delete" Visible="false" OnClientClick="check();" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddPhoneNum" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnCancelPhoneNum" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
but when I click on my txtPhone control, there is no mask or anything.. it does nothing.
I tried changing my name in the function from txtPhone.ClientID to just txtPhone, i thought it might be the reference but it isnt since I am using like 5 other references to .js files within the same folder and they are working, and my reference is spelt correct, but I really have no idea why this isnt working.
these are all the .js being used in the project
f
' rel="stylesheet"
type="text/css" runat="server" />
' rel="stylesheet"
type="text/css" runat="server" />
' rel="stylesheet"
type="text/css" runat="server" />
' type="text/javascript">
' type="text/javascript">
' type="text/javascript">
' type="text/javascript">
<script src='<%# ResolveUrl("~/Scripts/jquery-ui-1.10.1.custom.min.js")%>' type="text/javascript"></script>
<script src='<%# ResolveUrl("~/Scripts/jquery-maskedInput-1.3.1.js")%>' type="text/javascript"></script>

Make sure you are loading the CORE jQuery library and UI library:
These libraries must be loaded first: (these are just an example, use whatever version you prefer but you need jQuery loaded)
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
this is not correct:
$(function () {
$('<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
});
You need to use and need to prefex the elementId with a #:
$( document ).ready(function() {
$('#<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
});
Make sure you are loading the jquery library NOT JUST THE MASKED plugin I don't see you doing that.

JavaScript Telerik if replacement

Using teleriks drag and drop demo I'm able to reproduce the functionality, however, what I want to do is if the browser isn't HTML5 compliant I want to load a different function. Below is the code i'm using.
<script type="text/javascript">
var $ = $telerik.$;
function pageLoad() {
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
$("<span><strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</strong></span>"));
}
}
function added(sender, args) {
if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
}
}
</script>
I realize that you want to replace this section with the code you want:
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
How do I include whats below in this in the .replaceWith(
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
</telerik:RadAsyncUpload>
<br />
<telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />
<div style="position:relative;">
<table>
<tr>
<td id="controlContainer">
<telerik:RadUpload
ID="RadUpload1" runat="server"
MaxFileInputsCount="5"
OverwriteExistingFiles="false" />
<telerik:RadProgressArea id="progressArea1" runat="server"/>
<asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
</td>
<td>
<div class="smallModule">
<div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">
<asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
<asp:Repeater ID="repeaterResults" runat="server" Visible="False">
<HeaderTemplate>
<div class="title">Uploaded files in the target folder:</div>
</HeaderTemplate>
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "FileName")%>
<%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
<br />
</ItemTemplate>
</asp:Repeater>
</div></div></div></div>
</td>
</tr>
</table>
</div>
</div>

This is how I did it, by creating additional divs and hiding elements based on divs
<script type="text/javascript">
var $ = $telerik.$;
function pageLoad() {
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
$(""));
}
}
function added(sender, args) {
if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
$(".nonHTML5").replaceWith(
$(""));
}
}
</script>
<div class="wrapper">
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
</telerik:RadAsyncUpload>
<br />
<telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />
</div>
<div class ="nonHTML5" style="position:relative;">
<table>
<tr>
<td id="controlContainer">
<telerik:RadUpload
ID="RadUpload1" runat="server"
MaxFileInputsCount="5"
OverwriteExistingFiles="false" />
<telerik:RadProgressArea id="progressArea1" runat="server"/>
</td>
<td>
<div class="smallModule">
<div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">
<asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
<asp:Repeater ID="repeaterResults" runat="server" Visible="False">
<HeaderTemplate>
<div class="title">Uploaded files in the target folder:</div>
</HeaderTemplate>
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "FileName")%>
<%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
<br />
</ItemTemplate>
</asp:Repeater>
</div></div></div></div>
</td>
</tr>
</table>
</div>
<asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
</td>
</tr>

Why scrolling "Up" after text changed event? (Weird action)

Q:
I have a gridview which contains text box as a template field.The grid view exists in an update panel . My problem is:
When the text changed event has fired , feel like a jumpof the browser similar to the behavior of (post back).but it isn't a post back. I don't know why this strange behavior happened.
my aspx:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pnl_research" runat="server" CssClass="pnl">
<div id="detailsDiv" align="center" style="width: 800px;">
<table border="0" width="98%">
<tr>
<td align="center">
<div class="grid" dir="rtl">
<div class="grid" dir="rtl">
<div class="rounded">
<div class="top-outer">
<div class="top-inner">
<div class="top">
<h2>
<asp:Label ID="Label35" runat="server" Text="جدول التقييم العام"></asp:Label></h2>
</div>
</div>
</div>
<div class="mid-outer">
<div class="mid-inner">
<div class="mid">
<asp:GridView Width="100%" ID="gv_Evaluation" CssClass="datatable" AllowSorting="True"
runat="server" AutoGenerateColumns="False" AllowPaging="True" GridLines="None"
OnRowDataBound="gv_Evaluation_RowDataBound">
<EmptyDataTemplate>
<table style="width: 100%;">
<tr>
<td>
</tr>
<tr>
<td align="center">
<asp:Label ID="Label4" runat="server" Font-Size="16pt" Text="لا يوجد بيانات"></asp:Label>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</EmptyDataTemplate>
<Columns>
<asp:TemplateField HeaderText="م">
<ItemTemplate>
<asp:Label ID="lblSerial" runat="server"></asp:Label></ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="نوعية النشاط" DataField="activityType" />
<asp:BoundField HeaderText="أوزان النشاط" DataField="activityWeight" />
<asp:TemplateField HeaderText="التقييم">
<ItemTemplate>
<telerik:RadTextBox ID="txt_evaluateWeights" runat="server" AutoPostBack="True" OnTextChanged="txt_evaluateWeights_TextChanged"
hideData='<%#((GridViewRow)Container).RowIndex%>'>
</telerik:RadTextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txt_evaluateWeights"
Display="Dynamic" ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator></ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="التقييم الذاتي" DataField="activitySelf" />
<asp:BoundField HeaderText="تقييم رئيس القسم" DataField="activityBoss" />
<asp:BoundField HeaderText="تقييم العميد" DataField="activityDean" />
</Columns>
<RowStyle VerticalAlign="Top" CssClass="row" />
</asp:GridView>
</div>
</div>
</div>
<div class="bottom-outer">
<div class="bottom-inner">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
EDIT:
I remove
this line hideData='<%#((GridViewRow)Container).RowIndex%>'
protected void txt_evaluateWeights_TextChanged(object sender, EventArgs e)
{
calc();
int index = ((System.Web.UI.WebControls.GridViewRow)(((RadTextBox)sender).Parent.NamingContainer)).DataItemIndex;
//int index = int.Parse(((RadTextBox)sender).Attributes["hideData"]);
((RadTextBox)gv_Evaluation.Rows[index + 1].Cells[3].FindControl("txt_evaluateWeights")).Focus();
}
still the same problem!!
EDIT2:
protected void gv_Evaluation_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lblSerial = (Label)e.Row.FindControl("lblSerial");
lblSerial.Text = ((gv_Evaluation.PageIndex * gv_Evaluation.PageSize) + e.Row.RowIndex + 1).ToString();
RadTextBox txt = e.Row.FindControl("txt_evaluateWeights") as RadTextBox;
ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(txt);
}
}
still the same problem!!
EDIT3:
I knew the problem , but i don't know how to fix it:
the problem is as a result of this line:
((RadTextBox)gv_Evaluation.Rows[index + 1].Cells[3].FindControl("txt_evaluateWeights")).Focus();
but i need this line of code. How to prevent the Focus() method from making a jump to the top of the page.

Is the # symbol necessary here (line 2 below):
<telerik:RadTextBox ID="txt_evaluateWeights" runat="server" AutoPostBack="True" OnTextChanged="txt_evaluateWeights_TextChanged" hideData='
<%#((GridViewRow)Container).RowIndex%>'>
If you use a blank # aka html name anchor in a link it makes the page jump to the top.
ex. Top
would make a link that when clicked on would jump you to the top of the page. Your OnTextChange event looks like it contains a # that might be causing your issue.

Are you sure this is not a Postback? You should define your triggers.
I believe this might be a similar problem, with a solution:
Full postback triggered by LinkButton inside GridView inside UpdatePanel