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

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>

Related

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

Javascript not working on Asp. NET

Can someone help me?
My js is not working, I hide the divId and when I click te button the divId should appear but nothing happens! I am sending the code below.
What am I doing wrong, could it be in the master page file?
%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AppTest.aspx.cs" Inherits="AppTest.Screens.UploadFile" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<style>
.hidden{
display: none;
}
</style>
<div class="row">
<h2>File Upload</h2>
<br />
<asp:Panel ID="panelUpload" runat="server">
<p> <asp:Label ID="lblFileUpload" Width="300px" runat="server">Select the file:</asp:Label>
<asp:FileUpload ID="fileUP" runat="server" /></p>
<p>
<asp:Label ID="lblDdl" runat="server">Paciente</asp:Label>
<asp:DropDownList ID="ddl1" runat="server">
</asp:DropDownList>
</p>
<br />
</asp:Panel>
<div id="divId" class="hidden">
</br>
<h2>Cadastro de paciente</h2>
<br />
<p>
<asp:Label ID="lblName" runat="server">Name:</asp:Label>
<asp:TextBox ID="txtName" runat="server" Width="140px"></asp:TextBox>
</p>
<p>
<asp:Label ID="lblLast" runat="server">Last Name:</asp:Label>
<asp:TextBox ID="txtLastName" runat="server" Width="140px"></asp:TextBox>
</p>
<p>
<asp:Label ID="lblAge" runat="server">Age:</asp:Label>
<asp:TextBox ID="txtAge" runat="server" Width="140px"></asp:TextBox>
</p>
<br />
</div>
<p>
<div class="col-md-6">
<asp:Button ID="btnInsert" runat="server" Text="Inserir"/>
</div>
<div class="col-md-6">
<button>New</button>
</div>
</p>
</div>
</asp:Content>
<asp:Content ContentPlaceHolderID="ScriptPlaceHolder1" ID="scripts" runat="server">
<script src="../Scripts/jquery-1.10.2.js" ></script>
<script>
$(document).ready(function () {
$('button').on('click', function () {
$('#divId').show(); // aparece o div
});
});
</script>
</asp:Content>
So When you do Button click your page is loaded again because postback occurs. in your aspx page you have defined your class as hidden in aspx page. So you can prevent this by this way.
$('button').on('click', function () {
$('#divId').show(); // aparece o div
return false;
});
There are multiple way of doing this, I have shown you one way.

UpdatePanel issue when using javascript only controls

