Ajax Postback From JavaScript

[Peter]

ASP.NET

I have an application which use ASP.NET Autocomplete extender which works
great. But I have a question how to update all the fields on the screen
using Ajax.

Users starts typing in a text field which causes the Autocomplete extender
to display 10 like items, after the users selects an item (which is a key in
the database) I want the application to go to the database retrieve a record
and populate the fields.
I realize I could create JavaScript function that would populate the fields,
but I already have the server side code that does that and I don't want to
maintain to different sets of the same code. My question is how to populate
the fields on the screen without submitting the entire page to the server
and to have this done after onchange event without requiring user to click
on the Submit button?

I think I have to call C# from JavaScript OnChange event to retreive the
data from the database which I know how to do, but I don't know how to
poputlate the client side textboxes withough using JavaScript or submit
button. So I think I have to use Ajax to do a postback, but how to I do
that from JavaScript.


Thank You


Peter

 

[Steven Cheng [MSFT]]

Hi Peter,

From your description, you use the autoComplete extender to accept input,
and want to make some other textboxes(or fields) on the page get
populated(with some data generated at server-side) without postback,
correct?

According to this scenario, I'm thinking about the updatepanel since it's
the only AJAX control that can help make multiple controls(inside it) do
postback without refreshing page. Also, for your scenario, you may want to
invoke the non-refresh postback based on the Extender's TextBox changed
event.

Based on my research, UpdatePanel support using "AysncPostBackTrigger" to
let you specify an control(outside updatepanel) to cause non-refresh
postback:

#AsyncPostBackTrigger vs PostBackTrigger
http://blog.joelowrance.com/archive/2007/07/24/asyncpostbacktrigger-vs-postb
acktrigger.aspx

#ASP.NET AJAX Extensions Update Panel and Triggers
http://geekswithblogs.net/ranganh/archive/2007/05/16/112526.aspx

Thus, you can consider add a TextBox's "Textchanged" event as one of the
UpdatePanel's "AsyncPostBackTrigger" so that when textbox changed event
occur(you need to set it to AutoPostBack=True), the updatepanel will help
do async postback, and you can update all the other textboxes in
server-side code.

Here is a test page I've used. I only use a simple Textbox, if you want to
involve AutoComplete Extender, I think you need to customize the extender
since you need to add "TextChanged" event for the textbox:

=========aspx========
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="txtInput" runat="server" AutoPostBack="True"
ontextchanged="txtInput_TextChanged"></asp:TextBox>

<hr />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" />
</ContentTemplate>
<Triggers >
<asp:AsyncPostBackTrigger ControlID="txtInput"
EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>

==============code behind=============

public partial class UpdatePanelPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
DoWork();
}

void DoWork()
{
TextBox1.Text = DateTime.Now.ToLongTimeString();
}
protected void txtInput_TextChanged(object sender, EventArgs e)
{
DoWork();
}
}
==================================

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------

 

[Peter]

Hi Peter,

From your description, you use the autoComplete extender to accept input,
and want to make some other textboxes(or fields) on the page get
populated(with some data generated at server-side) without postback,
correct?

According to this scenario, I'm thinking about the updatepanel since it's
the only AJAX control that can help make multiple controls(inside it) do
postback without refreshing page. Also, for your scenario, you may want to
invoke the non-refresh postback based on the Extender's TextBox changed
event.

Based on my research, UpdatePanel support using "AysncPostBackTrigger" to
let you specify an control(outside updatepanel) to cause non-refresh
postback:

#AsyncPostBackTrigger vs PostBackTrigger
http://blog.joelowrance.com/archive/2007/07/24/asyncpostbacktrigger-vs-postb
acktrigger.aspx

#ASP.NET AJAX Extensions Update Panel and Triggers
http://geekswithblogs.net/ranganh/archive/2007/05/16/112526.aspx

Thus, you can consider add a TextBox's "Textchanged" event as one of the
UpdatePanel's "AsyncPostBackTrigger" so that when textbox changed event
occur(you need to set it to AutoPostBack=True), the updatepanel will help
do async postback, and you can update all the other textboxes in
server-side code.

Here is a test page I've used. I only use a simple Textbox, if you want to
involve AutoComplete Extender, I think you need to customize the extender
since you need to add "TextChanged" event for the textbox:

=========aspx========
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="txtInput" runat="server" AutoPostBack="True"
ontextchanged="txtInput_TextChanged"></asp:TextBox>

<hr />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" />
</ContentTemplate>
<Triggers >
<asp:AsyncPostBackTrigger ControlID="txtInput"
EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>

==============code behind=============

public partial class UpdatePanelPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
DoWork();
}

void DoWork()
{
TextBox1.Text = DateTime.Now.ToLongTimeString();
}
protected void txtInput_TextChanged(object sender, EventArgs e)
{
DoWork();
}
}
==================================

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no
rights.

Thank you for your help.

The suggestion and the code works just fine, but I am using DotNetNuke and
the same code and suggestion does not work, so I'll will have to do some
more research to see what's causing it not to work.

 

[kevin fan]

I have same problem. I've already solved this problem. I hope it can help
you.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">

<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox1" runat="server" Width="271px"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
BehaviorID="AutoCompleteEx" TargetControlID="TextBox1"
ServiceMethod="GetCompletionList"
ServicePath="WebService.asmx"
MinimumPrefixLength="1"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="20"
CompletionListCssClass="autocomplete_completionListElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
DelimiterCharacters=";, :">
<Animations>
<OnShow>
<Sequence>
<%-- Make the completion list transparent and then show it
--%>
<OpacityAction Opacity="0" />
<HideAction Visible="true" />

<%--Cache the original size of the completion list the first
time
the animation is played and then set it to zero --%>
<ScriptAction Script="
// Cache the size and setup the initial size
var behavior = $find('AutoCompleteEx');
if (!behavior._height) {
var target = behavior.get_completionList();
behavior._height = target.offsetHeight - 2;
target.style.height = '0px';
}" />

<%-- Expand from 0px to the appropriate size while fading in
--%>
<Parallel Duration=".4">
<FadeIn />
<Length PropertyKey="height" StartValue="0"
EndValueScript="$find('AutoCompleteEx')._height" />
</Parallel>
</Sequence>
</OnShow>
<OnHide>
<%-- Collapse down to 0px and fade out --%>
<Parallel Duration=".4">
<FadeOut />
<Length PropertyKey="height"
StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
</Parallel>
</OnHide>
</Animations>
</cc1:AutoCompleteExtender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>

 

[Steven Cheng [MSFT]]

Thanks for your reply Peter,

I'm glad that you've got progress on this. If you have any further
questions or anything need help, welcome to post here. I'll be glad to
assist you.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------

From: "Peter" <[email protected]>
References: <[email protected]>

Subject: Re: Ajax Postback From JavaScript
Date: Tue, 27 May 2008 07:34:05 -0500