I am working with the Ajax update panel. I am attempting to change the contents programmtically in updatepanel0. The clear operation works but the add does not. When I do the same operations on updatepanel1 it works fine. Any ideas why? I should note
that I am trying to change the class assigned to each button when one is clicked. Below are the default.aspx, code behind along with the css file contents.
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
Please log in to start the interactive loss determination.
</li>
<li class="two">
<h5>Learn More</h5>
Select the "About" link above to learn more about the interactive loss determination.
</li>
<li class="three">
<h5>Questions</h5>
Selet the "Contact" link above to submit questions.
</li>
</ol>
literal1.Text = "<section class=\"content-wrapper3\"><hgroup class=\"title\"><h2>We suggest the following:</h2></hgroup><ol class=\"round\"><li class=\"one\"><h5>Getting Started</h5>Please log in to start the interactive loss determination.</li><li class=\"two\"><h5>Learn
More</h5>Select the \"About\" link above to learn more about the interactive loss determination.</li><li class=\"three\"><h5>Questions</h5>Selet the \"Contact\" link above to submit questions.</li></ol></section>";
literal1.Text = "<section class=\"content-wrapper3\"><hgroup class=\"title\"><h2>Describe the interactive loss deterination here.</h2></hgroup><article><p>Use this area to provide additional information.</p><p>Use this area to provide additional information.</p><p>Use
this area to provide additional information.</p></article></section>";
/*#################################################################################################*/
/* Home, About and Contact Button - Change Cursor on Hover */
/*#################################################################################################*/
/* Home, About and Contact Button - Remove Dotted Line Around Button */
What you are doing seems overly complicated. I would not recommend using code behind for such a simple opperation. Use javascript. Create a three functions then assign the OnClientClick event for those buttons. In each function set the css attribute of the
button that was clicked and reset the css for the buttons that where not clicked. Like this:
function homeButtonClicked()
{
document.getElementById("<%=HomeButton.ClientID%>").setAttribute("css","HomeButtonSelected");
document.getElementById("<%=AboutButton.ClientID%>").setAttribute("css","AboutButton");
document.getElementById("<%=ContactButton.ClientID%>").setAttribute("css","ContactButton");
}
function aboutButtonClicked()
{
document.getElementById("<%=HomeButton.ClientID%>").setAttribute("css","HomeButton");
document.getElementById("<%=AboutButton.ClientID%>").setAttribute("css","AboutButtonSelected");
document.getElementById("<%=ContactButton.ClientID%>").setAttribute("css","ContactButton");
}
function contactButtonClicked()
{
document.getElementById("<%=HomeButton.ClientID%>").setAttribute("css","HomeButton");
document.getElementById("<%=AboutButton.ClientID%>").setAttribute("css","AboutButton");
document.getElementById("<%=ContactButton.ClientID%>").setAttribute("css","ContactButtonSelected");
}
chrisabc123
Member
1 Points
15 Posts
Ajax Update Panel - Change Contents Programmatically
Nov 23, 2012 11:36 PM|LINK
Hello,
I am working with the Ajax update panel. I am attempting to change the contents programmtically in updatepanel0. The clear operation works but the add does not. When I do the same operations on updatepanel1 it works fine. Any ideas why? I should note that I am trying to change the class assigned to each button when one is clicked. Below are the default.aspx, code behind along with the css file contents.
Thanks
Chris
<%@ Page Language="C#" CodeFile="~/Default.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8" />
<title runat="server" id="MainTitle">Home - Interactive Loss Determination</title>
<link href="~/Content/Site2.css" rel="stylesheet" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<script src="<%: ResolveUrl("~/Scripts/modernizr-2.5.3.js") %>"></script>
</asp:PlaceHolder>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<%-- <asp:ContentPlaceHolder runat="server" ID="HeadContent" />--%>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<header>
<div class="content-wrapper1">
<div class="float-left">
<p class="site-title"><a id="A1" runat="server" href="http://www.continentalmachinery.com"><img runat="server" ID="cmcimage" src="Images/logo2.png" /></a></p>
</div>
<div class="float-right">
<asp:UpdatePanel ID="UpdatePanel0" runat="server" >
<ContentTemplate>
<section id="login">
<ul>
<li><a id="loginLink" runat="server" href="~/Account/Login.aspx">Log in</a></li>
</ul>
</section>
<nav>
<ul id="menu">
<li><asp:Button runat="server" ID="HomeButton" cssclass="HomeButtonSelected" OnClick="HomeButton_Click" Text="Home" /></li>
<li><asp:Button runat="server" ID="AboutButton" cssclass="AboutButton" OnClick="AboutButton_Click" Text="About" /></li>
<li><asp:Button runat="server" ID="ContactButton" cssclass="ContactButton" OnClick="ContactButton_Click" Text="Contact" /></li>
</ul>
</nav>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</header>
<div id="body">
<section class="featured">
<div class="content-wrapper2">
<hgroup class="title">
<h1>Interactive Loss Determination</h1>
</hgroup>
</div>
</section>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate >
<%-- <section class="content-wrapper main-content clear-fix">--%>
<section class="content-wrapper3">
<hgroup class="title">
<h2>We suggest the following:</h2>
</hgroup>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
Please log in to start the interactive loss determination.
</li>
<li class="two">
<h5>Learn More</h5>
Select the "About" link above to learn more about the interactive loss determination.
</li>
<li class="three">
<h5>Questions</h5>
Selet the "Contact" link above to submit questions.
</li>
</ol>
</section>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="HomeButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="AboutButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ContactButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
<footer>
<div class="content-wrapper4">
<div>
<%-- <div class="float-left">--%>
<p>
© <%: DateTime.Now.Year %> - CMC Interactive Loss Determination
</p>
</div>
</div>
</footer>
</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 Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void HomeButton_Click(object sender, EventArgs e)
{
MainTitle.Text = "Home - Interactive Loss Determination";
Literal literal0 = new Literal();
literal0.Mode = LiteralMode.PassThrough;
literal0.ID = "lit0";
literal0.Text = "<section id=\"login\"><ul><li><a id=\"loginLink\" runat=\"server\" href=\"~/Account/Login.aspx\">Log in</a></li></ul></section><nav><ul id=\"menu\"><li><asp:Button runat=\"server\" ID=\"HomeButton\" cssclass=\"HomeButtonSelected\" OnClick=\"HomeButton_Click\" Text=\"Home\" /></li><li><asp:Button runat=\"server\" ID=\"AboutButton\" cssclass=\"AboutButton\" OnClick=\"AboutButton_Click\" Text=\"About\" /></li><li><asp:Button runat=\"server\" ID=\"ContactButton\" cssclass=\"ContactButton\" OnClick=\"ContactButton_Click\" Text=\"Contact\" /></li></ul></nav>";
UpdatePanel0.ContentTemplateContainer.Controls.Clear();
UpdatePanel0.ContentTemplateContainer.Controls.Add(literal0);
Literal literal1 = new Literal();
literal1.Mode = LiteralMode.PassThrough;
literal1.ID = "lit1";
literal1.Text = "<section class=\"content-wrapper3\"><hgroup class=\"title\"><h2>We suggest the following:</h2></hgroup><ol class=\"round\"><li class=\"one\"><h5>Getting Started</h5>Please log in to start the interactive loss determination.</li><li class=\"two\"><h5>Learn More</h5>Select the \"About\" link above to learn more about the interactive loss determination.</li><li class=\"three\"><h5>Questions</h5>Selet the \"Contact\" link above to submit questions.</li></ol></section>";
UpdatePanel1.ContentTemplateContainer.Controls.Clear();
UpdatePanel1.ContentTemplateContainer.Controls.Add(literal1);
}
protected void AboutButton_Click(object sender, EventArgs e)
{
MainTitle.Text = "About - Interactive Loss Determination";
Literal literal0 = new Literal();
literal0.Mode = LiteralMode.PassThrough;
literal0.ID = "lit0";
literal0.Text = "<section id=\"login\"><ul><li><a id=\"loginLink\" runat=\"server\" href=\"~/Account/Login.aspx\">Log in</a></li></ul></section><nav><ul id=\"menu\"><li><asp:Button runat=\"server\" ID=\"HomeButton\" cssclass=\"HomeButton\" OnClick=\"HomeButton_Click\" Text=\"Home\" /></li><li><asp:Button runat=\"server\" ID=\"AboutButton\" cssclass=\"AboutButtonSelected\" OnClick=\"AboutButton_Click\" Text=\"About\" /></li><li><asp:Button runat=\"server\" ID=\"ContactButton\" cssclass=\"ContactButton\" OnClick=\"ContactButton_Click\" Text=\"Contact\" /></li></ul></nav>";
UpdatePanel0.ContentTemplateContainer.Controls.Clear();
UpdatePanel0.ContentTemplateContainer.Controls.Add(literal0);
Literal literal1 = new Literal();
literal1.Mode = LiteralMode.PassThrough;
literal1.ID = "lit1";
literal1.Text = "<section class=\"content-wrapper3\"><hgroup class=\"title\"><h2>Describe the interactive loss deterination here.</h2></hgroup><article><p>Use this area to provide additional information.</p><p>Use this area to provide additional information.</p><p>Use this area to provide additional information.</p></article></section>";
UpdatePanel1.ContentTemplateContainer.Controls.Clear();
UpdatePanel1.ContentTemplateContainer.Controls.Add(literal1);
//AboutButton.BackColor = System.Drawing.Color.LightBlue;
}
protected void ContactButton_Click(object sender, EventArgs e)
{
MainTitle.Text = "Contact - Interactive Loss Determination";
Literal literal0 = new Literal();
literal0.Mode = LiteralMode.PassThrough;
literal0.ID = "lit0";
literal0.Text = "<section id=\"login\"><ul><li><a id=\"loginLink\" runat=\"server\" href=\"~/Account/Login.aspx\">Log in</a></li></ul></section><nav><ul id=\"menu\"><li><asp:Button runat=\"server\" ID=\"HomeButton\" cssclass=\"HomeButton\" OnClick=\"HomeButton_Click\" Text=\"Home\" /></li><li><asp:Button runat=\"server\" ID=\"AboutButton\" cssclass=\"AboutButton\" OnClick=\"AboutButton_Click\" Text=\"About\" /></li><li><asp:Button runat=\"server\" ID=\"ContactButton\" cssclass=\"ContactButtonSelected\" OnClick=\"ContactButton_Click\" Text=\"Contact\" /></li></ul></nav>";
UpdatePanel0.ContentTemplateContainer.Controls.Clear();
UpdatePanel0.ContentTemplateContainer.Controls.Add(literal0);
Literal literal1 = new Literal();
literal1.Mode = LiteralMode.PassThrough;
literal1.ID = "lit1";
literal1.Text = "<section class=\"content-wrapper3\"><hgroup class=\"title\"><h2>Continental Machinery</h2></hgroup><section class=\"contact\"><header><h3>Phone:</h3></header><p><span class=\"label\">Main:</span><span>303.898.7954</span></p><p><span class=\"label\">After Hours:</span><span>303.898.7954</span></p></section><section class=\"contact\"><header><h3>Email:</h3></header><p><span class=\"label\">Support:</span><span><a href=\"mailto:chax@continentalmachinery.com\">chax@continentalmachinery.com</a></span></p><p><span class=\"label\">Marketing:</span><span><a href=\"mailto:chax@continentalmachinery.com\">chax@continentalmachinery.com</a></span></p><p><span class=\"label\">General:</span><span><a href=\"mailto:chax@continentalmachinery.com\">chax@continentalmachinery.com</a></span></p></section><section class=\"contact\"><header><h3>Address:</h3></header><p>6200 W Floyd Ave<br />Denver, CO 80227</p></section></section>";
UpdatePanel1.ContentTemplateContainer.Controls.Clear();
UpdatePanel1.ContentTemplateContainer.Controls.Add(literal1);
}
}
body {
display: block;
}
#body {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
ul {
text-align: right;
}
li {
display: inline;
}
/*#################################################################################################*/
/* Home, About and Contact Button Styling */
.HomeButton {
border: none;
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight:400;
}
.HomeButtonSelected {
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight:600;
border-style: solid;
border-width: 2px;
}
.AboutButton {
border: none;
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight:400;
}
.AboutButtonSelected {
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight:600;
border-style: solid;
border-width: 2px;
}
.ContactButton {
border: none;
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight: 400;
}
.ContactButtonSelected {
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight:600;
border-style: solid;
border-width: 2px;
}
/*#################################################################################################*/
/* Home, About and Contact Button - Change Cursor on Hover */
#HomeButton:hover, #AboutButton, #ContactButton {
cursor: pointer;
}
/*#################################################################################################*/
/* Home, About and Contact Button - Remove Dotted Line Around Button */
#HomeButton:focus, #AboutButton:focus, #ContactButton:focus {
outline: none;
}
/*#################################################################################################*/
/* Content Wrappers */
.content-wrapper1 {
max-width: 960px;
margin: 0 auto;
}
.content-wrapper2 {
max-width: 960px;
margin: 0 auto;
background-color: #3366FF;
}
.content-wrapper3 {
margin: 0 auto;
background-color: #E5ECFF;
}
.content-wrapper4 {
max-width: 960px;
margin: 0 auto;
font-size: .8em;
}
/*#################################################################################################*/
/* Contact Page - Class Contact: Styling */
.contact {
max-width: 960px;
margin: 0 auto;
}
/*#################################################################################################*/
h1 {
color: #fff;
}
.title {
max-width: 960px;
margin: 0 auto;
}
article {
max-width: 960px;
margin: 0 auto;
}
.round {
max-width: 960px;
margin: 0 auto;
}
footer {
background-color: #A7BDE7;
}
everlearnin
Member
398 Points
82 Posts
Re: Ajax Update Panel - Change Contents Programmatically
Nov 24, 2012 05:06 AM|LINK
What you are doing seems overly complicated. I would not recommend using code behind for such a simple opperation. Use javascript. Create a three functions then assign the OnClientClick event for those buttons. In each function set the css attribute of the button that was clicked and reset the css for the buttons that where not clicked. Like this:
function homeButtonClicked() { document.getElementById("<%=HomeButton.ClientID%>").setAttribute("css","HomeButtonSelected"); document.getElementById("<%=AboutButton.ClientID%>").setAttribute("css","AboutButton"); document.getElementById("<%=ContactButton.ClientID%>").setAttribute("css","ContactButton"); } function aboutButtonClicked() { document.getElementById("<%=HomeButton.ClientID%>").setAttribute("css","HomeButton"); document.getElementById("<%=AboutButton.ClientID%>").setAttribute("css","AboutButtonSelected"); document.getElementById("<%=ContactButton.ClientID%>").setAttribute("css","ContactButton"); } function contactButtonClicked() { document.getElementById("<%=HomeButton.ClientID%>").setAttribute("css","HomeButton"); document.getElementById("<%=AboutButton.ClientID%>").setAttribute("css","AboutButton"); document.getElementById("<%=ContactButton.ClientID%>").setAttribute("css","ContactButtonSelected"); }chrisabc123
Member
1 Points
15 Posts
Re: Ajax Update Panel - Change Contents Programmatically
Nov 24, 2012 02:35 PM|LINK
Thanks for the respose. Can I do the equivalent in the code behind with C#?
Chris
everlearnin
Member
398 Points
82 Posts
Re: Ajax Update Panel - Change Contents Programmatically
Nov 24, 2012 03:54 PM|LINK
Yes there is. In fact there are two different ways. Firstly, you can assign the CssClass property (this is probable the more eficient way to do it)
Or you can assign the attribute class
chrisabc123
Member
1 Points
15 Posts
Re: Ajax Update Panel - Change Contents Programmatically
Nov 24, 2012 04:03 PM|LINK
Thanks
Works perfectly.
Chris