Included below is my markup for a page I have using a FineUploader control. I've abridged the code to only include the important parts. This page is two parts that both reside in an UpdatePanel. The first part is a simple table that contains rows of data, the last column of each row is a asp:LinkButton. The second part is a nested UpdatePanel that contains a div in which the FineUploader control is rendered when the page is first loaded (because the FineUploader control is strictly javascript and does not further exist in the code-behind). Also, when the LinkButton is pressed this.Page.IsPostBack is false.
The problem is that any time a LinkButton in the first part of the page is pressed, the FineUploader control simply disappears. I cannot get the code to re-render from the code-behind (with things like ClientScript.RegisterStartupScript/RegisterClientScriptBlock). I've also tried various setups with wrapping Part 1 with an UpdatePanel but still it wipes out my FineUploader control. I'm thinking I'm using update panels incorrectly, but am not sure (ASP.NET is not usually what I work in).
As an added detail, if I click a button inside the Part 2 nested UpdatePanel, my FineUploader control magically reappears.
Markup (for visibility important parts are marked with multi-line, mostly empty comment blocks):
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Setup.aspx.cs" Inherits="Some_Portal.Pages.Setup" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="locationInfo">
<br class="clearfloat" />
<!-- Main Screen Display breaking down the types of information -->
<asp:UpdatePanel runat="server" ID="updExtensions">
<Triggers>
<asp:PostBackTrigger ControlID="btnDownloadCall" />
</Triggers>
<ContentTemplate>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.filename {
visibility: hidden;
height: 0;
width: 0;
display: block;
}
</style>
<!-- This portion is to enable the file uploader: -->
<link href="../js/fineuploader/fineuploader-3.5.0.css" rel="stylesheet">
<script type="text/javascript" src="../js/fineuploader/fineuploader-3.5.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var uploader = new qq.FineUploader({
element: $('#fine-uploader')[0],
request: {
endpoint: 'AccountSetup.aspx'
},
autoUpload: true,
multiple: false,
text: {
uploadButton: '<asp:Button ID="fineUploadButton" runat="server" CssClass="button" style="width:6;5" Text="Browse" />'
},
validation: {
allowedExtensions: ['mp3', 'wav']
}
});
});
</script>
<!-- -->
<!-- -->
<!-- Part 1 -->
<!-- -->
<!-- -->
<table width="100%" cellpadding="0" border="0px" style="border-color:white;">
<tr>
<th>Extensions</th>
</tr>
<tr>
<td style="width: 100%; border:0; border-bottom-color:white; border-bottom-style:none;">
<asp:DataGrid ID="dgExtensions" runat="server" AllowSorting="true" AllowPaging="true" PagerStyle-BorderStyle="None" PagerStyle-BorderColor="white" PagerStyle-BorderWidth="0px"
AutoGenerateColumns="false" PageSize="10" DataKeyField="id" OnPageIndexChanged="dgExtensions_OnPageIndexChanged"
PagerStyle-Mode="NumericPages" PagerStyle-HorizontalAlign="Right" OnSortCommand="dgExtensions_OnSortCommand"
Width="100%" BorderColor="White"
HeaderStyle-CssClass="GridHeader"
ItemStyle-CssClass="GridItem"
AlternatingItemStyle-CssClass="GridAltItem">
<Columns>
<asp:BoundColumn DataField="number" HeaderText="Number" SortExpression="number">
<ItemStyle HorizontalAlign="center" Width="8%" />
<HeaderStyle HorizontalAlign="center" Width="8%" />
</asp:BoundColumn>
<asp:BoundColumn DataField="extensionType" HeaderText="Type" SortExpression="extensionType">
<ItemStyle HorizontalAlign="center" Width="18%" />
<HeaderStyle HorizontalAlign="center" Width="18%" />
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="Description" SortExpression="description">
<HeaderStyle Width="25%" CssClass="dgLeftPad" />
<ItemStyle Width="25%" CssClass="dgLeftPad" />
<ItemTemplate>
<asp:Literal runat="Server" ID="litExtensionDescription" Text='<%# Eval("description").ToString() %>' />
<asp:HiddenField runat="server" ID="hidExtensionID" Value='<%# Eval("id").ToString() %>' />
<asp:HiddenField runat="server" ID="hidExtensionTypeID" Value='<%# Eval("extensiontypeid").ToString() %>' />
<asp:HiddenField runat="server" ID="hidPrevDescription" Value='<%# Eval("description").ToString() %>' />
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="status" HeaderText="Status" SortExpression="status">
<ItemStyle HorizontalAlign="center" Width="24%" />
<HeaderStyle HorizontalAlign="center" Width="24%" />
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="">
<HeaderStyle Width="10%" />
<ItemStyle Width="10%" HorizontalAlign="center" />
<ItemTemplate>
<!-- -->
<!-- -->
<!-- Clicking this makes the Fine -->
<!-- Uploader control go away. -->
<!-- -->
<!-- -->
<asp:LinkButton runat="Server" ID="lbEditExtension" CommandArgument='<%# Eval("id").ToString() %>'
OnCommand="EditExtension" Text="Edit" Visible='<%# SetEditEnabled(Eval("extensiontypeid").ToString()) %>'/>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<HeaderStyle BackColor="#eeeeee" />
<PagerStyle HorizontalAlign="Right" Mode="NumericPages" />
</asp:DataGrid>
</td>
</tr>
<tr>
<asp:Panel runat="server" ID="pnlNoExtensions">
<td colspan="3" align="center" style="color: Red;">
There are no extensions established for your account
</td>
</asp:Panel>
</tr>
</table>
<br />
<!-- -->
<!-- -->
<!-- Part 2 -->
<!-- -->
<!-- -->
<asp:Panel runat="server" ID="Panel1" Width="100%">
<asp:UpdatePanel runat="server" ID="updRouteGroup" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnDisableOnHold" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlImpExcel" runat="Server" >
<div style="width:100%">
<table colspan="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3">
On Hold Music
</th>
</tr>
<tr>
<!-- -->
<!-- FineUploader Control -->
<!-- -->
<td align="left" valign="middle"><div id="fine-uploader"></div></td>
<td align="center" valign="middle"><asp:Label ID="lblOnHoldFile" runat="server" Text="Current file: none"/></td>
<td align="right" valign="middle"><asp:Button ID="btnDisableOnHold" runat="server" style="margin-right:7px;width:87px;" Text="Disable Hold Music" CssClass="button" OnClick="btnDisableOnHold_OnClick" /></td>
</tr>
<tr><td colspan ="2" align="center"><asp:Label runat="server" ID="lblUploadError" style="color: Red;" Visible="false" /></td></tr>
</table>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<!-- The Operator Extension Panel -->
<asp:Panel runat="server" ID="Panel2">
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnOperatorUpdate" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="Panel3" runat="Server" >
<div>
<table colspan="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3">
Operator Extension
<asp:Button ID="btnOperatorUpdate" runat="server" Text="Save" CssClass="button" style="margin-right:2px;width:87px;float:right;padding-right:10px;" OnClick="btnOperatorUpdate_OnClick" />
<asp:DropDownList runat="Server" ID="ddlOperatorExtension" style="float:right;margin-right:10px;" Width="250px" AutoPostBack="false" />
</th>
</tr>
</table>
<br />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
How can I make my FineUploader control stay visible?
EDIT 1:
Considering this might be a page life cycle issue, I attempted a manual render of the control by adding the following:
protected void Page_Init(object sender, EventArgs e)
{
string script = "<script type=\"text/javascript\">" +
" alert('oh hey');" +
" $(document).ready(function () {" +
" var uploader = new qq.FineUploader({" +
" element: $('#fine-uploader')[0]," +
" request: {" +
" endpoint: 'AccountSetup.aspx'" +
" }," +
" autoUpload: true," +
" multiple: false," +
" text: {" +
" uploadButton: '<asp:Button ID=\"fineUploadButton\" runat=\"server\" CssClass=\"button\" style=\"width:6;5\" Text=\"Browse\" />'" +
" }," +
" validation: {" +
" allowedExtensions: ['mp3', 'wav']" +
" }" +
" });" +
" });" +
"</script>";
ClientScript.RegisterClientScriptBlock(this.GetType(), "HideOnPostback", script, false);
System.Diagnostics.Debug.WriteLine("Page_Init() run");
}
The result was that if I click the "Edit" LinkButton in Part 1, I see "Page_Init() run" in debug output, but the control still goes away and the "oh hey" js alert is never displayed. However, if I click the other button in Part 2, I see "Page_Init() run" in the debug output, I see the "oh hey" alert and the FineUploader button remains visible.
I believe you are experiencing this issue because you are loading the FineUploader control too late in the page lifecycle for it to properly load the ViewState. Clicking the button is triggering a postback which restarts the lifecycle for the page. ViewState is loaded before Page_Load() so try to add the control to the page during Page_Init() instead so that the ViewState can be loaded.

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

Categories

Resources