My user control code throws javascript error.
If I don't include uplNewRequestCreation in the main page, everything works as expected. All the server and client side file upload functions are triggered. The reason for including the update panel in main page is to avoid full page postback.
I have tried several solutions from online sources but none helped.
added scriptmanagerproxy to user control page
defined the javascript in code behind page_load - this solution worked, but it did not trigger
OnUploadedComplete="uplFile1_UploadedComplete"
added file upload user control as trigger to the main update panel and changed updatemode to conditional
Error message: After the FileUpload.ascx.cs is initialized, following error message is shown.
Microsoft JScript runtime error: 'clientUploadComplete' is undefined
I appreciate your help very much!
Thanks!!!!
Here's my code structure.
User control
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="FileUpload.ascx.cs"
Inherits="QTrack2.UserControls.FileUpload" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<script type="text/javascript">
function clientUploadComplete(sender, args) {
document.getElementById('<%= btnTrigger.ClientID %>').click();
}
</script>
<div style="float: left; margin-left: 0px;">
<asp:GridView ID="grdUploadControls" runat="server" AutoGenerateColumns="False" OnRowDataBound="grdUploadControls_RowDataBound"
CssClass="uploadTable" Caption="CIQ Files Required To Be Uploaded">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblCIQType" CssClass="Label" runat="server" Text='<%#Eval("Key")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="isReqlblCIQType" CssClass="Label" runat="server" Text='<%#Eval("Value")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ControlStyle-CssClass=" ">
<ItemTemplate>
<asp:AsyncFileUpload ID="uplFile1" runat="server" OnUploadedComplete="uplFile1_UploadedComplete"
CompleteBackColor="#E5FFE5" ErrorBackColor="#F4ADAE" Width="300" UploaderStyle="Modern"
ClientIDMode="AutoID" OnClientUploadComplete="clientUploadComplete"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:HiddenField ID="hdnFileSavePath" runat="server" Value="" />
<br />
</div>
<div style="float: left; margin-left: 20px; height: 40%; width: 650px; overflow: auto;
padding-right: 20px;">
<%-- <asp:UpdatePanel ID="upnlFileDisplayHolder" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnTrigger" />
</Triggers>
<ContentTemplate>--%>
<asp:GridView ID="grdFileDisplay" runat="server" AutoGenerateColumns="false" CssClass="uploadTable"
OnRowDataBound="grdFileDisplay_RowDataBound" Caption="CPM Files Currently Uploaded">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblFileType" CssClass="Label" runat="server" Text='<%#Eval("Value")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblFileName" CssClass="Label" runat="server" Text='<%#Eval("Key")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnDeleteFile" CssClass="button" runat="server" Text="Remove" OnClick="btnDeleteFile_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div>
<asp:Button ID="btnTrigger" runat="server" Text="fdkl" Style="display: none;" OnClick="btnTrigger_Click" />
</div>
<%-- </ContentTemplate>
</asp:UpdatePanel>--%>
</div>
<div style="clear: both">
</div>
Main page calling user control
<%# Page Title="New Request" Language="C#" MasterPageFile="~/Site.IM.master" AutoEventWireup="true"
CodeBehind="GenericNewRequest.aspx.cs" Inherits="QTrack2.CreatorPages.NewRequest.Scripts.Generic.GenericNewRequest" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%# Register TagPrefix="uc1" TagName="fileUploadUserControl" Src="~/UserControls/FileUpload.ascx" %>
<%# Register TagPrefix="uc2" TagName="ciqValidationUserControl" Src="~/UserControls/ciqValUserControl.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
// This function is called whenever the user selects expected completion date from view # 3.
// This function checks if the selected date is less than currentDate and sets to the currentDate if true.
function checkSelectedDate(sender, args) {
if (sender._selectedDate < new Date()) {
var previouslySelectedDate = sender._textbox.value;
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="uplNewRequestCreation" runat="server">
<ContentTemplate>
<asp:MultiView ID="mviewNewRequestCreation" runat="server" ActiveViewIndex="0">
<View #1>
.....
</View #1>
<View # 2>
<uc1:fileUploadUserControl ID="multUplUserCntrol1" runat="server" />
.....
</View # 2>
<View # 3>
....
</View #3>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
It is clear your Javascript function is not being registered within the update panel, you can do this:
Declare this function clientUploadComplete outside the User Control and outside the Update Panel.
Or also you can:
Call the document.getElementById('<%= btnTrigger.ClientID %>').click(); function not using a javascript function, something like this...
OnClientUploadComplete="document.getElementById('btnTrigger_clientName').click()"
Related
I need to trigger an update event in a user control from update panel, but so far I am having some issues. Here is my scenario:
UC1:
//uc1
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="FilterControlRow.ascx.cs" Inherits="FilterWebPart.FilterControlRow" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
// other controls
<div runat="server" id="inputFilters" class="inputFilters">
<asp:Button ID="btnOpenBracket" runat="server" CssClass="filterBracketButton" OnClick="btnOpenBracket_Click" />
<asp:DropDownList ID="ddlPropertyNames" runat="server" OnSelectedIndexChanged="ddlPropertyNames_SelectedIndexChanged"
ViewStateMode="Enabled" />
<div class="filterValidator">
<asp:DropDownList ID="ddlLookup" CssClass="filterTxtValue" runat="server" ViewStateMode="Enabled" />
</div>
</div>
when changed the ddlPropertyNames updates the ddlLookup.
UC2:
//uc2
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="FilterControlNew.ascx.cs"
Inherits="FilterWebPart.FilterControlNew" ViewStateMode="Disabled" %>
<%# Register Src="FilterWebPart.FilterControlRow.ascx" TagName="FilterControlRow" TagPrefix="uc2" %>
<asp:UpdatePanel ID="UpdatePanelFilter" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional" ViewStateMode="Enabled" OnInit="UpdatePanelFilter_OnInit">
<ContentTemplate>
//other controls
<asp:Repeater ID="Repeater1" runat="server" Visible="true" OnItemDataBound="Repeater1_ItemDataBound"
OnItemCommand="Repeater1_ItemCommand" ViewStateMode="Enabled">
<ItemTemplate>
<div class="filterRow">
<uc2:filtercontrolrow id="FilterControlRow1" runat="server" />
</div>
</ItemTemplate>
</asp:Repeater>
<asp:Button ID="btnFind" runat="server" OnClick="btnFind_Click" CssClass="filterButton" Text="Find"
ViewStateMode="Enabled" ValidationGroup="Filter" />
<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click" CssClass="filterButton" Text="Add" ViewStateMode="Enabled" />
</asp:Panel>
// more controls
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnFind" />
</Triggers>
</asp:UpdatePanel>
UC2 just contains the first user control in a repeater so I can have multiple filters. and then in the default page I have:
<uc1:filtercontrolnew id="WebPartFilter" runat="server" />
The main problem is that the first user control was doing a full page postback and I want to avoid that and limit it only to update the dropdown that is inside the usercontrol. I saw somewhere that the UpdatePanel is the way to go, but after many attempts either it does nothing or it is doing a full page postback again. Maybe I am wrapping the update panels wrong, but unfortunatelly I do not have much experience using them.
Any help would be appreciated:)
First Step use asynchronous postback trigger, and add the Event Name
//uc2
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="FilterControlNew.ascx.cs"
Inherits="FilterWebPart.FilterControlNew" ViewStateMode="Disabled" %>
<%# Register Src="FilterWebPart.FilterControlRow.ascx" TagName="FilterControlRow" TagPrefix="uc2" %>
<asp:UpdatePanel ID="UpdatePanelFilter" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional" ViewStateMode="Enabled" OnInit="UpdatePanelFilter_OnInit">
<ContentTemplate>
//other controls
<asp:Repeater ID="Repeater1" runat="server" Visible="true" OnItemDataBound="Repeater1_ItemDataBound"
OnItemCommand="Repeater1_ItemCommand" ViewStateMode="Enabled">
<ItemTemplate>
<div class="filterRow">
<uc2:filtercontrolrow id="FilterControlRow1" runat="server" />
</div>
</ItemTemplate>
</asp:Repeater>
<asp:Button ID="btnFind" runat="server" OnClick="btnFind_Click" CssClass="filterButton" Text="Find"
ViewStateMode="Enabled" ValidationGroup="Filter" />
<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click" CssClass="filterButton" Text="Add" ViewStateMode="Enabled" />
</asp:Panel>
// more controls
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnFind" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Second Step add if(! isPostback) in Page_Load and place in it all the code you want not to be refreshed on postback
Note you should add in the update panel triggers for each tool you are using as buttons repeaters, etc.. and make sure to add the events you're using
I have 2 files :-
Items.aspx with the list of items in a grid view, A button(to open a form for adding new item), and a div with id testing.
code Inside Items.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Basic.Master" AutoEventWireup="true" CodeBehind="Items.aspx.cs" Inherits="FlowerShopAdminPanel.Items" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="header" runat="server">
<div id="dvGrid" class="container">
<!-- This contains the gridview -->
</div>
<div id="testing"></div>
<script>
function openDialog($itemid,$categoryid) {
$('#testing').dialog({
modal: true,
dialogClass: "no-close",
open: function () {
$(this).load('AddItem.aspx?itemid=' + $itemid+'&categoryid='+$categoryid);
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
},
height: 500,
width: 500,
title: 'Add Item'
});
}
</script>
<style>
.image {
height: 30vh;
}
.no-close .ui-dialog-titlebar-close {
display: none;
}
</style>
</asp:Content>
This loads a form to add item in a jquery modal. we can upload image to that item using a Button . Above function is on another aspx form in which I am
AddItem.aspx
<div>
<asp:Label runat="server" Text="Category Name"></asp:Label>
<asp:DropDownList runat="server" ID="category_ddl"></asp:DropDownList>
</div>
<div>
<asp:Label runat="server" Text="Item Name"> </asp:Label>
<asp:TextBox runat="server" ID="itemname_txt"></asp:TextBox>
</div>
<div>
<asp:Label runat="server" Text="Description"></asp:Label>
<asp:TextBox runat="server" TextMode="MultiLine" Rows="5" Columns="50" ID="description_txt"></asp:TextBox>
</div>
<div>
<asp:Label runat="server" Text="Main Image"></asp:Label>
<asp:FileUpload runat="server" ID="mainimage_fileupload"/><br />
<asp:Image runat="server" ID="mainimage_img" Visible="false" />
<asp:Button runat="server" ID="fileupload_btn" Text="Upload" OnClick="fileupload_btn_Click" />
<asp:Label runat="server" ID="filename_lbl" Visible="false" ForeColor="Red" Font-Bold="true"></asp:Label>
</div>
<div>
<asp:Label runat="server" Text="Active"> </asp:Label>
<asp:CheckBox runat="server" ID="isActive_chk"/>
</div>
<div>
<asp:Button runat="server" ID="addItem_btn" Text="Add Item" OnClick="addItem_btn_Click"/>
<asp:Button runat="server" ID="cancel_btn" Text="Cancel" OnClick="cancel_btn_Click"/>
</div>
</div>
</form>
Whenever I upload the image it opens up as a normal aspx page. Basically, Whenever the aspx page is refreshed, it opens up as a normal web page. I always want to open it in the jQuery modal.
Please help in resolving this issue.
Thank you
i have webpages with master page which contain my css...When i add update panel in content palce holder, css on master page are working fine but same css not working in content page holder.
<%# Page Title="District Master" Language="C#" MasterPageFile="~/webpages/MasterPage_new.master"
AutoEventWireup="true" CodeFile="frmDistrict.aspx.cs" Inherits="webpages_frmDistrict" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager2" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<div id="main_div">
<asp:UpdatePanel ID="uppnl" runat="server" Mode="Conditional">
<ContentTemplate>
<table style="width: 100%; float: left;">
<tr>
<td style="height: 100px; width: 100%; float: left;">
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="btnSearchOK" runat="server" Text="Ok" Font-Names="Verdana" Font-Size="11px"
Width="6%" Font-Bold="True" OnClick="btnSearchOK_OnClick" />
<asp:Button ID="btnRefresh" runat="server" Text="Refresh" Font-Names="Verdana" Font-Size="11px"
Width="11%" Font-Bold="True" OnClick="btnRefresh_OnClick" />
<asp:Button ID="btnClose" runat="server" Text="Close" Font-Names="Verdana" Font-Size="11px"
Width="9%" Font-Bold="True" OnClick="btnClose_OnClick" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
That is because ASP.NET changes the id of all elements in the Content Panel and prepends the name of the master like id="content" would become id="body#content". To verify check the View Source in your browser.
Solution is to update your CSS according to the generated IDs.
I need help how to fix the error in my code. When I compile the code told me the error Validation (XHTML 1.0 Transitional): Element 'html' cannot be nested within element 'div'. If someone know, please help me?
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ManageUsers.aspx.cs" Inherits="probazaadmin.ManageUsers" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form2" runat="server"></form>
<div>Users Account Management</div>
<p></p>
<b>- The total registered users is: <asp:Literal runat="server" ID="lblTotalUsers" /><br />
- The total online users at this moment: <asp:Literal runat="server" ID="lblOnlineUsers" /></b>
<p></p>
In order to display all users whose name begins with letter click on the link letter:
<p></p>
<asp:Repeater runat="server" ID="rptAlphabetBar"
OnItemCommand="rptAlphabetBar_ItemCommand">
<ItemTemplate><asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Container.DataItem %>'
CommandArgument='<%# Container.DataItem %>' />
</ItemTemplate>
</asp:Repeater>
<p></p>
Use the below feature to search users by partial username or e-mail:
<p></p>
<asp:DropDownList runat="server" ID="ddlUserSearchTypes">
<asp:ListItem Text="UserName" Selected="true" />
<asp:ListItem Text="E-mail" />
</asp:DropDownList>
contains
<asp:TextBox runat="server" ID="txtSearchText" />
<asp:Button runat="server" ID="btnSearch" Text="Search"
OnClick="btnSearch_Click" />
</body></html>
</asp:Content>
Your code shows you are:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master"....
using a master page (which is where the HTML declaration is)
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
using the content page placeholder to add and entire HTML document - which you shouldn't do.
as stated, the master page is where HTML declarations go
ASP.net content sections are for content only.
Your code should be like this
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ManageUsers.aspx.cs" Inherits="probazaadmin.ManageUsers" %>
Users Account Management
- The total registered users is:
- The total online users at this moment:
In order to display all users whose name begins with letter click on the link letter:
<asp:Repeater runat="server" ID="rptAlphabetBar"
OnItemCommand="rptAlphabetBar_ItemCommand">
<ItemTemplate><asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Container.DataItem %>'
CommandArgument='<%# Container.DataItem %>' />
</ItemTemplate>
</asp:Repeater>
<p></p>
Use the below feature to search users by partial username or e-mail:
<p></p>
<asp:DropDownList runat="server" ID="ddlUserSearchTypes">
<asp:ListItem Text="UserName" Selected="true" />
<asp:ListItem Text="E-mail" />
</asp:DropDownList>
contains
<asp:TextBox runat="server" ID="txtSearchText" />
<asp:Button runat="server" ID="btnSearch" Text="Search"
OnClick="btnSearch_Click" />
</asp:Content>
I'm having issues with nestled, custom user controls that causes full page postbacks despite being encapsulated by an UpdatePanel.
The update panel:
<asp:Content ID="mainContentPane" ContentPlaceHolderID="mainContent" runat="server">
<asp:ScriptManager ID="smNetAjax" runat="server" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="pnlAssetTabView">
<ContentTemplate>
<custom:AssetTabView runat="server" ID="tvAddAssets" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
The AssetTabView-control:
<custom:TabView runat="server" ID="tvTabView" OnSelectedTabChanged="tvTabView_SelectedTabChanged" />
<custom:AssetList runat="server" ID="dalAssetList" />
And finally the TabView whose links causes full page postback:
<SelectedItemTemplate>
<div class="tab current">
<div class="left"></div>
<asp:LinkButton ID="ExtendedLinkButton1" runat="server"><span><%# DataBinder.Eval(Container.DataItem, "HeaderText") %></span></asp:LinkButton>
<div class="right"></div>
</div>
</SelectedItemTemplate>
<ItemTemplate>
<div class="tab">
<div class="left"></div>
<asp:LinkButton OnCommand="ProcessTabSelection" CommandArgument='<%# Container.ItemIndex %>' ID="ExtendedLinkButton2" runat="server" TabIndex='<%# TabIndex + Container.ItemIndex %>'><span><%# DataBinder.Eval(Container.DataItem, "HeaderText") %></span></asp:LinkButton>
<div class="right"></div>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
I'm really running out of ideas right and I'm desperate for any ideas that you might have! Thank you.
You have option of ProxyScriptManager. You don't need name of update panel, u can iterate to control list till closest-upward update panel is found.