update several textboxes from different services

I am trying to write my first application using atlas. what i want is to have 3 labels and one textbox. and one button.

the user enters a word into the textbox and clicks the button. what i then want to happen is for all 3 labels to be populated by calls to 3 separate webservices. sounds simple enough but..

these webservices may take some time to return, and i don't want to postback the entire page and then the user have to wait for each service to return before the page reloads.

What i want is for each label to be updated independently, so label1 migth be updated before 2 and 3
and 3 might be updated before 2. but at least the time the user has to wiat before something is returned is only as long as it takes for the first label to be updated.

i've read the following article on codeproject
http://www.codeproject.com/Ajax/HelloAtlas.asp

but this just deals with a partial postback to the same page, which isn't what i need to do.

If anyone can help or point me in the direction of an article that does something similar to what i would like to do, i'd appreciate it loads.

hello.

well, the scenario you describe can be easilly achieved by using the client portion of atlas. check this page:

http://atlas.asp.net/docs/atlas/doc/services/consuming.aspx#simple

Thanks for the reply. funnily enough i'd just started reading that tutorial.

I have made some progress. i enter a value in a texbox click a button. then 2 webservices are called asyncronously (ws1 sleeps for 5 seconds and returns a string ws sleeps for 2 seconds and returns a string) the results from these ws are then displayed in 2 textboxes.

However in order for the results to update these textboxes i've had to use standard html tags, not asp.net labels, i guess because they are generated server side.

What i would like to do is combine what i have so far with the display opf a progress animation like in this codeproject article.

http://www.codeproject.com/Ajax/HelloAtlas.asp

i think what i'm asking is how can i control an update panel and updateprogress cotnrol via javascript.

all i want it to be able to is whilst the webservice is being called, display a little .gif, and then when the webservice returns output the results within a dif

below is my code so far. any help would be appreciated

<atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"><Services><atlas:ServiceReferencePath="WebService.asmx"/><atlas:ServiceReferencePath="WebService2.asmx"/></Services></atlas:ScriptManager><div></div><inputid="inputName"/><inputid="buttonGo"type="button"value="GO"onclick="return OnbuttonGo_click()"/><atlas:UpdatePanelID="wsOne"runat="server"><ContentTemplate><inputid="Label1"type="text"/>

<inputid="Label2"type="text"/>

</ContentTemplate>

</atlas:UpdatePanel>function OnbuttonGo_click()

{

//Oh yes. method one gets called first but 2 returns first oh yes as ws one sleeps for 5 secs and ws2 only sleeps for 2.//now need to look at batching//and also need to look at how to update sections of the html page with the results.//can i use updatepanels?

requestSimpleService = WebService.testAsync(

document.getElementById(

'inputName').value,//params

OnCompleteOne,

//Complete event

OnTimeout

//Timeout event

);

//Call script proxy passing the input element data

requestSimpleService = WebService2.testAsync(

document.getElementById(

'inputName').value,//params

OnCompleteTwo,

//Complete event

OnTimeout

//Timeout event

);

returnfalse;

}

function OnCompleteOne(result)

{

document.getElementById(

'Label1').value = result;

}

function OnCompleteTwo(result)

{

document.getElementById(

'Label2').value = result;

}

function OnTimeout(result)

{

alert(

"Timed out");

}

Ok, made a bit more progress. i can now output my results to separate divs.

All i need to be able to do now is to display a .gif in each div until the function returns.

function OnCompleteOne(result)

{

document.getElementById(

'wsone').innerHTML = result;

}

function OnCompleteTwo(result)

{

document.getElementById(

'wstwo').innerHTML = result;

}

<atlas:UpdatePanelID="wsOnePanel"runat="server"><ContentTemplate><divid="wsone"></div><divid="wstwo"></div></ContentTemplate></atlas:UpdatePanel>

hello.

first, you don't need to use an updatepanel in this scenario. the updatepanel let's you refresh a portion of the page but it should only be used when you're transforming an aspx page into an atlas page. second, you can do what you want easilly: to do that, you just need to show the icon during the start method and hide it during the end method.

aha well i've got it working. basically after each webservice call i set the inner html of the divs to the animated gif.

Then on completion the oncomplete function is called, which overwrites the innerhtml with the result.

