I use a timer and updatepanel to show clock in my page (Just an example).
Using this codes in my aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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 id="Head1" runat="server">
<title></title>
<script type="text/javascript">
</script>
<script runat="server">
protected void btnClick(object sender, EventArgs e)
{
for (int i = 0; i < 100000000; i++)
{
txt.Text = "Denis Storti";
}
}
protected void TimerTick(object sender, EventArgs e)
{
DropDownList1.Focus();
ScriptManager1.SetFocus(DropDownList1);
for (int i = 0; i < 100000000; i++)
{
txt.Text = "Timer Tick";
//upnBusca.Update();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
function Cancel() {
Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
}
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'Timer1') {
$get('UpdateProgress1').style.display = "block";
}
}
function EndRequest(sender, args) {
if (postBackElement.id == 'Timer1') {
$get('UpdateProgress1').style.display = "none";
}
}
</script>
<div style="padding-left: 20%; padding-top: 10%">
<p>
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="TimerTick">
</asp:Timer>
<asp:UpdatePanel ID="upnBusca" UpdateMode="Conditional" ChildrenAsTriggers="false"
runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnBusca" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txt" runat="server">
</asp:TextBox>
<asp:Button ID="btnBusca" runat="server" OnClick="btnClick" Text="Busca Nome" />
<%=DateTime.Now.ToString() %>
<asp:UpdatePanel ID="upnDate" UpdateMode="Conditional" ChildrenAsTriggers="false"
runat="server">
<ContentTemplate>
<%=DateTime.Now.ToString() %>
<br />
<asp:DropDownList ID="DropDownList1" runat="server"
Width="110px">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
<asp:AsyncPostBackTrigger ControlID="DropDownList1" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress DisplayAfter="0" ID="UpdateProgress1" runat="server" DynamicLayout="False">
<ProgressTemplate>
<span style="font-size: large">Processing...</span>
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="Cancel(); return false;"
Text="Cancel" />
</ProgressTemplate>
</asp:UpdateProgress>
</p>
</div>
</form>
</body>
</html>
I choose a dropdownlist this ajax code cause the dropdownlist unfocused and close.
how can I maintain focus on this dropdownlist.
any help would be appreciated. Thanks
Related
I have simple code that is a dropdown list and Two buttons (named enable and disable)i want to enable and disable the dropdown list by javascript function and after button click
asp.net HTML code:
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<br />
<asp:DropDownList ID="DropDownList2" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" OnClientClick="return enable();" Text="enable" />
<asp:Button ID="Button2" runat="server" OnClientClick="return disable2();" Text="disable" />
javascript function :
function enable() {
document.getElementById("DropDownList1").disabled = false;
document.getElementById("DropDownList2").disabled = false;
return;
}
function disable() {
document.getElementById("DropDownList1").disabled = true;
document.getElementById("DropDownList2").disabled = true;
}
and pageloadlogic:public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
but i tried this many times and not getting the expected output please let me known the solution
<!DOCTYPE html>
<html>
<head>
<script>
function disable() {
document.getElementById("mySelect").disabled=true;
}
function enable() {
document.getElementById("mySelect").disabled=false;
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<br><br>
<input type="button" onclick="disable()" value="Disable list">
<input type="button" onclick="enable()" value="Enable list">
</form>
</body>
</html>
you use this code.
Try the below, add return keyword before function call and return false in function to prevent the server postback Which made the dropdown enabled
<head runat="server">
<title></title>
<script type="text/javascript">
function enable() {
document.getElementById("DropDownList1").disabled = false;
document.getElementById("DropDownList2").disabled = false;
return false;
}
function disable() {
document.getElementById("DropDownList1").disabled = true;
document.getElementById("DropDownList2").disabled = true;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<br />
<asp:DropDownList ID="DropDownList2" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" OnClientClick="return enable();" Text="enable" />
<asp:Button ID="Button2" runat="server" OnClientClick="return disable();" Text="disable" />
</div>
</form>
</body>
</html>
The obvious solution is ClientIDMode="Static" and return false; in javascript
<div>
<asp:DropDownList ID="DropDownList1" runat="server" ClientIDMode="Static">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<br />
<asp:DropDownList ID="DropDownList2" runat="server" ClientIDMode="Static">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" OnClientClick="return enable();" Text="enable" />
<asp:Button ID="Button2" runat="server" OnClientClick="return disable();" Text="disable" />
</div>
<script>
function enable() {
document.getElementById("DropDownList1").disabled = false;
document.getElementById("DropDownList2").disabled = false;
return false;
}
function disable() {
document.getElementById("DropDownList1").disabled = true;
document.getElementById("DropDownList2").disabled = true;
return false;
}
</script>
I have a aspx is like shown below
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:UpdatePanel runat="server" ID="panel">
<ContentTemplate>
<asp:Button runat="server" id="bt" text="partial postback" OnClick="E" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" text="full postback" OnClick="J" />
<asp:UpdateProgress runat="server" ID="progress" DynamicLayout="true" AssociatedUpdatePanelID="panel">
<ProgressTemplate>
<div class="divWaiting">
<asp:Label ID="lbl" runat="server" Text="OK" />
<asp:Image ID="imgWait" runat="server" ImageAlign="Middle" ImageUrl="images/indicator.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
On Code Behind I have a function to update my label after making the thread sleep for 3 seconds
public void E(Object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label lbl = (Label)progress.FindControl("lbl");
if (lbl.ToString()!= null)
{
lbl.Text = "SomeThing";
}
update = true;
}
I have this code:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="TickEvent"></asp:Timer>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<img src="http://jimpunk.net/Loading/wp-content/uploads/loading18.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Codebehind code:
protected void TickEvent(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
But when I run the page, the time doesn't update and the progresspanel doesn't show. Can any one help?
I solved it by recopying all the scripts files to Scripts folder
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
var elem = args.get_postBackElement();
ActivateAlertDiv('visible', 'AlertDiv', elem.value + ' processing...');
}
function EndRequestHandler(sender, args) {
ActivateAlertDiv('hidden', 'AlertDiv', '');
}
function ActivateAlertDiv(visstring, elem, msg) {
var adiv = $get(elem);
adiv.style.visibility = visstring;
adiv.innerHTML = msg;
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
Last update:
<%= DateTime.Now.ToString()%>.
<br />
<asp:CheckBox runat="server" Text="Checkbox1" />
<asp:Button runat="server" ID="Button1" Text="Process 1" OnClick="ProcessClick_Handler" />
<asp:Button runat="server" ID="Button2" Text="Process 2" OnClick="ProcessClick_Handler" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<div id="AlertDiv" class="AlertStyle">
</div>
</div>
</form>
Button1 and Button2 fired the beginRequest event but Checkbox1 didn't.
You need to set the AutoPostback to true in the checkbox:
<asp:CheckBox ID="CheckBox1" runat="server" Text="Checkbox1" AutoPostBack="true"/>
You must to to set AutoPostBack property of CheckBox to True
Add AutoPostBack="true" and add event oncheckedchanged="Checkbox1_CheckedChanged1"
<asp:CheckBox runat="server" Text="Checkbox1" AutoPostBack="true"
oncheckedchanged="Checkbox1_CheckedChanged1"/>
Here I try to update the Label value base on click event of Linkbutton which is inside the repeater control. Scenario is When I click on Linkbutton same time Modal popup open and the Label text also change.
Below is my code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopupUpdatePanel.aspx.cs"
Inherits="ModalPopupUpdatePanel" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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>ModalPopups and UpdatePanels</title>
<link rel="stylesheet" href="StyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="scriptMgr1">
</asp:ScriptManager>
<div style="width: 300px; left: 100px">
<div >
<asp:Label ID="Label2" runat="server">Update Panel that contains a ModalPopup and its associated PopupPanel inside it</asp:Label>
<asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<br />
<asp:Repeater runat="server" ID="btnresr" DataSourceID="SqlDataSource1">
<ItemTemplate>
<asp:LinkButton runat="server" ID="text" OnClick="Button5_Click" Text=' <%# DataBinder.Eval(Container.DataItem, "AgentName")%>' BackColor="Red"></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
<asp:Button runat="server" ID="button2" Text="Launch Modal Popup2" style="display:none"/>
<ajaxToolkit:ModalPopupExtender runat="server" ID="modalPopupExtender2" TargetControlID="button2"
PopupControlID="modalPanel2" OkControlID="okBtn2" CancelControlID="cancelBtn2"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:PTBWConnectionString %>"
SelectCommand="SELECT [AgentName], [AgentID] FROM [AgentMaster]">
</asp:SqlDataSource>
<asp:Panel runat="server" ID="modalPanel2" BackColor="AliceBlue" Style="display: none">
<asp:UpdatePanel runat="server" ID="updatePanel4" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Label runat="server" ID="label5" ></asp:Label>
<asp:Button runat="server" ID="postbackBtn" Text="Click to Cause postback" OnClick="postbackBtn_Click" /><br />
<asp:Button runat="server" ID="cancelBtn2" Text="OK" />
<asp:LinkButton runat="server" ID="okBtn2" Text="Cancel" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
and Code behind
using System;
using System.Web.UI.WebControls;
public partial class ModalPopupUpdatePanel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void updateLabel_Click(object sender, EventArgs e)
{
}
protected void postbackBtn_Click(object sender, EventArgs e)
{
label5.Text = "After Postback";
}
protected void Button5_Click(object sender, EventArgs e)
{
LinkButton l = (LinkButton)sender;
label5.Text = "This is before postback,saroop";
modalPopupExtender2.Show();
}
}
I am block here please help me..Is there any Jquery way then also please here me
That is because the lable5 is not avaiable like that, it is nested inside the RepeaterItem.
Can you try this.
LinkButton l = (LinkButton)sender;
RepeaterItem rpt = (RepeaterItem)l.Parent();
Label label5 = (Label)rpt.FindControl("label5");
label5.Text = "This is before postback,saroop";
modalPopupExtender2.Show();