I have strange problem.
I am implementing zero clipboard in asp.net.
First I created a page without site master and implemented the zero clipboard and it worked perfectly.
Here is the code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Locker.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
<script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.zclip.js"></script>
<script type="text/javascript" src="Scripts/jquery.zclip.min.js"></script>
<script>
$(document).ready(function () {
$('#<%=Button1.ClientID%>').zclip({
path: 'ZeroClipboard.swf',
copy: function () { return $('#<%=TextBox1.ClientID%>').val(); }
});
});
</script>
</body>
</html>
Now when I implement this same code on the page that use Master page, it doesn't work. It trigger I reckon post back so that javascript doesn't get executed.
I checked if autopost back it true but it is set to false.
I am not sure what causing this.
Any help will be appreciated.
Here is the code of the page which use Master page.
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="searchResult.aspx.cs" Inherits="Locker.searchResult" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.auto-style1 {
color: #FFFFFF;
font-size: large;
}
.auto-style2 {
color: #000000;
}
.auto-style3 {
color: #000000;
font-size: large;
}
</style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<p>
<p>
<strong> <span class="auto-style3">Information</span><span class="auto-style1"> </span></strong>
<div style="width:70%; margin: auto auto; text-align:left;">
<asp:Panel ID="Panel1" runat="server">
<br />
<asp:Label ID="Label4" runat="server" style="font-weight: 700; font-size: large" Text="Details for :" CssClass="auto-style2"></asp:Label>
<asp:Label ID="Label5" runat="server" style="font-weight: 700; font-size: large; color: #0000FF"></asp:Label>
<br />
<br />
<asp:Label ID="Label1" runat="server" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Password :" CssClass="auto-style2"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" BorderStyle="Solid" Enabled="False" Font-Size="Medium" ForeColor="Black" Width="213px"></asp:TextBox>
<asp:Button ID="Button3" runat="server" Text="Button" />
<input type="text" id="test_description" value="hi" />
<script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.zclip.js"></script>
<script type="text/javascript" src="Scripts/jquery.zclip.min.js"></script>
<script>
$(document).ready(function () {
$('#<%=Button3.ClientID%>').zclip({
path: 'ZeroClipboard.swf',
copy: function () { return $('#<%=TextBox2.ClientID%>').val(); }
});
});
</script>
<br />
<br />
<asp:Label ID="Label6" runat="server" style="font-weight: 700; font-size: large" Text="Description :" CssClass="auto-style2"></asp:Label>
<asp:TextBox ID="TextBox5" runat="server" BorderStyle="Solid" Enabled="False" Font-Size="Medium" Height="48px" TextMode="MultiLine" Width="213px"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label7" runat="server" style="font-weight: 700; font-size: small" Text="Last Editor was " CssClass="auto-style2"></asp:Label>
<asp:Label ID="Label8" runat="server" style="font-weight: 700; font-size: small" CssClass="auto-style2"></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Edit" Width="97px" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Update" Visible="False" Width="97px" />
<br />
<br />
<asp:Label ID="Label12" runat="server" style="font-weight: 700; font-size: large; color: #0000FF" Visible="False"></asp:Label>
<br />
<br />
<br />
<br />
</asp:Panel>
</div>
</asp:Content>
If you want to prevent postback, you may set UseSubmitBehavior to false on your Button
<asp:Button ID="Button3" runat="server" Text="Button" UseSubmitBehavior="False"/>
See UseSubmitBehavior description
Related
Okay, I have searched and searched, and methods that work for others don't seem to be working for me. I am trying to get AJAX's autocomplete to work but I have had no luck. Eventually, I want a textbox with autocomplete, pulling data from a sqldatasource, but first, I just want it to work. So, I have tried a simple implementation that I found on this website. The individual who used this code got it to work using this code, but my textbox functions just like an ordinary textbox (with no autocomplete features). I am fairly new to web dev and would appreciate any assistance. Thanks.
UPDATE:
Okay...I tried making a new, simple, webpage and tried to do the autocomplete thing again. I get this bizarre result (Single characters that make no sense):
Incorrect Autocomplete Image
aspx code
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string[] GetCompletionList(string prefixText, int count)
{
string[] results = { "test", "test", "test" };
return results;
}
cs. code
<asp:Label ID="FieldLabel" Text="Label:" runat="server"></asp:Label>
<asp:TextBox ID="InputField" runat="server"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender
ID="Autocompleter"
TargetControlID="InputField"
ServiceMethod="GetCompletionList"
ServicePath="~/BatchReleaseStatus.aspx"
MinimumPrefixLength="1"
CompletionInterval="1000"
runat="server">
</ajaxToolkit:AutoCompleteExtender>
Site.Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="CrownLabsDbFrontEnd.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - Crown Labs Quality Database</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<style type="text/css">
.auto-style1 {
width: 131px;
height: 91px;
}
</style>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server" EnablePageMethods="true" EnableScriptGlobalization="true">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/"><img alt="Crown Labs Logo" class="auto-style1" src="file:///C:/Users/bcampbell/Pictures/logo_crown.gif" /></a> </div>
<div class="navbar-collapse collapse" style="padding-top:50px">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/BatchReleaseStatus">Batch Release Status</a></li>
<li><a runat="server" href="~/CAPA">CAPA</a></li>
<li><a runat="server" href="~/Investigations">Investigations</a></li>
<li><a runat="server" href="~/Validations">Validations</a></li>
<li><a runat="server" href="~/Administration">Administration</a></li>
</ul>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register">Register</a></li>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %> !</a></li>
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
<div class="container body-content">
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</footer>
</div>
</form>
<script src="Scripts/currentClass.js"></script>
</body>
</html>
BatchReleaseStatus.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="BatchReleaseStatus.aspx.cs" Inherits="CrownLabsDbFrontEnd.BatchReleaseStatus" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<p><%--The following <p>'s keep the content from going under the Master Header --%>
<p> <p>
<asp:Button ID="btnShow_ClientSide" runat="server"
Text="show client side" OnClientClick="return false" />
<asp:Button ID="btnShow_ServerSide" runat="server"
Text="show server side" OnClick="btnShow_ServerSide_Click" />
<ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server"
TargetControlID="btnShow_ClientSide"
PopupControlID="pnlPopup" CancelControlID="btnHide_ClientSide"
BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server"
BackColor="#CCFFFF" BorderColor="#FF6699" style="text-align: left">
Batch Number:
<asp:TextBox ID="BatchNumTextBox" runat="server"></asp:TextBox>
Part:
<br />
<asp:Button ID="btnHide_ClientSide" runat="server"
Text="hide client side" OnClientClick="return false" OnClick="btnHide_ClientSide_Click" />
<asp:Button ID="btnHide_ServerSide" runat="server"
Text="hide server side" OnClick="btnHide_ServerSide_Click" />
</asp:Panel>
<asp:Label ID="FieldLabel" Text="Label:" runat="server"></asp:Label>
<asp:TextBox ID="InputField" runat="server"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender
ID="Autocompleter"
TargetControlID="InputField"
ServiceMethod="GetCompletionList"
ServicePath="~/BatchReleaseStatus.aspx"
MinimumPrefixLength="1"
CompletionInterval="1000"
runat="server">
</ajaxToolkit:AutoCompleteExtender>
<p>
<asp:SqlDataSource ID="BatchReleaseData" runat="server" ConnectionString="<%$ ConnectionStrings:TestDBConnectionString %>" SelectCommand=<%# ViewState["stringInViewState"] %>></asp:SqlDataSource>
<%--Set up the stationary header for the primary GridView --%>
<div style =" background-color:navy;
height:30px;width:450px; margin-left:auto; margin-right:auto">
<table cellspacing="0" cellpadding = "0" border="0" id="tblHeader"
style="font-family:Arial;font-size:10pt;width:438px;color:white;
border-collapse:collapse;height:100%;">
<tr>
<%--Sets up the link buttons that will populate the header and allow sorting --%>
<td style ="width:165px;text-align:center">
<asp:LinkButton ID="MfgDatLnkBtn" runat="server" OnClick="MfgDatLnkBtn_Click" ForeColor="White">Manufacture Date</asp:LinkButton>
</td>
<td style ="width:140px;text-align:center">
<asp:LinkButton ID="BatchLnkBtn" runat="server" OnPreRender="LinkButtons_PreRender" OnClick="BatchLnkBtnClck">Batch ID</asp:LinkButton>
</td>
<td style ="width:135px;text-align:center">
<asp:LinkButton ID="DescriptionLnkBtn" runat="server" OnPreRender="LinkButtons_PreRender" OnClick="DescriptionLnkBtn_Click">Description</asp:LinkButton>
</td>
<td style ="width:140px;text-align:center">
<asp:LinkButton ID="BaseLnkBtn" runat="server" OnPreRender="LinkButtons_PreRender" OnClick="BaseLnkBtn_Click">Base</asp:LinkButton>
</td>
</tr>
</table>
</div>
<div style="margin-left:auto; margin-right:auto; width:450px; overflow:auto; height:450px; border:solid">
<table class="nav-justified">
<tr>
<td style="text-align: center">
<div style="margin-left:auto; margin-right:auto">
<asp:GridView ID="BatchReleaseGV" DataSourceId="BatchReleaseData" DataKeyNames="Mfg_Date" AutoGenerateColumns="false" ShowHeader="false"
runat="server" OnSelectedIndexChanged="BatchReleaseGV_SelectedIndexChanged" OnRowDataBound="BatchReleaseGV_RowDataBound">
<Columns>
<asp:BoundField ItemStyle-Width = "150px" DataField="Mfg_Date" HeaderText="Manufacture Date" DataFormatString="{0:MM/dd/yyyy }" HtmlEncode=false >
<ItemStyle Font-Size="Large" />
</asp:BoundField>
<asp:BoundField ItemStyle-Width = "150px" DataField="Batch" HeaderText="Batch ID"
FooterText="">
<FooterStyle CssClass="FooterStyle" />
</asp:BoundField >
<asp:BoundField ItemStyle-Width = "150px" DataField="Product" HeaderText="Description" />
<asp:BoundField ItemStyle-Width = "150px" DataField="Base" HeaderText="Base (if applicable)" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</table>
</div>
<p>
<asp:SqlDataSource ID="BatchReleaseDataMfgDateOnly" runat="server" ConnectionString="<%$ ConnectionStrings:TestDBConnectionString %>" SelectCommand="SELECT DISTINCT CONVERT(date,[Mfg Date]) AS Mfg_Date FROM [Batch Info] ORDER BY [Mfg_Date] DESC"></asp:SqlDataSource>
<asp:SqlDataSource ID="BatchReleaseDataBatchOnly" runat="server" ConnectionString="<%$ ConnectionStrings:TestDBConnectionString %>" SelectCommand="SELECT DISTINCT [Batch] FROM [Batch Info] ORDER BY [Batch]"></asp:SqlDataSource>
<asp:SqlDataSource ID="BatchReleaseDataProductOnly" runat="server" ConnectionString="<%$ ConnectionStrings:TestDBConnectionString %>" SelectCommand="SELECT DISTINCT [Product] FROM [Batch Info] ORDER BY [Product]"></asp:SqlDataSource>
<asp:SqlDataSource ID="BatchReleaseDataBaseOnly" runat="server" ConnectionString="<%$ ConnectionStrings:TestDBConnectionString %>" SelectCommand="SELECT DISTINCT [Base] FROM [Batch Info] ORDER BY [Base]"></asp:SqlDataSource>
</p>
<table class="nav-justified">
<tr>
<td class="text-right">Manufacturing Date:
</td>
<td class="text-left">
<asp:TextBox ID="MfgDateTxtBx" runat="server"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="MfgDateTxtBx_CalendarExtender" runat="server" TargetControlID="MfgDateTxtBx" />
<asp:RegularExpressionValidator ID="MfgDateValidator" runat="server" ControlToValidate="MfgDateTxtBx" ErrorMessage="Invalid Date Entered" ValidationExpression="^((0?[13578]|10|12)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[01]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1}))|(0?[2469]|11)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[0]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1})))$" Font-Bold="True" ForeColor="Red"></asp:RegularExpressionValidator>
</td>
<td> Batch ID:
<asp:DropDownList ID="BatchDropDown" runat="server" DataSourceID="BatchReleaseDataBatchOnly" DataValueField="Batch">
</asp:DropDownList>
</td>
<td> Description:
<asp:DropDownList ID="ProductDropDown" runat="server" DataSourceID="BatchReleaseDataProductOnly" DataValueField="Product">
</asp:DropDownList>
</td>
<td>Base: <asp:DropDownList ID="BaseDropDown" runat="server" DataSourceID="BatchReleaseDataBaseOnly" DataValueField="Base">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="text-right">To (Optional): </td>
<td style="text-align: left">
<asp:TextBox ID="DateRangeTxtBx" runat="server"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="DateRangeTxtBx_CalendarExtender" runat="server" TargetControlID="DateRangeTxtBx" />
<asp:RegularExpressionValidator ID="MfgDateRangeValidator" runat="server" ControlToValidate="DateRangeTxtBx" ErrorMessage="Invalid Date Entered" ValidationExpression="^((0?[13578]|10|12)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[01]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1}))|(0?[2469]|11)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[0]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1})))$" Font-Bold="True" ForeColor="Red" Display="Dynamic"></asp:RegularExpressionValidator>
<asp:CompareValidator id="MfgDateRangeComparator" runat="server"
ControlToCompare="MfgDateTxtBx" cultureinvariantvalues="true"
display="Dynamic" enableclientscript="true"
ControlToValidate="DateRangeTxtBx"
ErrorMessage="Start date must be earlier than finish date"
type="Date" setfocusonerror="true" Operator="GreaterThanEqual"
text="Start date must be earlier than finish date" Font-Bold="True" ForeColor="Red"></asp:CompareValidator>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="TextBox3_AutoCompleteExtender" runat="server" TargetControlID="TextBox3" MinimumPrefixLength="1" ServiceMethod="GetCompletionList" ServicePath="BatchReleaseStatus.aspx">
</ajaxToolkit:AutoCompleteExtender>
</td>
<td> </td>
<td> </td>
</tr>
</table>
<p>
<asp:Button ID="submitBtn" runat="server" OnClick="submitBtn_Click" Text="Submit" />
</p>
<p>
</p>
</asp:Content>
In order to use System.Web.Services.WebMethod in a codebehind file from an aspx Site, this method must be static. Also your scriptmanager need to have "EnablePageMethods=true" setted.
=> This approach is called PageMethods.
I think it's better to use WebApi instead of PageMethods, you can easily integerate this into your asp.net project. Here you will find a startpoint.
Getting started with Web-API
PageMethod-Test:
<script type="text/javascript">
function Test() {
PageMethods.Test(function(result){alert(result);});
}
[System.Web.Services.WebMethod]
public static string Test()
{
return "Hello StackOverflow";
}
Kindly tell me how i adjust image width and height. When i upload Image it automatically adjust in repeater according to their height and width but inside the part of repeater.
that's my code
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="LJCI/js/jquery-1.7.2.min.js"></script>
<script src="LJCI/js/lightbox.js"></script>
<link href="LJCI/css/lightbox.css" rel="stylesheet" />
<asp:DataList ID="GalleryDataList" runat="server" RepeatDirection="Horizontal" RepeatColumns="3" OnItemDataBound="GalleryDataList_ItemDataBound">
<ItemTemplate>
<div style="margin-left: auto;
margin-right: auto; width: 250px; margin-top: 15px; padding-left: 15px;">
<div style="border-radius:10px;height:auto; border: 1px solid #CCCCCC;box-shadow: 0 2px 4px rgba(0,0,0,0.9);">
<div class="lightbox-container">
<div class="box">
<a id="Img2" href='<%# Eval("ImgUrl").ToString().Substring(1) %>' rel="lightbox[roadtrip]" title='<%# String.Format("{0} {1} {2} {3} {4} {5} {6} {7} {8} {9}","Arrival Date: ", Eval("ArrivalDate","{0:d}"), "<br/><br/>","Brush:", Eval("Brush"), "<br/><br/>", "Size: ", Eval("Width"), "x",Eval("Height") )%>'data-lightbox="roadtrip" data-caption="image-1" >
<asp:Image ID="Img1" runat="server" ImageUrl='<%#Eval("ImgUrl") %>' CssClass="aspectRatio" /></a>
<div class="title1 " style="text-align:left;padding-left:10px ;margin-bottom:16px;">
<asp:Label ID="lblReference" runat="server" Text='<%# Eval("Reference")%>' /><br />
Size: <asp:Label ID="lblWidth" runat="server" Text='<%# Eval("Width")%>' /> x <asp:Label ID="lblheight" runat="server" Text='<%# Eval("Height")%>' /><br/>
<asp:Label ID="lblBrush" runat="server" Text='<%# Eval("Brush")%>' /><br />
<asp:Label ID="lblDate" runat="server" Text='<%# Eval("ArrivalDate","{0:d}")%>' /><br />
<asp:Label CssClass="lblClass" ID="lblStatus" ForeColor="#B86365" runat="server" Text='<%# Eval("Sold").ToString() == "1"? "Sold" : "Available" %>' />
<br /> <br /><asp:HyperLink ID="DetailsHyperLink1" CssClass="btnClss2" ForeColor="#B86365" runat="server" NavigateUrl='<%# Eval("Id", "OrderForm.aspx?Id={0}") %>'>Enquiry</asp:HyperLink>
<br /><div class="fb-like" data-href='<%# Eval("ImgUrl", "http://#.com/Images/prod/{0}") %>'" data-width="20" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
</div></div>
<div style="clear: both;">
</div>
</div>
</ItemTemplate>
Code output
like this i want to adjust my images according to their positions
I am using 4 Modalpopupextender in my start-up page of my project. When I run my start-up page, the panels which I have set under PopupControlID in Modalpopupextender are visible even before the specified TargetControlID is clicked. I have tried to set visible of those to false but it dint helped me and I also tried to create a css class to hide a panel when page is loaded and to view the panel when specified button is clicked but it neither helped me. Please help. Thank you.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type = "text/css">
.hidePanel
{
display:none;
}
.showpanel
{
display : block;
}
.panel
{
background : gray;
padding : 10px;
}
div ul ul
{
display: none;
}
div ul li:hover > ul
{
display: block;
}
div ul li ul:hover > ul
{
display: block;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:modalpopupextender ID="Modalpopupextender1" CancelControlID = "Button8" TargetControlID = "Button2" PopupControlID = "StaffSP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender2" CancelControlID = "Button10" TargetControlID = "Button3" PopupControlID = "StaffFP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender3" CancelControlID = "Button12" TargetControlID = "Button5" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender4" CancelControlID = "Button14" TargetControlID = "Button6" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="XX-Large" Text="Automated Examination System"></asp:Label><br /> <br /><br />
<asp:Panel ID = "Main" runat = "server" Height="181px" Width="275px">
<ul>
<li style="margin-removed 33px; width: 169px;"> <asp:LinkButton ID = "LinkAdmin" runat = "server" onclick="LinkAdmin_Click">Coordinator</asp:LinkButton></li>
<li style="width: 172px; margin-removed 33px"> <asp:LinkButton ID="LinkStaff" runat="server" onclick="LinkStaff_Click">Staff</asp:LinkButton></li>
<li style="margin-removed 33px"> <asp:LinkButton ID = "LinkStudent" runat = "server">Student</asp:LinkButton>
<ul>
<li><asp:LinkButton ID = "LinkButton1" runat = "server">Fresh Registration</asp:LinkButton></li>
<li><asp:LinkButton ID = "LinkButton2" runat = "server">Re Registration</asp:LinkButton></li>
</ul>
</li>
</ul>
</asp:Panel>
</div>
<asp:Panel ID="StaffLogin" runat="server" Height="59px"
style="z-index: 1; left: 302px; top: 112px; position: absolute; height: 59px; width: 275px"
Visible="False" Width="275px">
Staff<br />
<asp:Button ID="Button1" runat="server" Text="Login" />
<asp:Button ID="Button2" runat="server" Text="New Staff" />
<asp:Button ID="Button3" runat="server" Text="Fogot Password" />
</asp:Panel>
<asp:Panel ID="AdminLogin" runat="server"
style="z-index: 1; left: 302px; top: 193px; position: absolute; height: 78px; width: 275px"
Visible="False" Width="275px">
Admin<br />
<asp:Button ID="Button4" runat="server" Text="Login" />
<asp:Button ID="Button5" runat="server" Text="New Admin" />
<asp:Button ID="Button6" runat="server" Text="Forgot Password" />
</asp:Panel>
<asp:Panel ID="StaffSP" runat="server" Height="48px" Width="274px">
Staff SP<br />
<asp:Button ID="Button7" runat="server" Text="Button" />
<asp:Button ID="Button8" runat="server" Text="Cancel" />
</asp:Panel>
<asp:Panel ID="StaffFP" runat="server" Height="48px" Width="274px">
Staff FP<br />
<asp:Button ID="Button9" runat="server" Text="Button" />
<asp:Button ID="Button10" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminSP" runat="server" Height="48px" Width="274px">
Admin SP<br />
<asp:Button ID="Button11" runat="server" Text="Button" />
<asp:Button ID="Button12" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminFP" runat="server" Height="48px" Width="274px">
AdminFP<br />
<asp:Button ID="Button13" runat="server" Text="Button" />
<asp:Button ID="Button14" runat="server" Text="Cancel" />
</asp:Panel>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class TrailPopup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LinkAdmin_Click(object sender, EventArgs e)
{
AdminLogin.Visible = true;
StaffLogin.Visible = false;
}
protected void LinkStaff_Click(object sender, EventArgs e)
{
AdminLogin.Visible = false;
StaffLogin.Visible = true;
}
}
EDIT :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type = "text/css">
.hidePanel
{
display:none;
}
.showpanel
{
display : block;
}
.panel
{
background : gray;
padding : 10px;
}
div ul ul
{
display: none;
}
div ul li:hover > ul
{
display: block;
}
div ul li ul:hover > ul
{
display: block;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="XX-Large" Text="Automated Examination System"></asp:Label><br /> <br /><br />
<asp:Panel ID = "Main" runat = "server" Height="181px" Width="275px">
<ul>
<li style="margin-left: 33px; width: 169px;"> <asp:LinkButton ID = "LinkAdmin" runat = "server" onclick="LinkAdmin_Click">Coordinator</asp:LinkButton></li>
<li style="width: 172px; margin-left: 33px"> <asp:LinkButton ID="LinkStaff" runat="server" onclick="LinkStaff_Click">Staff</asp:LinkButton></li>
<li style="margin-left: 33px"> <asp:LinkButton ID = "LinkStudent" runat = "server">Student</asp:LinkButton>
<ul>
<li><asp:LinkButton ID = "LinkButton1" runat = "server">Fresh Registration</asp:LinkButton></li>
<li><asp:LinkButton ID = "LinkButton2" runat = "server">Re Registration</asp:LinkButton></li>
</ul>
</li>
</ul>
</asp:Panel>
</div>
<asp:Panel ID="StaffLogin" runat="server" Height="59px"
style="z-index: 1; left: 302px; top: 112px; position: absolute; height: 59px; width: 275px"
Visible="False" Width="275px">
Staff<br />
<asp:Button ID="Button1" runat="server" Text="Login" />
<asp:Button ID="Button2" runat="server" Text="New Staff" />
<asp:Button ID="Button3" runat="server" Text="Fogot Password" />
</asp:Panel>
<asp:Panel ID="AdminLogin" runat="server" style="left: 302px; top: 193px; position: absolute; height: 78px; width: 275px" Visible="False" Width="275px">Admin<br />
<asp:Button ID="Button4" runat="server" Text="Login" />
<asp:Button ID="Button5" runat="server" Text="New Admin" />
<asp:Button ID="Button6" runat="server" Text="Forgot Password" />
</asp:Panel>
<asp:Panel ID="StaffSP" Visible = "false" runat="server" Height="48px" Width="274px">
Staff SP<br />
<asp:modalpopupextender ID="Modalpopupextender1" CancelControlID = "Button8" TargetControlID = "Button2" PopupControlID = "StaffSP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button7" runat="server" Text="Button" />
<asp:Button ID="Button8" runat="server" Text="Cancel" />
</asp:Panel>
<asp:Panel ID="StaffFP" Visible = "false" runat="server" Height="48px" Width="274px">
Staff FP<br />
<asp:modalpopupextender ID="Modalpopupextender2" CancelControlID = "Button10" TargetControlID = "Button3" PopupControlID = "StaffFP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button9" runat="server" Text="Button" />
<asp:Button ID="Button10" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminSP" Visible = "false" runat="server" Height="48px" Width="274px">
Admin SP<br />
<asp:modalpopupextender ID="Modalpopupextender4" CancelControlID = "Button14" TargetControlID = "Button6" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button11" runat="server" Text="Button" />
<asp:Button ID="Button12" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminFP" Visible = "false" runat="server" Height="48px" Width="274px">
AdminFP<br />
<asp:modalpopupextender ID="Modalpopupextender3" CancelControlID = "Button12" TargetControlID = "Button5" PopupControlID = "AdminFP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button13" runat="server" Text="Button" />
<asp:Button ID="Button14" runat="server" Text="Cancel" />
</asp:Panel>
</form>
</body>
</html>
Call your css class hide panel in every PopupControl used for modalpopupextender control:
`<asp:Panel ID="StaffSP" runat="server" CssClass="hide" Height="48px" Width="274px" >
Staff SP<br />
<asp:Button ID="Button7" runat="server" Text="Button" />
<asp:Button ID="Button8" runat="server" Text="Cancel" />
</asp:Panel>
<asp:Panel ID="StaffFP" runat="server" Height="48px" Width="274px" style="display:none;">
Staff FP<br />
<asp:Button ID="Button9" runat="server" Text="Button" />
<asp:Button ID="Button10" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminSP" runat="server" Height="48px" Width="274px" CssClass="hidePanel">
Admin SP<br />
<asp:Button ID="Button11" runat="server" Text="Button" />
<asp:Button ID="Button12" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminFP" runat="server" Height="48px" Width="274px" Visible="false">
AdminFP<br />
<asp:Button ID="Button13" runat="server" Text="Button" />
<asp:Button ID="Button14" runat="server" Text="Cancel" />
</asp:Panel>`
you have put all the 4 TargetControlIDs inside the panels which are not visible
I have a master page and their is script manager with update panel inside it. . now i am trying to add update panel in content page without using script manager but it gives me an error:
The control with ID 'updpanel' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.
I know i can use only one instance of script manager, then i tried ScriptManagerProxy but it gives me the error that scriptMangerProxy requires script manager.
I also tried ajax:ToolScriptManager but it also gives the same results
So the question is how can make the update panel to work in content page..
Master Page:
<%# Master Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="SideMaster.master.cs" Inherits="SideMaster" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/jscript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#chit').scrollTop(1000000);
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="sidemenu">
<asp:SiteMapDataSource ID="topNav" runat="server" />
<asp:Menu ID="SideMenu" runat="server" DataSourceID="topNav" CssClass="SideMenu" StaticDisplayLevels="4"
Font-Bold="true" Font-Size="20" IncludeStyleBlock="true" >
<StaticMenuItemStyle VerticalPadding="5" BackColor="#670a0a" ForeColor="White" HorizontalPadding="5" />
<StaticSelectedStyle BackColor="White" ForeColor="#670a0a" />
</asp:Menu>
</div>
<div class="cont3" >
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="rightmenu">
<div class="newspan">
<asp:Repeater ID="RepNews" runat="server" >
<HeaderTemplate><div class="newsheadcont">News & Events</div></HeaderTemplate>
<ItemTemplate>
<div class="newstemp">
<hr />
# <%#Eval("News") %>
<asp:LinkButton ID="LinkNews" runat="server" CssClass="welcomeMore"></asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<br /><br />
<div class="chatcont" style="margin-left:1%;">
<div class="chat">
<h2 class="chathead">Peoples Talking About </h2>
<asp:ScriptManager ID="scmang" runat="server"></asp:ScriptManager>
<%--<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>--%>
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get('chit').scrollLeft;
yPos = $get('chit').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('chit').scrollLeft = xPos;
$get('chit').scrollTop = yPos;
}
</script>
<asp:UpdatePanel ID="updPanelChat" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Panel ID="pan" runat="server">
<asp:ListView ID="ListChat" runat="server" >
<LayoutTemplate>
<div class="chattemp" style="width:250px; " id="chit" >
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</div>
</LayoutTemplate>
<ItemSeparatorTemplate><hr /></ItemSeparatorTemplate>
<EmptyDataTemplate>No Data Found</EmptyDataTemplate>
<ItemTemplate>
<div class="chatbox" >
<div class="chatpic" style="margin:18px 0px 0px 0px;" >
<asp:ImageButton ID="ImageChat" runat="server"
ToolTip='<%#Eval("UserName") %>'
ImageUrl='<%# "~/ShowImage.ashx?Name=" + Server.UrlEncode(Eval("UserName").ToString()) %>'
PostBackUrl='<%#"~/Profile/Profile.aspx?Name="+Eval("UserName") %>'
Width="50" Height="50" />
</div>
<div class="chatbubble" style="width:160px; margin:-50px 5px 5px 60px; float:left;">
<asp:Label ID="LabelChat" runat="server" Width="100" Height="50"><%#Eval("Body") %></asp:Label>
</div>
<div class="chatname" style="width:50px; border:none;" >
<asp:LinkButton ID="LinkUserName" runat="server"
PostBackUrl='<%#"~/Profile/Profile.aspx?Name="+Eval("UserName") %>'><%#Eval("UserName") %></asp:LinkButton>
</div>
</div>
</ItemTemplate>
</asp:ListView>
<asp:Timer ID="TimerUpdate" runat="server" Interval="20000"
ontick="TimerUpdate_Tick"></asp:Timer>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<div class="messagebox" style="width:250px; height:120px; border:none;">
<asp:TextBox ID="TextBoxMessage" runat="server" TextMode="MultiLine" Visible="false" Width="250" Height="80" MaxLength="500"></asp:TextBox>
<asp:Button ID="ButtonMessage" runat="server" Text="Comment"
onclick="ButtonMessage_Click" Visible="false" />
</div>
</div>
</div>
</div>
</asp:Content>
Content Page:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="interface" >
<table>
<tr>
<td align="center">
<div class="goog">
<asp:LinkButton ID="LinkFind" runat="server" CssClass="linkgoog">Find</asp:LinkButton>
</div>
</td></tr>
<tr><td align="left">
<div>
<asp:TextBox ID="TextBoxSearch" runat="server" Width="600" Height="40"></asp:TextBox>
<asp:Button ID="ButtonSearch" runat="server" Text="SEARCH" CssClass="loginbt"
onclick="ButtonSearch_Click1" /><br />
</div>
</td></tr>
</table>
</div>
<br />
<div class="interface">
<asp:UpdatePanel ID="updpanel" runat="server">
<ContentTemplate>
<asp:GridView ID="GridAll" runat="server"
onitemcommand="GridAll_ItemCommand" AutoGenerateColumns="false" CellPadding="10" AllowPaging="true" PageSize="3" OnPageIndexChanging="GridAll_PageIndexChanging" >
<Columns>
<asp:TemplateField HeaderText="Name" HeaderStyle-BackColor="#670a0a" HeaderStyle-ForeColor="White" HeaderStyle-Font-Size="20">
<ItemTemplate>
<asp:LinkButton ID="lnkname" runat="server"
Text='<%#Eval("Name") %>'
PostBackUrl='<%#"~/Profile/Profile.aspx?Name="+Eval("UserName") %>' CssClass="welcomeMore"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Department" HeaderStyle-BackColor="#670a0a" HeaderStyle-ForeColor="White" HeaderStyle-Font-Size="20" >
<ItemTemplate>
<span class="googtext"><%#Eval("Department") %></span>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Year" HeaderStyle-BackColor="#670a0a" HeaderStyle-ForeColor="White" HeaderStyle-Font-Size="20">
<ItemTemplate>
<span class="googtext"><%#Eval("Year") %></span>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Photo" HeaderStyle-BackColor="#670a0a" HeaderStyle-ForeColor="White" HeaderStyle-Font-Size="20">
<ItemTemplate>
<asp:Image ID="ImageProfile" runat="server" ImageUrl = '<%# "~/ShowImage.ashx?Name=" + Server.UrlEncode(Eval("UserName").ToString()) %>' Width="150" Height="150" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<div class="emptytext">No Match Found</div>
</EmptyDataTemplate>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
Your help will be appreciated. . . Thank you
You should have only one script manager in master page above update panel.
In any of the content page you can use update panel as there is already script manager in master page. Also you should provide some code for your problem.
when i click on the button which is inside the item template of gridview then onclientclick event should fire and then call the javascript function but my problem is that there no onclientclick event is fire in item template button.
<%# Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.dvBroker
{
display: none;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url(image/broker_bg.png);
background-repeat: repeat;
}
.collection_heading2
{
font-family: verdana;
font-size: 12px;
font-weight: bold;
color: #000000;
background-image: url(image/gray_bg.gif);
background-repeat: repeat-x;
height: 20px;
width: 386px;
margin-left: 30%;
margin-top: 50px;
padding: 7px 7px 0px 7px;
border: 3px solid #000000;
border-bottom: none;
text-align: center;
}
.broker_window
{
border: 3px solid #000000;
height: 250px;
overflow: auto;
width: 400px;
background-color:White;
margin-left: 30%;
border-top: none;
padding-top: 10px;
text-align: left;
}
</style>
</head>
<body>
<script type="text/javascript" language="javascript">
function Show()
{
document.getElementById("dvStage").style.display='block';
return false;
}
function Close()
{
document.getElementById("dvStage").style.display='none';
return false;
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="sc1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<div>
<asp:Label ID="lblmsg" runat="server" ForeColor="#FF3300"></asp:Label>
<asp:LinkButton ID="lbnaddnewcharge" runat="server" OnClientClick="return Show();"
Text="Show"></asp:LinkButton>
</div>
<div>
ROLL NO:
<asp:TextBox ID="txtrollno" runat="server"></asp:TextBox>
<div>
STUDENT NAME:
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="ADD" BorderStyle="Ridge" OnClick="btnadd_Click" /></div>
<asp:GridView ID="gvstudent" runat="server" AutoGenerateColumns="False" Width="857px"
OnRowDataBound="gvstudent_RowDataBound" OnSelectedIndexChanged="gvstudent_SelectedIndexChanged1">
<Columns>
<asp:BoundField HeaderText="ROLL NO" DataField="roll_no" />
<asp:BoundField HeaderText="NAME" DataField="name" />
<asp:BoundField HeaderText="TOTAL" DataField="total" />
<asp:BoundField HeaderText="STATUS" DataField="status" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button CommandName="Click" ID="btnclick" OnCommand="btnclick_Click" CommandArgument='<%#Eval("roll_no") %>'
OnClientClick="return Show('aspnetForm','[gvstudent]');" runat="server" Text="Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="dvstage" class="dvBroker">
<div class="collection_heading2">
<div style="float: left">
SUBJECT
</div>
<div style="float: right">
<asp:ImageButton ID="btnclose" runat="server" ImageUrl="~/image/delete.png" OnClientClick="return Close();" />
</div>
</div>
<div class="broker_window">
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="gvchild"
PopupControlID="btnclick" Position="Center">
</asp:PopupControlExtender>
<asp:GridView ID="gvchild" OnRowDataBound="gvChild_RowDataBound" runat="server" AutoGenerateColumns="false"
EmptyDataText="NO Row in grid view">
<Columns>
<asp:BoundField HeaderText="Subject" DataField="subject_name" />
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtsubject" runat="server" Text='<%#Bind("marks") %>'></asp:TextBox></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnaddchild" runat="server" Text="ADD" OnClick="btnaddchild_Click" />
<asp:Button ID="btncancle" runat="server" Text="CANCLE" OnClick="btncancle_Click1" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
Use a client-side framework like jQuery. Don't put all the onclick client-side events inline. It bloats your markup and it's harder to maintain. Bind the events instead, e.g. http://api.jquery.com/bind and/or http://api.jquery.com/live.
Since its ASP.NET WebForms, your HTML elements id attributes are rendered as the ClientID property of the server controls, so if that causes problems for you getting a reference to the elements to bind events to via id using a jQuery selector, use jQuery's selectors, http://api.jquery.com/category/selectors .
e.g.
$("input[id$='btnClose'").live("click", function(event) {
$("#dvStage").hide();
event.stopPropagation();
});
$("a[id$='lbnaddnewcharge']").live("click", function(event) {
$("#dvStage").show();
event.stopPropagation();
});