requestSimpleService = WebService.testAsync(

document.getElementById(

'inputName').value,//params

OnCompleteOne,

//Complete event

OnTimeoutOne

//Timeout event

);

//display .gif

document.getElementById(

'wsone').innerHTML ='<img src=blue_forward.gif />'//Call script proxy passing the input element data

requestSimpleService = WebService2.testAsync(

document.getElementById(

'inputName').value,//params

OnCompleteTwo,

//Complete event

OnTimeoutTwo

//Timeout event

);

//display .gif

document.getElementById(

'wstwo').innerHTML ='<img src=blue_forward.gif />'

Update textbox value

Dear friends,

I'm trying to update a textbox value by values that occour in a for each statement.
Ex.:

List<string> words = new List<string>();
words.Add("Test1<br>");
words.Add("Test2<br>");
words.Add("Test3<br>");
words.Add("Test4<br>");
words.Add("Test5<br>");

foreach (string s in words)
{
txtOcorrencias.Text += s;
System.Threading.Thread.Sleep(2000);
}

I want that each word appear for time, but when the function runs, all the words at the same time.

How I code this?

It's because you are doing this on the server. The server doesn't return the page to the browser every time it sleeps. It runs all of the code and then renders the page.

Have you considered doing this in javascript?

Yes, I try to use javascript but I used Thread to simulate other methods that the application have to execute on the server.

This is one way of doing it:http://encosia.com/2007/10/03/easy-incremental-status-updates-for-long-requests/

gt1329a

I'm using the code you recommend to me, It works 100%.

Thanks.

updatepanel

Hi,

I am using updatepanel to update a message that's to be show to the user. I have a textbox with the submit button inside another updatepanel. Once the user hits a submit I have to display whatever he entered in the textbox.

The problem I am having is that the div (which displays result, can a server side control too), just appends the new text to the original value. So if I hit enter a multiple times, it goes on appending!

Am I missing something here?

Thanks!

Can you show the code that move the text from the textbox to the div?

Please show an example of what you are doing.

HtmlGenericControl DivControl = new HtmlGenericControl();

DivControl = (HtmlGenericControl)ResultsDiv;

DivControl.InnerHTML = txtReply.Text;

This comes up when the submit button's pressed.

Is there some reason you couldn't use a Label inside the div as your target? (I'm just trying to prevent the innerHTML thing from being the issue...)

hi, no, I tried label too. but did not work out. If you can paste the code for that, it would be really helpful.

Thanks!

I'm not sure why your code isn't doing what you expect it to, but here's some code that seems to work fine, using a Label:

<%@. 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 button_click(object sender, EventArgs e) { Label1.Text = TextBox1.Text; }</script><html xmlns="http://www.w3.org/1999/xhtml" ><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="button_click" /> <asp:Label ID="Label1" runat="server" /> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

Just a Small Correction, As you want to append the Text each time the button is pressed, the click handler should be:

protected void button_click(object sender, EventArgs e)
{
Label1.Text += TextBox1.Text;
}

Everything else is fine with the above example.

I thought he explicitlydidn't want to append?

From original post: "The problem I am having is that the div (which displays result, can a server side control too), just appends the new text to the original value. So if I hit enter a multiple times, it goes on appending!"

Sorry my mistake, the Requirment is not to append.

Hi mate, works like a charm! Thanks!

UpdatePanel

I am new to Ajax so please be patient. I have created a modal popup. The control has a simple textbox, button and gridview. When the user enters the search criteria the gridview is bound to a dataset with the results. There is a column in the grid that is a linkcolumn that is used to determine which result the user selected. The selected row info is placed into session in the code-behind click event, then there is a label on the form that kicks off javascript. This was all working well. I put all the controls into an updatepanel and everything is working great except the firing the javascript by placing the js code into the label. The Javascript never executes? Any help would be much appreciated.

Have you debug your code why javascript is not executing...

You can use RegisterClientScriptBlock Method to execute javascript..

See for more details...

http://ajax.asp.net/docs/mref/O_T_System_Web_UI_ScriptManager_RegisterClientScriptBlock.aspx

