I want to use jQuery Accordion in my ASP.NEt Appliacation and it works but if I click on a Button in the Accordion then my Accordion remove :( Here my Code and two pitures...
aspx:
<link href="App_Theme/mainStyle.css" type="text/css" rel="Stylesheet" />
<script src="Scripte/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="Scripte/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<link href="App_Theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#accordion").accordion();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="manager" runat="server"></asp:ToolkitScriptManager>
<asp:UpdatePanel ID="update" runat="server">
<ContentTemplate>
<div id="accordion">
<h3><asp:Label ID="lblAbwesenheit" runat="server"/></h3>
<div>
<asp:Panel runat="server" ID="pn1" DefaultButton="btnAbwesenheitErzeugen">
<div id="Angaben" runat="server">
<table id="Angabentabelle" runat="server">
<tr>
<td><asp:Label ID="lblAbwesenheitBis" runat="server" /></td><td><asp:TextBox ID="txtAbwesenheitBis" runat="server" Enabled="false"></asp:TextBox>
<asp:ImageButton Width="20px" Height="20px" ID="imgbtnAbwesenheitBis" runat="server" ToolTip="Abwesenheit bis..." ImageUrl="~/App_Theme/Calender.ico" />
<asp:CalendarExtender ID="AbwesenheitBis" runat="server" TargetControlID="txtAbwesenheitBis"
Format="dd.MM.yyyy" PopupButtonID="imgbtnAbwesenheitBis"></asp:CalendarExtender>
</td>
</tr>
<tr>
<td><asp:Label ID="lblVertreter" runat="server" /></td>
<td>
<asp:TextBox ID="txtVertreter" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoComlete" runat="server" TargetControlID="txtVertreter"
ServiceMethod="GetCompletionList" ServicePath="" Enabled="true"
DelimiterCharacters="" UseContextKey="true" MinimumPrefixLength="1" ></asp:AutoCompleteExtender>
(Suche nach Nachname)
</td>
</tr>
</table>
<asp:Button ID="btnAbwesenheitErzeugen" runat="server" Text="Erzeugen" OnClick="btnAbwesenheitErzeugen_Click" />
<br />
<br />
</div>
<HTMLEditor:Editor ID="htmlEditAbwesenheit" runat="server" Content="<% %>" />
</asp:Panel>
</div>
<h3><asp:Label ID="lblSignatur" runat="server" /></h3>
<div>
<HTMLEditor:Editor ID="htmlEditSignatur" runat="server" Content="<% %>" />
</div>
</div>
If I start my Page I see that:
and if I click on the Button then I see that...
Why My Accordion remove?
It's because your accordion is inside of an updatepanel. When you post back, everything inside your updatepanel is removed from the DOM and readded. Hence, the DOM element that was the accordion is gone. You need to call: $("#accordion").accordion(); after your postback.
one way you could do that is to do this:
<script type="text/javascript" language="javascript">
function SetupAccordion(){
$("#accordion").accordion();
}
$(document).ready(function () {
SetupAccordion();
if (typeof Sys.WebForms != 'undefined') {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(SetupAccordion);
}
});
</script>
Related
I have a simple web form with some dropdown and textboxes. I am trying to get the value of the all the elements by looping through the control. (note I am assuming that I dont know the name/id of the elements and hence I am trying to loop through them to get the information and store it in a database) However the when I loop through control I get count at 5 even though there are 4 input elements and the control are represented by System.Web.UI.LiteralControl instead of System.Web.UI.WebControls.TextBox or System.Web.UI.WebControls.dropdown
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Datepicker/jquery-1.7.js" type="text/javascript"></script>
<script src="Datepicker/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script>
$(function () {
$("#targetDueDate").datepicker();
});
</script>
<script>
$(function () {
$("#targetdeliveryoffiles").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Tier:
</td>
<td>
<asp:DropDownList ID="tier" runat="server">
<asp:ListItem>Select Tier</asp:ListItem>
<asp:ListItem>Tier1</asp:ListItem>
<asp:ListItem>Tire2</asp:ListItem>
<asp:ListItem>Tier3</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Author:
</td>
<td>
<asp:DropDownList ID="author" runat="server">
<asp:ListItem>Select Author</asp:ListItem>
<asp:ListItem>Author1</asp:ListItem>
<asp:ListItem>Author2</asp:ListItem>
<asp:ListItem>Author3</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Quotation For:
</td>
<td>
<asp:TextBox ID="quotationFor" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Previous Est #:</td>
<td>
<asp:TextBox ID="previousEst" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
ControlToValidate="previousEst"
ValidationExpression="\d+"
Display="Dynamic"
EnableClientScript="true"
ErrorMessage="Please enter numbers only"
runat="server" ValidationGroup="a" ForeColor="Red" />
</td>
</tr>
</table>
<br />
<div style="text-align: center; width: 327px;">
<asp:Button ID="submit" runat="server" Text="Submit" CssClass="btnsubmit" ValidationGroup="a" OnClick="submit_Click" />
</div>
</div>
</form>
</body>
</html>
The onsubmit code
protected void submit_Click(object sender, EventArgs e)
{
foreach(Control c in controls)
{
if(c is System.Web.UI.WebControls.TextBox)
{
/// Do Something
}
}
}
What am i doing wrong ? How do I loop through the element to get their values ? (also the ID since I need to store both in the database)
Everything is a control in web forms; static text is LiteralControl types. So you need to check the type of control as you are and avoid Label, Literal, LiteralControl type of controls, and just look for the controls on your form. Some controls are container controls, so you may need to get into recursion to get this to work.
my header portion is
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>SimpleAdmin</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
$(".box .h_title").not(this).next("ul").hide("normal");
$(".box .h_title").not(this).next("#home").show("normal");
$(".box").children(".h_title").click(function () {$(this).next("ul").slideToggle(); });
});
</script>
</head>
And my body portion
<body>
<form id="form" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DataList ID="dtlheader" runat="server" Width="189px">
<ItemTemplate>
<table cellpadding="0" cellspacing="0" width="100%" onmouseover="this.style.background='#683372'" onmouseout="this.style.background='#3e3d3b'" style="background-color: #3e3d3b;">
<tr>
<td>
<div class="box">
<div class="h_title" style="color: #FFFFFF"><%# Eval("header") %></div>
<ul>
<asp:DataList ID="dtlsubtitle" runat="server">
<ItemTemplate>
<table cellpadding="0" cellspacing="0" width="100%" onmouseover="this.style.background='#ececec'"
onmouseout="this.style.background='#ececec'" style="background-color: #ececec;"><tr><td>
<asp:LinkButton ID="lnk" runat="server" onclick="lnk_Click"><%# Eval("subtitle") %></asp:LinkButton>
</td></tr></table>
</ItemTemplate>
</asp:DataList>
</ul>
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
this is a script of switchmenu
On page 1st load it is working good but on doing linkbutton clicking which is inside,
than after script does not get work again.
If I understood your problem, this should solve it:
Javascript
$(function () {
$(".box .h_title").not(this).next("ul").hide("normal");
$(".box .h_title").not(this).next("#home").show("normal");
});
function lbClicked(obj) {
$(obj).next("ul").slideToggle();
}
ASP.NET
<asp:LinkButton ID="lnk" runat="server" onclick="lnk_Click" onclientclick="lbClicked(this)"><%# Eval("subtitle") %></asp:LinkButton>
C#
protected void Page_Load(object sender, EventArgs e)
{
// You don't need the line below, which is wrong anyway
//ScriptManager.RegisterStartupScript(this, this.GetType(), "javascript", "function();", true);
}
protected void lnk_Click(object sender, EventArgs e)
{
// You don't need the line below, which is wrong anyway
//ScriptManager.RegisterStartupScript(this, this.GetType(), "javascript", "function();", true);
}
I know this question is asked before, and I looked it up, and found this sulotion:
Page.ClientScript.RegisterStartupScript(this.GetType(), "click", "test();", true);
so I put that in my c# method, and the following javascript code in my head.
<script type ="text/javascript">
function test() {
alert("succes");
}
</script>
this is my html where i call the code behind method.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="ampwirecalc">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<asp:DropDownList ID="dropdownsize" OnSelectedIndexChanged="wirecalc" onchange="runscalc()" AutoPostBack="true" runat="server">
<asp:ListItem Text="Select Wire Size" value="-1"/>
<asp:ListItem Text="1/0 gauge" Value="0" />
<asp:ListItem Text="4 gauge" Value="1" />
<asp:ListItem Text="8 gauge" Value="2" />
</asp:DropDownList>
<script type="text/javascript">
function runscalc()
{
var totalRMS = document.getElementById('<%=tbx_anw3.ClientID%>').value;
document.getElementById('<%=HiddenField1.ClientID%>').value = totalRMS;
}
</script>
<!--These are the texts giving information on the options-->
<div class="textwirecalc">
<p class="selectedwire">Selected Wire:</p>
<p class="neededruns">Needed Runs:</p>
<p class="selectedsize">Selected size:</p>
</div>
<!--These are the labels that wil show the calculated info-->
<div class="labelwirecalc">
<asp:Label ID="wiretype" runat="server" Text="Wire type will show here"></asp:Label>
<asp:Label ID="wireruns" runat="server" Text="Needed runs will show here"></asp:Label>
<asp:Label ID="wiresize" runat="server" Text="Wire size will show here"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
does anyone know what I'm doing wrong, and what I should do instead.
thanks in advance.
Try this
Page.ClientScript.RegisterStartupScript(this.GetType(), "click", "test();", false);
Reference
last parameter true/false indicate- whether to add script tags.
you can give the javascript like below, no need to write javascript function
Page.ClientScript.RegisterStartupScript(this.GetType(), "click","alert('succes');", true);
UPDATE
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(),
"click", "alert('succes');", true);
The third parameter must be enclosed with script tags as the
http://msdn.microsoft.com/en-us/library/asz8zsxy.aspx says.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!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></title>
<script type="text/javascript">
function test() {
alert("succes");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="ampwirecalc">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<asp:DropDownList ID="dropdownsize" onchange="runscalc()" AutoPostBack="true" runat="server" OnSelectedIndexChanged="dropdownsize_SelectedIndexChanged">
<asp:ListItem Text="Select Wire Size" Value="-1" />
<asp:ListItem Text="1/0 gauge" Value="0" />
<asp:ListItem Text="4 gauge" Value="1" />
<asp:ListItem Text="8 gauge" Value="2" />
</asp:DropDownList>
<script type="text/javascript">
</script>
<!--These are the texts giving information on the options-->
<div class="textwirecalc">
<p class="selectedwire">
Selected Wire:</p>
<p class="neededruns">
Needed Runs:</p>
<p class="selectedsize">
Selected size:</p>
</div>
<!--These are the labels that wil show the calculated info-->
<div class="labelwirecalc">
<asp:Label ID="wiretype" runat="server" Text="Wire type will show here"></asp:Label>
<asp:Label ID="wireruns" runat="server" Text="Needed runs will show here"></asp:Label>
<asp:Label ID="wiresize" runat="server" Text="Wire size will show here"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
And code behind,
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication2
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Page.ClientScript.RegisterStartupScript(this.GetType(), "click", "test();", true);
}
protected void dropdownsize_SelectedIndexChanged(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(),
"click", "test();", true);
}
}
}
Try this code.
In my project i have to print a form, like name, age etc. Its all printed in print paper, i just have to place name , age according to paper. currently i am using a asp.net page to serve my purpose.where i have put labels with position = absolute. when i click on print i am calling that page , in onload event i am putting label values based on previous page content.
it is simple. so is there any better way to print in dotmatrix printer or not? please suggest.
Now prnting works fine, but problem is when i click on print button i am opening that page like popup window and invoke print there. but i want that pop up window to closed after i click print or cancel button. please help me.
my code is like this:
This BtnPrint is in my main page. Main page contains inputs like name, age and etc.
In PrtPage i have placed labels according to space given for printing.So i am loding main page values in onload event of PrtPage.aspx.
protected void BtnPrint_Click(object sender, EventArgs e)
{
Response.Write("<script>");
Response.Write("window.open('PrtPage.aspx','_blank')");
Response.Write("</script>");
}
in page load of PrtPage:
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("<script>");
Response.Write("window.print()");
//Response.Write("window.close()");
Response.Write("<script>");
}
but whenever i click on print button it asks ' u want to close window?', so please help me in this. i want to close after i click on print or cancel in print setup window.
or suggest me if there is any good method for printing in dotmatrix..
Thanks in advance.
Sam.
What about using a single page instead of opening a pop window. In the below blog post you can see a example usage. Two div tags with printable and non printable content and the div tag with the printable content is hidden. Then you can use Jquery to print content inside a DIV.
http://itzonesl.blogspot.com/2013/02/how-to-print-content-inside-div-tag.html
Update:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server" >
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="jquery.printElement.js" type="text/javascript"></script>
<script type="text/javascript">
function printpage() {
$("#lblName").html($("#TextBox1").val());
$("#lblSchool").html($("#TextBox2").val());
$("#printable").printElement();
}
</script>
<style type="text/css">
#printable { display: none; }
#media print
{
#nonprintable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="nonprintable">
<table class="style1">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>:
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="School"></asp:Label>:
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div id="printable">
<table class="style1">
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Name"></asp:Label>:
</td>
<td>
<asp:Label ID="lblName" runat="server" ></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" Text="School"></asp:Label>:
</td>
<td>
<asp:Label ID="lblSchool" runat="server" ></asp:Label>
</td>
</tr>
</table>
</div>
<asp:Button ID="Button1" runat="server" Text="Print"
OnClientClick="printpage();" />
</form>
</body>
</html>
With MasterPage:
MasterPage.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
ContentPage.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="jquery.printElement.js" type="text/javascript"></script>
<script type="text/javascript">
function printpage() {
$("#MainContent_lblName").html($("#MainContent_TextBox1").val());
$("#MainContent_lblSchool").html($("#MainContent_TextBox2").val());
$("#printable").printElement();
}
</script>
<style type="text/css">
#printable { display: none; }
#media print
{
#nonprintable { display: none; }
#printable { display: block; }
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<div id="nonprintable">
<table class="style1">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>:
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="School"></asp:Label>:
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div id="printable">
<table class="style1">
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Name"></asp:Label>:
</td>
<td>
<asp:Label ID="lblName" runat="server" ></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" Text="School"></asp:Label>:
</td>
<td>
<asp:Label ID="lblSchool" runat="server" ></asp:Label>
</td>
</tr>
</table>
</div>
<asp:Button ID="Button1" runat="server" Text="Print"
OnClientClick="printpage();" />
</asp:Content>
The reason you're getting those is that asp.net's scope is limited to the browser window. If the browser is set to ask the user whether they want to close the page when you try to auto-close it (which most appear to be) there's no way of blocking it from the browser.
Same thing with the print, you can't automatically print, because the browser won't let you.
i use from ajax tabcontainer .and i want to when value of hiddenfield is not 1(value of hiddenfield change when i click in gridview,i dont have problem with set value for hiddenfield) and user click in email tab it alerts and stays in first tab.but in my code it alert and changes tab.i want to stay in cuurent tab.
i write this code but it dosent work.
please help me.
<%# Page Language="C#" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
<script type="text/javascript">
function SetActiveTab() {
var hfd = $get('<%=HiddenField1.ClientID%>');
if (hfd.value != "1") {
alert("hitttttttt");
var ctrl = $find('TabContainer1');
ctrl.set_activeTab(ctrl.get_tabs()[0]);
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ajax Control - Tabs </title>
</head>
<body>
<form id="form1" runat="server">
<b>Tabs Demonstration</b> <br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:HiddenField ID="HiddenField1" runat="server" />
<br />
<asp:TabContainer runat="server" ID="TabContainer1" Height="138px" ActiveTabIndex="0"
Width="402px">
<asp:TabPanel runat="server" ID="Panel1" HeaderText="Address" >
<ContentTemplate>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<table>
<tr><td>First Name:</td><td><asp:TextBox ID="txtName" runat="server" /></td></tr>
<tr><td>Address:</td><td><asp:TextBox ID="txtAddress" runat="server" /></td></tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" ID="Panel3" HeaderText="Email" OnClientClick="SetActiveTab" >
<ContentTemplate>
Email: <asp:TextBox ID="txtEmail" runat="server" />
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" ID="Panel2" HeaderText="Login Details" >
<ContentTemplate>
<table>
<tr> <td>User Name:</td><td><asp:TextBox ID="txtUser" runat="server" /></td></tr>
<tr> <td>Password:</td><td><asp:TextBox ID="txtPass" runat="server" /></td></tr>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</form>
The one solution I found is to remove OnClientClick handler and use the javascript below:
function pageLoad() {
var tabContainer = $find('<%= TabContainer1.ClientID %>');
var hfd = $get('<%= HiddenField1.ClientID %>');
var oldSetActiveTab = Function.createDelegate(tabContainer, tabContainer.set_activeTab);
tabContainer.set_activeTab = function (value) {
if (value.get_id() == '<%= Panel3.ClientID %>' && hfd.value != "-1") {
alert("oops");
}
else {
oldSetActiveTab(value);
}
};
}