I have an UpdatePanel with ContentTemplate specified. When page loads, user can do some AJAX work in other part of the page. Then, after that work is finished, I would like to update only content inside UpdatePanel, but without pressing any buttons etc. I should be done automatically using JavaScript when previously started AJAX work finishes. How to do it without manual clicking on the trigger button?
EDIT:
Ok, I've followed that _doPostBack rule, and whole page is posted.
<asp:UpdatePanel ID="panelAttachments" runat="server">
<ContentTemplate>
........
</ContentTemplate>
</asp:UpdatePanel>
<input type="text" name="test" onchange="__doPostBack('<%=panelAttachments.UniqueID %>',''); return false;" />
</td>
Thanks, Pawel
To refresh an update panel from javascript:
__doPostBack(updatePanelUniqueID,'');
The first parameter is the UniqueID (not CientID) of the UpdatePanel.The 2nd parameter is optional arguments you can pass which will be available to your server code. Both are stored in hidden form fields by ASP.NET, you can access them in codebehind:
Request.Form["__EVENTTARGET"];
Request.Form["__EVENTARGUMENT"];
But if you just want to refresh a panel and don't need to pass any additional info from the client, you can ignore then 2nd argument.
If you look at the HTML generated by ASP.NET for an async postback control, you'll see it's exactly this.
Related
I have the following code in my aspx file:
<button type="button" id="btnAskQuestion" runat="server" onserverclick="btnAskQuestion_Click">Ask Question</button>
I've tried every combination of onclick="return false;" and onclick="preventDefault()" I can think of, including putting them in the javascript function that gets called. Everything I try has one of two results: either I get a postback, or the server side code (btnAskQuestion_Click) never executes.
Any idea what I might be doing wrong?
You cannot execute server-side code this way, using onserverclick causes postback.
If you wish to prevent full page refresh and still execute server-side code, you have to call a client-side JS function via onclick and execute an AJAX call from there.
Another alternative is to use your button as a trigger for UpdatePanel - this way only partial postback will be performed.
Try using the property UseSubmitBehavior="false" in the button markup.
or you can use a "trick" :
Markup
<button onclick="myFunction()">Click Me!</button>
<div style="display:none">
<asp:Button runat="server" id="btnButton" .../>
</div>
js
function myFunction()
{
if (true statement)
$("[id$=btnButton]").click();
else
alert("false");
}
What this does is that you handle stuff with normal markup and do the logic using js. And you can trigger a click of the button that do something in the server.
There're OnClick, that fires on server and OnClientClick that fires on client browser. You should do this:
<asp:Button ID="btnAskQuestion" runat="server"
OnClick="btnAskQuestion_Click"
OnClientClick="return myfunction();">Ask Question</asp:button>
If myFunction returns true, then you will have a postback to the server.
My answer is appropriate only for ASP:Button, not the button control you are working with. Given the choice, I'd switch to ASP:Button.
You're looking for OnClientClick. If you put your JavaScript code there, it will kill the PostBack before it can hit the server.
On the other hand, if you're looking to execute server code without a PostBack, that's impossible. The PostBack is what triggers the server to act.
I have several text boxes on a page. I want to save the text in the corresponding TextBox on LostFocus. It is to ensure the data is not lost when power failure or internet connectivity is lost. How can I accomplish something like this?
Another solution would be to use an UpdatePanel. You could then leverage server-side events rather than an event handler. You're markup might look something like this:
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<asp:TextBox ID="SomeTextBox" runat="server" TextChanged="SomeTextBox_TextChanged" AutoPostBack="true" />
</asp:UpdatePanel>
</asp:ScriptManager
and then in the TextChanged handler you could do your work.
Explanation: the TextChanged event will fire on the text box in which the text was actually changed when the post back occurs. The AutoPostBack property is necessary so that the page will in fact post back when the text box loses focus.
One final thing to remember, you will probably need to leverage this.IsPostBack on the page in the Load handler because every time a control is updated it's going to reconstruct the page. It's common that logic in the Load handler only needs to execute one time, but that would pose a problem if you didn't check to see if it was a post back because then it would execute every single time you left a text box.
Use jquery.
First on attach blur event handler, where you call ajax method to server passing new value of the textbox.
Handle this ajax event on serverside and write your data to the database or anywhere else.
Here is a piece of code that may help.
$('#textbox_id').blur(function() {
$.ajax({url:"handler_url.ashx?textbox_value=" + $('#textbox_id').val()});
});
Then create your ashx handler on server and handle your requests with ProcessRequest method. From there you will have access to Request.QueryString where new value of textbox will be stored.
I have an ASP.NET form with a few controls and a submit button at the bottom, all inside an update panel:
<asp:UpdatePanel runat="server" ID="upContent">
<ContentTemplate>
<asp:TextBox runat="server" ID="tbxMyTextBox" AutoPostBack="true" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return doStuff()" OnClick="btnSubmit_Click" />
</ContentTemplate>
</asp:UpdatePanel>
If I write something in the TextBox and click 'submit' immediately (without clicking out of the TextBox first), the changes are not recorded (as seen in the server-side event handler). However, if I write something in the TextBox, and then change focus to another control, an AutoPostback happens through the UpdatePanel and then clicking 'submit' does recognize these changes. How can I force this content to update right as I click the submit button, while still running both the clientside and serverside events attached to it? Thanks!
Is is possible that your text-box gets cleared due to some on-submit/on-click event handler? I will suggest you do use some tool such as Fiddler to inspect the POST data in request. Or you can put a break-point at your server side code and inspect the request data. Look for particularly Request.Form[tbxMyTextBox.UniqueID] - i.e. look for presence of value for your text-box's name (name property at client side which corresponds to UniqueID property at server side). If the request contains the value typed in the text-box then something is happening on server side but good news is you can always retrieve the value from Request object. If the value is not present in the Request object then it means that client side code is clearing the value before the submit.
If an onclick method returns false, it cancels the action that the button would normally perform. As your button would normally submit your form, but it appears not to be submitting, your client side javascript code in doStuff is probably returning false.
With asp.NET control dropdownlist, there is a property AutoPostBack, if it is set "True", the whole page will be posted back.
If the aspx page include a html element "select" like:
<select id="list" name="list" runat="server"
DataTextField="Name" DataValueField="ID" ></select>
and it data is filled by code-behind.
Question is: how to allow this Select have AutoPostBack function too?
The DropDownList approach adds a __doPostBack('selectelementname', 'commandname'); call to the onchange event. When you change the value, this then proceeds to post back to the server, and then the ASP.NET control processes the postback data in LoadPostData method.
HTH.
You can't apply Auto post back property for html select control.To invoke function writen inside c# code page(serverside),you need to use webservice. You can call javascript function(client side) on 'onchange' event of html select control.
I have a user control that has multiple update panels
On Page Load, I load a child user control dynamically onto the PlaceHolder (I do this everytime and don't check for postback)
I want to be able to maintain the state of the changes that a user makes in the Child user control. (The child user control has html controls along with asp.net controls and other custom controls).
The child user control loses the state whenever there's a click on the Button A or B that causes the postback. The mode for UpdatePanels have been set to conditional.
In the OnPageLoad,
I load a child control to the PlaceHolderA
This child control has another user control with a lot of JS. A user can potentially make changes in the child control.
When they click on Button A which is a part of the parent control, the OnPageLoad causes the child control to reload causing it to lose the client side changes that a user has made.
I would like to prevent this from happening.
Here's the HTML structure of the ASPX page
<UpdatePanel1>
<UpdatePanelChild1>
<Button A>
<Button B>
</UpdatePanelChild1>
<UpdatePanelChild2>
<PlaceHolderA>
</UpdatePanelChild2>
When dynamically adding controls you need to re-add them everytime your page loads. I've had to tackle similar difficulties and I do this in two ways. Where dynamic fields are added o the fly I will actually add a hidden control to the page before the user clicks to fill it in or add it themselves. By creating this sort of placeholder the system has tim eto start handling viewstate correctly and this preserves the users changes. The second issue that I hear you mentioning is that there might be issues with chich update panel updates. It's fine to have them set to conditional bu tin your code-behind you can also trigger the updates in teh othe rpanels if you need to from code. It's just updatepanel#.update()
alternatively you can also wrap all the update panels in another panel but I advise against this as it wastes resources.
It looks like you're losing the ViewState for your dynamically-added child control.
This is because you're adding it too late in the page lifecycle: the ViewState is loaded before the Page.Load event.
Try adding your child control in Page.Init instead.
You could use a ScriptManager with a form runat server in your control, instead update panels.
This way you dont have the post backs.
Here a good reference: http://www.asp.net/Ajax/Documentation/Live/overview/ScriptManagerOverview.aspx
Greetings.
Josema.
http://www.learning-workshop.com
Blockquote
//Code in your Asp.Net code
<form runat="server" id="form1">
<asp:ScriptManager id="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="/WebServices/MyService.asmx"/>
</Services>
</asp:ScriptManager>
</form>
<script language="javascript" type="text/javascript">
//call with namespace "WebSite" included
WebSite.WebServices.HelloWorld(EndHelloWorld);
function EndHelloWorld()
{
//do whatever
}
</script>
</form>
Blockquote
//Code in your webservice class
[ScriptService]
public class MyService : System.Web.Services.WebService
{
[WebMethod]
public void HelloWorld()
{
return "Hello world";
}
}
From the script of my page i will do Ajax against my webservice, and the callback EndHelloWorld you could do whatever without losing state.
Hope it helps...
Kind Regards.
Josema.
It looks like you need to remove the nested UpdatePanels. In a structure like this:
<ParentUpdatePanel>
<ChildUpdatePanel1 />
<ChildUpdatePanel2 />
</ParentUpdatePanel />
ALL of the update panels will ALWAYS update, even if the child UpdatePanels are set to conditional, because the parent is actually the one that is updating. So, a postback event in one of the children will cause the parent to update.
Using that type of pattern is bad in general... if you need events from one UpdatePanel to cause updates in another, you should do this:
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="buttonA" runat="server" />
<asp:Button ID="buttonB" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="up2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Placeholder ID="ph" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="buttonB" EventName="Click" />
</Triggers>
</asp:UpdatePanel>