My application is in asp.net 3.5 in which i am selecting date from date picker which is inside update panel. after selecting date and clicking on submit button page is post back. after post back when i try to select date once again i can`t see date picker there.
//Code on aspx page
<%# Page Title="" Language="C#" MasterPageFile="~/Sample/MasterPage.master" AutoEventWireup="true" CodeFile="UpdateProblem.aspx.cs" Inherits="Sample_UpdateProblem" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="jscolor/jscolor.js"></script> // Script for date
<asp:ScriptManager ID="ScriptManager1" runat="server" >
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="panel1" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="textbox" CssClass="color" />
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
Thanks in advance
In your UpdatePanel add css class on your test box
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" CssClass="classTarget"></asp:TextBox>
.....
</ContentTemplate>
</asp:UpdatePanel>
In your script add this code
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
$('.classTarget).datepicker({ dateFormat: 'dd-mm-yy' });
}
});
</script>
$(function () {
bindDatePickers(); // bind date picker on first page load
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDatePickers); // bind date picker on every UpdatePanel refresh
});
function bindDatePickers() {
$('#<%= txtInvoiceDateFrom.ClientID%>').datepicker({
uiLibrary: 'bootstrap4'
});
$('#<%= txtInvoiceDateTo.ClientID%>').datepicker({
uiLibrary: 'bootstrap4'
});
}
Related
I Have a aspx page contain update panel . and load that page by using jquery ajax inside div in master page .However, the content off update panel just update for first time and other time not update.
My Master Page:
<head id="Head1" runat="server">
<script src="Script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Script/site.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<div class="main">
<asp:ContentPlaceHolder ID="contentMain" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
My ASPX Page
<head runat="server">
</head>
<body>
<form id="form2" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<div style="text-align:center; margin:50px">
<asp:Button ID="btnUpdate" runat="server" Text="update" Width="50px"
onclick="btnUpdate_Click"/>
<br />
<asp:Label ID="lblTime" runat="server"></asp:Label>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnReg" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
My ASPX Page Code Behind
protected void btnUpdate_Click(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToString();
}
My JavaScript
$(document).ready(function () {
$(window).load(function () {
loadContent();
});
});
function loadContent() {
$.ajax({
type: 'get',
url: 'Page.aspx',
contentType: 'application/html; charset=utf-8',
dataType: 'html',
beforeSend: sendContent,
success: successContent,
error: errorContent
});
}
function sendContent() {
////loading
}
function successContent(data, status) {
$("#content .main").html(data);
$("#content").show();
}
function errorContent(request, status, error) {
////error
}
thanks a lot
In the code you provided you never call function loadContent. I added the loadContent to jQuery ready() and it work on my computer.
If you have two forms on your page you have two "StateView" variables. When asp.net checks for the variable it throws error probably because the state variable comes the second time from the form of Site.Manager and not from Page.aspx. I just deleted the form on Master Page and now the button works perfectly.
My Master Page:
<%# Master Language="C#" CodeBehind="Site.master.cs" Inherits="WebApplication4.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head id="Head1">
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scripts/site.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<div class="main">
</div>
</div>
</body>
</html>
My Page.aspx
<%# Page Language="C#" CodeBehind="Page.aspx.cs" Inherits="WebApplication4.Page" %>
<form id="form2" enableviewstate="false" runat="server">
<asp:ScriptManager ID="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnUpdate" Text="update" Width="50px"
onclick="btnUpdate_Click" runat="server"/>
<asp:Label ID="lblTime" runat="server"></asp:Label>
//////////// Some Tags ///////////
</ContentTemplate>
</asp:UpdatePanel>
</form>
My ASPX Page Code Behind
protected void btnUpdate_Click(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToString();
}
site.js
function loadContent() {
$.ajax({
type: 'get',
url: 'Page.aspx',
contentType: 'application/html; charset=utf-8',
dataType: 'html',
beforeSend: sendContent,
success: successContent,
error: errorContent
});
}
function sendContent() {
////loading
}
function successContent(data, status) {
$("#content .main").html(data);
$("#content").show();
}
function errorContent(request, status, error) {
////error
}
$(function () {
loadContent();
});
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.
I have one site master page and one content page. Whenever I click button in content page it is not triggering click event method to execute.
SiteMaster Code:
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!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">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body background="../../Content/city-balcony#2x.jpg">
<form id="form1" runat="server">
<div class="page">
<div id="header">
<div id="title">
<h1>Welcome to E-Meeting</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<%
if (Request.IsAuthenticated)
{
%>
<li><%: Html.ActionLink("Chat", "ViewPage1")%></li>
<% }
%>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<%="Last communicated at : " + DateTime.Now.ToLongTimeString()%>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
<br />
<br />
</div>
</form>
</body>
</html>
Content Page:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Modified by click event";
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
ChT
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>ChT</h2>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="On Load"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Whenever I click button I want label text to be "Modified by click event" but it remains same "On Load". Can someone please help
Try adding a trigger in your update panel as shown:
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
And Check ScriptManager's EnablePartialRendering and remove it if it presented or set it to true
you can add a method using C# to trigger the event.
double-click button to create a button click event.
add a code to change the label text to "Modified by click event"
for example,
protected void Button1_Click(object sender, EventArgs e)｛
Label1.text = "Modified by click event";
｝
by the way, you could get rid of Text="On Load" in your aspx code. (your code would be: <asp:Label ID="Label1" runat="server"></asp:Label>, then add a page_load method in your .cs file:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
Label1.text = "On load";
}
in this case, it will display "on load" when you open the webpage, and it will display "Modified by click event" when you clicked button.
hope it
I've got MasterPage and Content Page. On the ContentPage there is some label and i want to change it's text when clicked on button on the content page without refreshing the page.
Default.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" %>
<script runat="server">
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
Label SensorTemperatureLabel = (Label)this.Master.FindControl("SensorTemperatureLabel");
if (SensorTemperatureLabel != null)
{
SensorTemperatureLabel.Text = "TEST";
}
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:ImageButton ID="ImageButton1" runat="server" OnClick="ImageButton1_Click" />
</asp:Content>
MasterPage.master
Part of the code with label
<div class="sidebar">
<!-- insert your sidebar items here -->
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="SensorTemperatureLabel" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
I have prepared you complete solution to show you how you can do this.
First sample master. Take notice I have added ScriptManager to page and target label is inside content template:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebTester.Site1" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="SensorTemperatureLabel" runat="server" Text="TEMP"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Now here is content page, button is also placed inside content template:
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebTester.WebForm1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Test" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
And finally here is the code, I get refrence to label by using FindControl:
protected void Button1_Click(object sender, EventArgs e)
{
Site1 site = this.Master as Site1;
if (site != null)
{
Label SensorTemperatureLabel = site.FindControl("SensorTemperatureLabel") as Label;
SensorTemperatureLabel.Text = DateTime.Now.ToString();
}
}
This code will update label on master page without complete page postback.
If the label is not in <ContentTemplate />, you can access with javascript
var SensorTemperatureLabel = document.getElementById("<%=SensorTemperatureLabel%>");
SensorTemperatureLabel.innerHTML = "newValue";
Otherwise, the ID is generated and you'll need
var SensorTemperatureLabel = document.getElementById("<%= this.Master.FindControl("SensorTemperatureLabel").ClientID %>");
I hope my answer help in this case
if you have Label in master page named " Label1" then
you can change value there like this
VB
Dim lb as label= me.master.findcontrol("Label1"):lb.text="Hello worold"
Peace upon you all.
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);
}
};
}