No luck. I am attempting to inject the javascript from code-behind into a label control. The label control is never updated with the Update Panel in place. Before the Update Panel this solution worked fine. I can put a button control on the page and it will execute the js fine. The big problem I see is getting the label text to update with the script.

Can you provide code details...

So if possible I'll try to find what exactly happens...

UpdatePanel & update progress indication

Hi,

Say I have an UpdatePanel and TextBox & Button on it. What i need is: when i click on the button it (button) should show "Saving..." and when it's updated it should show "Saved!"

Are there any client side events of update panel i could use? Couldn't find much info elsewhere...

Thank you,

Andrey

You have to use Sys.WebForms.PageRequestManager Class

Use

Sys.WebForms.PageRequestManager.instance.add_beginRequest(beginRequestHandler)

Sys.WebForms.PageRequestManager.instance.add_endRequest(endRequestHandler)

http://asp.net/AJAX/Documentation/Live/ClientReference/Sys.WebForms/PageRequestManagerClass/default.aspx

If you wanted to just show the "Saving..." message, you could just use an updateprogress control (http://asp.net/AJAX/Documentation/Live/tutorials/UpdateProgressTutorials.aspx).

But since you want to display the "Saved" message when the process is complete, you need to do some custom programming. Place the following scriptafter the scriptmanager tag on the page:

 <script type="text/javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_beginRequest(beginRequestHandler); prm.add_endRequest(endRequestHandler); //var to store id of asynch postback triggering control: var postbackElementID; function beginRequestHandler(sender, args) { //necessary in case other controls may cause asynch postback on the page too: if (args.get_postBackElement().id == 'Button1') { $get('TextBox1').value = 'Saving...'; postbackElementID = args.get_postBackElement().id; } } function endRequestHandler(sender, args) { //again, because we want to make sure we're responding to the right asynch postback: if (postbackElementID == 'Button1') { $get('TextBox1').value = 'Saved'; postbackElementID = ''; } } </script>

Thanks guys, I'll give it a try!

UpdatePanel and ASP.NET validation controls

Ok, here's the setup:

-- July version of ATLAS

-- Inside an update panel, we have an asp textbox and a required field validator.

-- Outside the update panel we have an image button.

If you click the image button without entering anything in the text box, you get the client-side validation (which is correct). Then, enter valid data and click on the image button with the mouse (don't tab off the text box first). The validator message is cleared, but the the button's click event is never fired. We always have to click it a second time.

We only have this problem in an update panel. Our workaround is to put client-script on the OnMouseDown event of the button to fire the click event. Does anyone know what may be causing this?

Thanks, --David

Turns out it's not an ATLAS problem at all. The validation controls are set to display="dynamic" and they were pushing the image button down (and pulling it back up) and the onmouseup event wasn't completing on the button. Who knew.

UpdatePanel and AutoPostback

I have a textbox with AutoPostback set to true to fire an OnTextChanged event. This worked until I put the textbox inside an UpdatePanel and now it doesn't fire the event. Why is that?

Thanks

Sounds odd, I have a repeater where I have a TextBox and the TextChanged event fires to potentially show more controls based on the record being changed. I have it wrapped in an update panel and it works fine.

<asp:ScriptManagerProxyID="ScriptManagerProxy1"runat="server">

</asp:ScriptManagerProxy>

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<asp:UpdateProgressID="UpdateProgress1"runat="server">

<ProgressTemplate>

Updating...</ProgressTemplate>

</asp:UpdateProgress>

'''''Stuff goes here, like tables and my repeater, etc.

<asp:TextBoxID="txtQty"runat="server"Width="35"AutoPostBack="true"OnTextChanged="txtQty_TextChanged"></asp:TextBox>

'''''Stuff goes here, like tables and my repeater, etc.

</ContentTemplate>

</asp:UpdatePanel>

ProtectedSub txtQty_TextChanged(ByVal senderAsObject,ByVal eAs System.EventArgs)

'Event Handler Guts go here

Me.SetFocus(txtQty.UniqueID)

Next

EndSub

Are you sure the event isn't firing (did you check in the debugger)? If the actions of your OnTextChanged event handler don't act on an UpdatePanel that's updating in the resulting partial postback, you aren't going to see anything happen. So, if you just wrapped that TextBox in an UpdatePanel and nothing else, it would appear that it stopped working.

UpdatePanel and focus

I Have a lot of textbox inside a updatepanel and when the text of one textbox changed, I refresh the values of each textbox.

The problem is that I lost the focus when the controls get the new values. I want the focus in the next control.

Set the focus by calling the SetFocus method of the ScriptManager object.

Thanks for the response.

Its works very well

Doesn't work for me when I try to set focus to a RadiobuttonList inside an updatepanel?

UpdatePanel and RequiredValidator

Hi,

I have an UpdatePanel which has a Repeater inside. Each ItemTemplate of Repeater containers a Textbox and its RequiredValidator. Here is the code

<atlas:UpdatePanel ID="ButtonLabelContainerPanel" runat="server">
<ContentTemplate>
<asp:Repeater ID="ButtonLabelContainer" runat="server">
<ItemTemplate>
<div id="LabelRow" class="formRow">
<label id="Label1" for="ButtonText" runat="server"><%=Resources.InterfaceKitsResource.ButtonLabel %></label>
<asp:TextBox ID="ButtonText" Text="<%# Container.DataItem %>" runat="server" />
<asp:RequiredFieldValidator ID="ButtonTextValidator" ControlToValidate="ButtonText" ValidationGroup="CreateButtonImageValidationGroup" Text="Button Label is required" runat="server" Display="Dynamic" />
</div>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="addLabel" EventName="Click" />
</Triggers>
</atlas:UpdatePanel>

Notice the Validator has a "ValidationGroup".. somewhere else on the page, I have a button (not part of the trigger) which will be clicked and has the same "ValidationGroup"...

The issue is.. all empty textbox within the repeater shows up the error message EXCEPT the first textbox.

What am I doing wrong?

hello.

can you build a repro page and post it here?

Yeah, here is a watered down version of what i have

-----
<%@. 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 Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindButtonContainer();
}
}

