473,700 Members | 2,467 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 5357
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 "AysncPostBackT rigger" to
let you specify an control(outside updatepanel) to cause non-refresh
postback:

#AsyncPostBackT rigger 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 "Textchange d" event as one of the
UpdatePanel's "AsyncPostBackT rigger" so that when textbox changed event
occur(you need to set it to AutoPostBack=Tr ue), 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 "TextChange d" event for the textbox:

=========aspx== ======
<form id="form1" runat="server">
<asp:ScriptMana ger ID="ScriptManag er1" runat="server">
</asp:ScriptManag er>
<div>
<asp:TextBox ID="txtInput" runat="server" AutoPostBack="T rue"
ontextchanged=" txtInput_TextCh anged"></asp:TextBox>

<hr />

<asp:UpdatePane l ID="UpdatePanel 1" runat="server">
<ContentTemplat e>
<asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button 1_Click" />
</ContentTemplate >
<Triggers >
<asp:AsyncPostB ackTrigger ControlID="txtI nput"
EventName="Text Changed" />
</Triggers>
</asp:UpdatePanel >
</div>
</form>

==============c ode behind========= ====

public partial class UpdatePanelPage : System.Web.UI.P age
{
protected void Page_Load(objec t sender, EventArgs e)
{

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

void DoWork()
{
TextBox1.Text = DateTime.Now.To LongTimeString( );
}
protected void txtInput_TextCh anged(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****@microsof t.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.comw rote in message
news:Fp******** ******@TK2MSFTN GHUB02.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 "AysncPostBackT rigger" to
let you specify an control(outside updatepanel) to cause non-refresh
postback:

#AsyncPostBackT rigger 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 "Textchange d" event as one of the
UpdatePanel's "AsyncPostBackT rigger" so that when textbox changed event
occur(you need to set it to AutoPostBack=Tr ue), 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 "TextChange d" event for the textbox:

=========aspx== ======
<form id="form1" runat="server">
<asp:ScriptMana ger ID="ScriptManag er1" runat="server">
</asp:ScriptManag er>
<div>
<asp:TextBox ID="txtInput" runat="server" AutoPostBack="T rue"
ontextchanged=" txtInput_TextCh anged"></asp:TextBox>

<hr />

<asp:UpdatePane l ID="UpdatePanel 1" runat="server">
<ContentTemplat e>
<asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button 1_Click" />
</ContentTemplate >
<Triggers >
<asp:AsyncPostB ackTrigger ControlID="txtI nput"
EventName="Text Changed" />
</Triggers>
</asp:UpdatePanel >
</div>
</form>

==============c ode behind========= ====

public partial class UpdatePanelPage : System.Web.UI.P age
{
protected void Page_Load(objec t sender, EventArgs e)
{

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

void DoWork()
{
TextBox1.Text = DateTime.Now.To LongTimeString( );
}
protected void txtInput_TextCh anged(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****@microsof t.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:ScriptMana ger ID="ScriptManag er1" runat="server">
</asp:ScriptManag er>
<asp:UpdatePane l ID="UpdatePanel 1" runat="server" RenderMode="Inl ine">

<ContentTemplat e>
<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:AutoComple teExtender ID="AutoComplet eExtender1" runat="server"
BehaviorID="Aut oCompleteEx" TargetControlID ="TextBox1"
ServiceMethod=" GetCompletionLi st"
ServicePath="We bService.asmx"
MinimumPrefixLe ngth="1"
CompletionInter val="1000"
EnableCaching=" true"
CompletionSetCo unt="20"
CompletionListC ssClass="autoco mplete_completi onListElement"
CompletionListI temCssClass="au tocomplete_list Item"
CompletionListH ighlightedItemC ssClass="autoco mplete_highligh tedListItem"
DelimiterCharac ters=";, :">
<Animations>
<OnShow>
<Sequence>
<%-- Make the completion list transparent and then show it
--%>
<OpacityActio n 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('AutoComp leteEx');
if (!behavior._hei ght) {
var target = behavior.get_co mpletionList();
behavior._heigh t = target.offsetHe ight - 2;
target.style.he ight = '0px';
}" />

<%-- Expand from 0px to the appropriate size while fading in
--%>
<Parallel Duration=".4">
<FadeIn />
<Length PropertyKey="he ight" StartValue="0"
EndValueScript= "$find('AutoCom pleteEx')._heig ht" />
</Parallel>
</Sequence>
</OnShow>
<OnHide>
<%-- Collapse down to 0px and fade out --%>
<Parallel Duration=".4">
<FadeOut />
<Length PropertyKey="he ight"
StartValueScrip t="$find('AutoC ompleteEx')._he ight" EndValue="0" />
</Parallel>
</OnHide>
</Animations>
</cc1:AutoComplet eExtender>
</ContentTemplate >
<Triggers>
<asp:AsyncPostB ackTrigger ControlID="Drop DownList1"
EventName="Sele ctedIndexChange d" />
</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****@microsof t.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************ **@TK2MSFTNGHUB 02.phx.gbl>
>Subject: Re: Ajax Postback From JavaScript
Date: Tue, 27 May 2008 07:34:05 -0500
>
"Steven Cheng [MSFT]" <st*****@online .microsoft.comw rote in message
news:Fp******* *******@TK2MSFT NGHUB02.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(wi th 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 "AysncPostBackT rigger" to
let you specify an control(outside updatepanel) to cause non-refresh
postback:

#AsyncPostBack Trigger vs PostBackTrigger
http://blog.joelowrance.com/archive/...igger-vs-postb
>acktrigger.asp x

#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
5793
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 order related to that customers. So on my page I've Search Button(Image Button).. Now if I click on search button without selecting the customer from the result which I get from AJAX method then it will work fine but if I select a customer ID from...
9
1869
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 still trigged a postback. Do I miss something? Following is my code: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
6996
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, Footer, Side bar and Body One of the content panels would use a Wizard control stepping the user through submitting an Ergonomic Review Request.
3
4317
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 ------------------------------------------------------------------------- function ManageYear_onchange(machinetype) { var iManageYear=document.forms.ddlManageYear.selectedIndex; var vManageYear=document.forms.ddlManageYear.value;
6
4005
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 like that. I'm fairly experienced with ASP.Net, but new to AJAX. Please help if you can. Thanx.
4
1742
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
1496
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 possible. I saw the posiibilty of the Ajax control toolkit with the calendar extender. How nice. But is it fast? Thats the question, because the roundtrip to the server would build the full page in postback and only the changes will be posted...
2
1816
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 postback is an asynch one. Is the framework optimizing the rendering process on asynch postback? How does the __doPostBack() is working whenever an asynch call is made? Is the page gets constructed as if it was not "in AJAX mode" and the parts
2
1860
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 considering offering Web pages both to browsers that support AJAX and to those that do not support AJAX. Questions: 1. In general, should I look to offer two versions of each page - one for AJAX clients and the other for "non AJAX-supporting"...
0
8731
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8649
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9081
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8975
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7819
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6564
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4660
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3097
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2032
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.