473,287 Members | 1,492 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

Ajax Postback From JavaScript

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
Jun 27 '08 #1
4 5330
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/...igger-vs-postb
acktrigger.aspx

#ASP.NET AJAX Extensions Update Panel and Triggers
http://geekswithblogs.net/ranganh/ar...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:
ms****@microsoft.com.

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscripti...ult.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/subscripti...t/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------
>From: "Peter" <cz****@nospam.nospam>
Subject: Ajax Postback From JavaScript
Date: Thu, 22 May 2008 21:59:33 -0500
>
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
Jun 27 '08 #2

"Steven Cheng [MSFT]" <st*****@online.microsoft.comwrote in message
news:Fp**************@TK2MSFTNGHUB02.phx.gbl...
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/...igger-vs-postb
acktrigger.aspx

#ASP.NET AJAX Extensions Update Panel and Triggers
http://geekswithblogs.net/ranganh/ar...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:
ms****@microsoft.com.

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscripti...ult.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/subscripti...t/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no
rights.

--------------------
>>From: "Peter" <cz****@nospam.nospam>
Subject: Ajax Postback From JavaScript
Date: Thu, 22 May 2008 21:59:33 -0500
>>
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
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.
Jun 27 '08 #3
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_completionLis tElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplet e_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>

"Peter" wrote:
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
Jun 27 '08 #4
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:
ms****@microsoft.com.

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

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

--------------------
>From: "Peter" <cz****@nospam.nospam>
References: <O4**************@TK2MSFTNGP03.phx.gbl>
<Fp**************@TK2MSFTNGHUB02.phx.gbl>
>Subject: Re: Ajax Postback From JavaScript
Date: Tue, 27 May 2008 07:34:05 -0500
>
"Steven Cheng [MSFT]" <st*****@online.microsoft.comwrote in message
news:Fp**************@TK2MSFTNGHUB02.phx.gbl...
>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/...igger-vs-postb
>acktrigger.aspx

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

T
Jun 27 '08 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Mihir | last post by:
Hi There, I've problem while I submit a button where I used AJAX, I created simple page which will search the customer name from database using AJAX. Once I search customer ID i need to search...
9
by: =?Utf-8?B?SGFyZHkgV2FuZw==?= | last post by:
Hi all, I followed first walk through sample from http://ajax.asp.net/docs/tutorials/IntroductionUpdatePanel.aspx to create my first testing page, The problem is after I clicked that botton, it...
2
by: BJ | last post by:
I had this crazy idea. We have an existing application that could use some rework. I was going to redo the application (currently ASP.Net 1.1) using ASP.Net 2.0: Master page with Header,...
3
by: nuchphasu | last post by:
Hi I have a problem on Dropdownlist that connect database and retrieve data by Ajax.I write javascript like this -------------------------------------------------------------------------...
6
by: HockeyFan | last post by:
I'd like to have an AJAX textbox that after the user fills in, will auto-fill another textbox on the page without having a postback occur. It doesn't have to do any filtering or any other thing...
4
by: =?Utf-8?B?cm9kY2hhcg==?= | last post by:
hey all, is there a way to run my javascript method on every async postback? thanks, rodchar
4
by: ton | last post by:
Hi, I wander what to do. I'm developing a webapplication. One of the parts is to show records from a database. To modifiy a value, text of relational link or date I would like to use Ajax where...
2
by: Mike Gleason jr Couturier | last post by:
Hi guys, I know that the page is reconstructed every time whenever an asynch postback is occuring... I've put a breakpoint in the page render method and the function still gets called when the...
2
by: Johnson | last post by:
While I have done a substantial amount of ASP.NET programming, I have only dabbled with AJAX (update panels and a 3rd party JSON setup - jayrock - that directly updates the DOM). In any case, I'm...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.