private void BindButtonContainer()
{
ArrayList ButtonLabelArray = new ArrayList();
ButtonLabelArray = getButtonTextList(false);
ButtonLabelArray.Add("");
ButtonLabelContainer.DataSource = ButtonLabelArray;
ButtonLabelContainer.DataBind();

}

private ArrayList getButtonTextList(bool createHover)
{
ArrayList ButtonLabelArray = new ArrayList();
foreach (RepeaterItem item in this.ButtonLabelContainer.Items)
{
TextBox mytextBox = (TextBox)item.FindControl("ButtonText");
ButtonLabelArray.Add(mytextBox.Text);
}
return ButtonLabelArray;
}

protected void AddButtonLabel(object sender, EventArgs e)
{
BindButtonContainer();
}

protected void BindOutputImages(object sender, EventArgs e)
{
Output.DataSource = getButtonTextList(false);
Output.DataBind();
}

</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<atlas:ScriptManager ID="scriptmanager1" EnablePartialRendering="true" runat="Server" />
</head>
<body>
<form id="form1" runat="server">
<div id="RepeaterSection">
<atlas:UpdatePanel ID="ButtonLabelContainerPanel" runat="server">
<ContentTemplate>
<asp:Repeater ID="ButtonLabelContainer" runat="server">
<ItemTemplate>
<div id="LabelRow" class="formRow">
<label id="Label1" for="ButtonText" runat="server"><%=Resources.InterfaceKitsResource.ButtonLabel %></label>
<asp:TextBox ID="ButtonText" Text="<%# Container.DataItem %>" runat="server" />
<asp:RequiredFieldValidator ID="ButtonTextValidator" ControlToValidate="ButtonText" ValidationGroup="CreatButtonGroup" Text="Button Label is required" runat="server" Display="dynamic" />
</div>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="addLabel" EventName="Click" />
</Triggers>
</atlas:UpdatePanel>
<asp:LinkButton ID="addLabel" CssClass="addFormRow" Text="Add Another" OnClick="AddButtonLabel" runat="server" />
</div>

<div id="output">
<asp:Button ID="CreateButtons" runat="server" OnClick="BindOutputImages" ValidationGroup="CreatButtonGroup" Text="Create Button" />

