I'm building a website with text box containing log messages. the log is getting updated using AJAX.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"
onload="textbox_load"
Height="110px"
TextMode="MultiLine"
Width="100%">
</asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
I need to scroll the text box down every time it gets updated. How?
Handle the Sys.WebForms.PageRequestManager.endRequest event and scroll the textbox down:
var tbox = $get('<%= TextBox1.ClientID %>');
tbox.tbox.scrollTop = tbox.scrollHeight;
Why dont you try this simple example:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Page.ClientScript.RegisterStartupScript(this.GetType(),
"ScrollTextbox",
"<script type=\"text/javascript\">document.getElementById('" +
this.TextBox1.ClientID +
"').scrollTop = document.getElementById('" +
this.TextBox1.ClientID +
"').scrollHeight; " +
" </script>");
}
}
Just change TextBox1 parameter with your text box name. You can see that the content in the text box is scrolled to bottom.
You can call this java script after AJAX is refreshing the content of your text box.
Try some plain javascript. Here's a sample I think you can modify to work in your scenario:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function scrollDown()
{
document.getElementById('<%=TextBox1.ClientID%>').scrollTop = document.getElementById('<%=TextBox1.ClientID%>').scrollHeight;
};
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>
You just have to figure out how to call the scrollDown method...
Related
I use ASP.NET to develop.
Here, I want the thing is that once I click button A (the text on the button A is "Start"), then the text on the button A will change to "processing...please wait" and button A will become not clickable. Then execute the stored procedure(the duration of stored procedure is 1 minute). After the stored procedure finishes, the text on the button A will change to "Start" and button A will become clickable.
I tried that before stored procedure, I added these codes:
ButtonA.Text = "processing...please wait";
ButtonA.Enabled = false;
And after stored procedure, I added these codes:
ButtonA.Text = "Start";
ButtonA.Enabled = true;
But the outcome is the text on the button A is not changed and button A is still clickable during the stored procedure is executing.
Can anyone tell me how to achieve what I want? Thanks.
Then I edit my aspx file to be below:
<asp:ScriptManager ID="MainScriptManager" runat="server"/>
<asp:UpdatePanel ID="pnlHelloWorld" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Button ID="ButtonA" runat="server" OnClick="ButtonA_Click" Text="Start" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonA" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
But the text of button still remains the same and the button is still clickable.
You can achieve your requirement by using Ajax. Using Ajax you can do partial page refresh.
Put ButtonA inside the UpdatePanel, and it should work as expected.
You can refer below sample code for reference.
webpage.aspx code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Hello, world!</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="MainScriptManager" runat="server" />
<asp:UpdatePanel ID="pnlHelloWorld" runat="server">
<ContentTemplate>
<asp:Button runat="server" ID="ButtonA" OnClick="btnHelloWorld_Click" Text="Update label!" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
c# code
protected void btnHelloWorld_Click(object sender, EventArgs e)
{
//Before Procedure call
ButtonA.Text = "processing...please wait";
ButtonA.Enabled = false;
//Call Procedure
procedure ....
//After Prodedure call
ButtonA.Text = "Start";
ButtonA.Enabled = true;
}
Hope that helps, thanks.
I have a standard webpage containing an UpdatePanel, and a button. Upon loading the page some javascript is set and the page renders a chart (using Highcharts from here http://www.highcharts.com/products/highcharts).
When I reload the UpdatePanel using a button, dropdown etc the chart does not re-render.
For brewity I have shortened the code, but normally I have an UpdatePanel with a dropdown where users can select various charts, then data is fetched from a database and the results are sent back to the page.
Can anybody explain why it does not work / load the chart when I click on the button - and how to fix it?
The chart can be download here: http://www.highcharts.com/products/highcharts - simply add this to a folder called /js/highcharts.js
<%# Page Language="C#" AutoEventWireup="true" EnableViewState="false" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string jschart = "var chart;$('" + up1.ClientID + "').ready(function() {chart = new Highcharts.Chart({"
+ "title: { text: 'Traffic',x: 0, style: {fontSize:'13px'} },"
+ "chart:{renderTo: 'container', defaultSeriesType: 'column'},";
litChartData.Text = String.Format("{0} {1}", jschart, getData());
}
private string getData()
{
// this is normally coming from a database...
return "xAxis:{title:{text:'Date'}, type:'datetime'}, yAxis:{title:{text:'Hits'}},"
+ "series: [{ name:'Impressions',type:'column',"
+ "data: [ "
+ "[Date.UTC(2011,7,18),13],"
+ "[Date.UTC(2011,7,24),21],"
+ "[Date.UTC(2011,8,30),60]]"
+ "}] }) });";
}
</script>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="scr" />
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<script type="text/javascript">
<asp:Literal ID="litChartData" runat="server" />
</script>
<div id="container" style="width:700px;height:300px;margin:0 auto;background-color:#eee"></div>
<center><asp:Button ID="btn" runat="server" Text="Ajax postback" /></center>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
the chart is rendered on the client side upon jquery's Ready event, but the event is not re-fired upon ajax calls. the solution might be emitting different scripts depending on whether the request is initial or subsequent one (ajax).
on initial call just emit the script you have in jschart var.
on subsequent calls emit the same script but without wrapping it into Ready event binding.
UPDATE:
i totally forgot update panel does not execute nested scripts after updating.
the solution for that is registering scripts via script manager. try the following code. note there is no script literal in the update panel anymore.
<%# Page Language="C#" AutoEventWireup="true" EnableViewState="false" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string jschart =
"if (window.chart) { window.chart.destroy(); }" +
"window.chart = new Highcharts.Chart(" +
"{title: { text: 'Traffic',x: 0, style: {fontSize:'13px'} }," +
"chart:{renderTo: 'container', defaultSeriesType: 'column'}," +
getData() +
"});";
ScriptManager.RegisterStartupScript(this, this.GetType(), "chart", jschart, true);
}
private string getData()
{
// this is normally coming from a database...
return
"xAxis:{title:{text:'Date'}, type:'datetime'}, "
+ "yAxis:{title:{text:'Hits'}},"
+ "series: [{"
+ "name:'Impressions',"
+ "type:'column',"
+ "data:"
+ "[[Date.UTC(2011,7,18),13],"
+ "[Date.UTC(2011,7,24),21],"
+ "[Date.UTC(2011,8,30),60]]"
+ "}]";
}
</script>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="scr" />
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<div id="container" style="width:700px;height:300px;margin:0 auto;background-color:#eee"></div>
<center><asp:Button ID="btn" runat="server" Text="Ajax postback" /></center>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
i call my UI dialog from page which has scriptManager, this way:
function openDialog() {
var $dialog = jQuery('#dialog');
$dialog.load('dialog.aspx');
$dialog.dialog({
autoOpen: false,
title: 'Add New Contact Personel',
modal: true,
height: 200,
width: 400,
show: 'puff',
hide: 'puff',
close: function (event, ui) {
$dialog.html('');
$dialog.dialog('destroy');
}
});
$dialog.dialog('open');
}
body of dialog.aspx looks like this:
<body>
<form id="form1" runat="server">
<%-- <asp:ScriptManagerProxy ID="proxyScriptor" runat="server"></asp:ScriptManagerProxy>
<asp:UpdatePanel ID="upadatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>--%>
<div>
<table border="0">
<tr>
<th>SomeText:</th>
<th><asp:TextBox ID="someTextBox" runat="server"></asp:TextBox></th>
</tr>
</table>
</div>
<asp:Panel ID="updatePanel" runat="server">
<asp:Button ID="UpdateLoger" runat="server" Text="Update" onclick="Update_Click" />
</asp:Panel>
<%-- </ContentTemplate>
</asp:UpdatePanel>--%>
</form>
</body>
now: if i click updateBtn i want to update text in postback, close UI dialog and do refresh like this:
UpdateText(someTextBox.Text);
string script = #"jQuery('#dialog').html('');jQuery('#dialog').dialog('destroy');window.location.reload()";
ScriptManager.RegisterClientScriptBlock(this, typeof(UpdatePanel), "jscript", script, true);
so if add another script manager on this page for UI dialog, very very wird things have happend (like __doPostBack doesn't work), if i remove scriptManager, updatePanel doesnt show it contents, if i put scriptMangerProxy , updatePanel doesn't show it contents either. So how i should do it?
You've got a lot going on here. One problem you're running into is that you're treating dialog.aspx like it's loading into it's own window or iframe. In reality, its just being inserted as a document fragment into the page's DOM. I suspect if you inspect the source, you'll find multiple <body> tags.
There's several ways of doing this. My dialogs are typically unique to a particular page, so I'll handle the dialog somewhat like this:
Page.aspx
<html>
<head>...</head>
<body>
<!-- page content -->
<asp:Button ID="btnOpenDialog" runat="server" OnClick="btnOpenDialogClick" Text="Open Dialog" />
<asp:UpdatePanel ID="upDialogs" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlDialog" runat="server" CssClass="pnlDialog" Visible="false">
<!-- Dialog form -->
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmitClick" Text="Submit" />
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostbackTrigger ControlID="btnOpenDialog" />
</Triggers>
</asp:UpdatePanel>
<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
$("div.pnlDialog").dialog({
autoOpen: true,
title: 'Add New Contact Personel',
modal: true,
height: 200,
width: 400,
show: 'puff',
hide: 'puff',
close: function (event, ui) {
$dialog.html('');
$dialog.dialog('destroy');
}
});
}
</script>
</body>
</html>
Page.aspx.cs
...
protected void btnOpenDialogClick(object sender, EventArgs e)
{
pnlDialog.Visible = true;
upDialogs.Update();
}
protected void btnSubmitClick(object sender, EventArgs e)
{
... save values ...
pnlDialog.Visible = false;
upDialogs.Update();
}
...
Basically, we register a JS function to fire every time the page performs an asynchronous postback. This functions looks for the dialog box code. If it finds it, it wires it up with jQueryUI. If it doesn't find anything, it just finishes silently. If you have multiple dialogs on the page, this can easily be refactored to flexibly handle them.
I'm trying to have two things happen when I click on a button in an ASP.NET page:
Change the text in an ASP:Label.
Disable the button.
I've done a lot of research on this, but I've had difficulties doing either.
For #1, I thought that this should work, but it doesn't:
<%# Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub BtnSubmit_Click(sender As Object, e As System.EventArgs)
Label1.Text = "Working..."
System.Threading.Thread.Sleep(5000)
Label1.Text = "Done."
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test Page</title>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="server" />
<div>
<asp:ListBox runat="server" Height="100px" />
<br />
<asp:UpdatePanel runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnSubmit" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Press the button" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:Button runat="server" ID="BtnSubmit" OnClick="BtnSubmit_Click" Text="Submit Me!" />
</div>
</form>
</body>
</html>
The "Working..." message is never displayed.
As for #2, I added this to the button (I forget where I found it):
OnClientClick="this.disabled = true; this.value = 'Working...';"
UseSubmitBehavior="false"
That had the desired effect of disabling the button and changing its text (value), but it wasn't possible to change it back using Text and Enabled properties.
I just found a solution on msdn (http://msdn.microsoft.com/en-us/library/bb386518.aspx). Added some code and remove some unnecessary parts.
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnDoWork_Click(object sender, EventArgs e)
{
/// do something long lasting
System.Threading.Thread.Sleep(3000);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script language="javascript" type="text/javascript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'btnDoWork') {
$get('btnDoWork').value = 'Working ...';
$get('btnDoWork').disabled = true;
}
}
function EndRequest(sender, args) {
if (postBackElement.id == 'btnDoWork') {
$get('btnDoWork').value = 'Done!';
$get('btnDoWork').disabled = false;
}
}
// -->
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Hello World!"></asp:Label><br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnDoWork" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnDoWork" runat="server" Text="Start!" OnClick="btnDoWork_Click" />
</div>
</form>
</body>
</html>
What you basically do, is you register some eventHandler for Initialize_ and End_Request - in those you disable and enable your button!
HTH
ASP will not flush the result to the browser while working even if you use an UpdatePanel. It will finish the jobb (including the sleep) before flushing.
You can use a UpdateProgress to show the "Working.." text.
<asp:UpdateProgress>
This will show its content while the UpdatePanel is working. Once the UpdatePanel is finished, the content will disappear.
What you need in you ClickEvent is:
Label1.Text = "Done."
btnSubmit.Enabled = false
This will show the Done text and disable the button. And tell the UpdateProgress to disappear.
The Working message is never displayed because you are executing the script on the server, which doesn't respond to the client until the method exits.
ASP.NET AJAX has a built in control for displaying messages like this while the UpdatePanel is waiting on the server.
Check out the UpdateProgress Control:
<asp:UpdateProgress runat="server" id="progress" ><ProgressTemplate>Working...</ProgressTemplate></asp:UpdateProgress>
You can disable the button by setting the Enabled property to false in your server-side method.
BtnSubmit.Enabled = false
#1: You will never see the message "Working" as you stopped the thread .... Every Message will be shown when your process has "ended".
#2: you coded clientSide to disable the button, there is no code to re-enable your button
hth
First off, "working" never appears because the final value of the label at the time of post-back is "Done." Think about what is happening here - you click the button which causes a post-back to the server. It processes the post-back which includes running the button click code, the result of which is then sent back to the browser. Your 'working' text never makes it back over the wire.
I am not clear on what you're trying to accomplish with the client-side code, but to do what you describe you're almsot there server-side:
Protected Sub BtnSubmit_Click(sender As Object, e As System.EventArgs)
Label1.Text = "Done."
btnSubmit.Enabled = false
End Sub
Also, but your button inside your update panel template tags so it participates in the ajax-postback.
I have an update panel within a div that I modal using the JQuery plugin BlockUI. Inside the UpdatePanel is a textbox and a button. When I enter something in the textbox and click the button I am unable to retrieve the text in the textbox. When I debug it shows the textbox having no value.
<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div id="divTest">
<asp:TextBox ID="txtTestVS" runat="server" /><br />
<asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
SERVER-SIDE:
protected void cmdTest_Click(object sender, EventArgs e)
{
string x = txtTestVS.Text;
}
This should clarify things. Here are the total contents of the page.
SHOW MODAL
<div id="divTest">
<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtTestVS" runat="server" /><br />
<asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
This is a common problem with dialog plug-ins. The problem is when content is put in the blockUI container, it's appended to the element, and no longer in the form being submitted to the server. To solve this you need to edit the blockUI code a bit:
Here's the source: http://github.com/malsup/blockui/blob/master/jquery.blockUI.js
Change this:
Line 262:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);
to:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el);
and this:
Line 382:
els = $('body').children().filter('.blockUI').add('body > .blockUI');
to:
els = $('form').children().filter('.blockUI').add('form > .blockUI');
That should get you going and the textbox values coming through.
(Response courtesy of Nick Craver https://stackoverflow.com/users/13249/nick-craver)
If you are trying to use blockUI on a button within an update panel (i.e. you click the button within the update panel and the UI gets blocked), you need to handle it using PageRequestManager events
prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(function() {
$.blockUI({ message: '<img src="../../Content/images/Busy2.gif" />' });
});
prm.add_endRequest(function() {
$.unblockUI();
});
Or on a button click, if you want to display a modal window with this text box and a button, you can try something like this