<atlas:UpdatePanel ID="OutputPanel" Mode="Conditional" runat="server">
<ContentTemplate>
<atlas:UpdateProgress ID="OutputInProgress" runat="server">
<ProgressTemplate>
Working...
</ProgressTemplate>
</atlas:UpdateProgress>

<asp:Repeater ID="Output" runat="server">
<ItemTemplate>
<div class="generatedButton">
<%# Container.DataItem %>
</div>
</ItemTemplate>
</asp:Repeater>

</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="CreateButtons" EventName="Click" />
</Triggers>
</atlas:UpdatePanel>
</div>
</form>
</body>
</html>
------
To test this..

1) fill in something in the first textbox, click on "Add Another"
2) fill in something in the second textbox click on "Add Another" again
3) click "create button"

Now you should see the text you entered on the bottom correct?

4) get rid of the text in the second texbox
5) click "create button"

The text of the requiredvalidator shows up as expected.. But now try this...

6) get rid of the text in the first textbox as well...so now you have both empty text boxes
7) click "create button"

See the problem? the requiredvalidator text next to the first textbox did not show up.

The only time it shows up for the first textbox is when it's the ONLY textbox in the repeater. When page load, without entering anythign, just one textbox, click "create button". It'll work.

This only stops working when there are multiple itmes in the repeater.
and oh btw,

the display="dynmaic" stopped functioning as well.

say

1) enter soemthign in first textbox
2) click "add another"
3) without entering anything in the second textbox, click "create button"

you'll see the red requiredvalidator error next to the the second box. now try

4) to fill something into the secondbox,
5) tab away to "create button"

normally without updatepanel, the red text will disappear right away, but now it doesn't.

I'm using firefox 1.5

hello.

that's weird. i've followed the steps you've mentioned in your previous post and here i get the error on the first validator too! if i fill the textbox and hit tab, the error goes away, so i really can't reproduce the errors you're having...btw, i've tested it in IE 6 and firefox 1.5 too.

can you repro those errors on another machine? i can try to look at it tomorrow at work, where i have win 2003 server, but here with xp sp2 and the march ctp of atlas, everything went well.

Hello Luis,

Yeah, I've deployed onto an windows 2003 server with march CTP, i get teh same problem.

Everything else works except the first validator and "display='dynamic'". I'm guess this is a bug in Atlas. Worst to worst, I'll have to resolve to traditional javascript dom for this matter. But if you have any insight, please do post here.

Thanks a a lot!

hello again.

well, i've tried here at work and guess what? well, validation wasn't working well with firefox. so, why was it working at home: simple, because i've changed the atlas.js code that i'm using in my pages.

the problem i was getting was related with the way validation was working. after adding elements to the page, i was allways getting a postback. so, several things go wrong here:

1. the update panel isn't working properly with validation because the method that submits the form doesn't verify the state of the validators before doing the submit (i've pointed this problem in several post here)

2. after copying the js files used on the client side validation, i noted that the number of validators on the page was allways 1. using fiddler i could see that they were returning it correctly (there was as script section with 2 validators on it). it was then that i recalled having found a bug related with the way firefox interprets the script nodes returned from the server side. the problem is that to firefox \n is a node while it's discarded in IE (i really don't know which implementation is correct; this is just an observation related with the way both browsers behave). so, the problem was that firefox was executing "\n" (which simply doesn't do anything) while ie was executing the var Page_Validators ... line which redefines the validators arrays.

how to solve these? i've presented a simple solution to number 1 in previous posts

related with number 2, i say that the _updatescripts method of the atlas.js (or atlasruntime.js) has to be modified so that it has this line:

if

(xmlScriptNode.childNodes.length != 0) {
for (var c = xmlScriptNode.childNodes.length - 1; c >= 0; c--) {
var nodeType = xmlScriptNode.childNodes[c].nodeType;
if ((nodeType == 3) || (nodeType == 4) || (nodeType == 8)) {
text = xmlScriptNode.childNodes[c].nodeValue;
if( text =="\n")
{
continue;
}
break;
}
}
}

the bolder bigger lines solve the interpretation issue on firefox. hope this helps.

Hi Luis,

This problem with scripts in Firefox is fixed in the April CTP, which we will be releasing this month (obviously!).

Thanks,

Eilon

howdy again!

that's great! thanks again.