In my last post I wrote about using the OnClientClick property of a control (or button) to run JavaScript prior to running the actual server-side click action in order to prompt a confirmation message. To piggy-back on that post, there are a lot of useful things you can do with javascript that will run before your form submits back to the server to so some action. In this post, we’ll look at that same idea to clear the dirty-flag with client-side code before the postback occurs in order to avoid the “you have unsaved data. If you continue you will lose the changes you have made”. message if you redirect to another page during the postback.
Scenario
In the scenario, I have a button and, when clicked, I programmatically save the data and then redirect to some new page. The problem with this scenario is that my redirect to the new page will cause the dirty prompt to occur since the system doesn’t know I’ve already done the job of saving the data myself. The problem is that the postback action, where I save the data, is also where the redirect occurs. So, any attempt to clear the dirty flag in that post back is too late and the prompt will still occur.
Using Client-Side Script to Clear Dirty State
Kris Halsrud previously posted the code we’ll need to clear the dirty flag using Javascript. We just need to use that to clear the flag in the OnClientClick property so the flag is cleared prior to the postback. Then, when the redirect occurs, the flag will be already cleared and all will be good.
Here’s the code to clear the flag using Javascript:
var bindingManager = Sage.Services.getService('ClientBindingManagerService'); if (bindingManager) { bindingManager.clearDirtyStatus(); bindingManager.turnOffWarnings(); } |
You have two options. You can paste that into the OnClientClick property, or if you need to do this conditionally, you can set it in the OnClientClick property via code.
The main point I want to make here, is that the client-side code in the OnClientClick property runs before the server-side action. Even better, the result of the OnClientAction code can change the flow of what happens by halting the execution of the server-side action if needed – just simply return true or false. This opens up a world of possibilities and becomes infinitely more useful.
Hi Ryan,
On the Account page, I changed the value of a field on the Account Details area (from AccountDetails quickform). When I clicked an arrow of group navigator OR clicked a contact from Contacts tab to redirect to the Contact page OR reload the browser, I always got the dirty flag “You have unsaved data. If you continue you will lose the changes you have made”. If we don’t want to see the dirty flag. Where should I put your javascript clear code?
Thanks!
Is it possible to only remove the dirty flag from the Group Navigator button on the toolbar of Account Details area? Didn’t find the OnClientClick of Group Navigator button.
You’d have to wire it up to the buttons at runtime using jQuery or Dojo to wire up a new handler for the click events of those buttons. If you’re wanting to do that globally to all navigate buttons it would be a good idea to add that to the master page. The selectors to get the buttons would be tricky, but something like this:
// wire up next button
$(‘.mainContentHeaderToolsRight [id$=-Next]’).click(function () {
// add code here
});
// wire up previous button
$(‘.mainContentHeaderToolsRight [id$=-Previous]’).click(function () {
// add code here
});
Something like that
Thanks Ryan.
I’d like to conform something. If my case is only the Group Navigator button on the Account page,
(1) what file and where should I put these jQuery snippets? In the Script Include of the AccountDetails quickform, correct?
(2) In my case, the Control ID of the Group Navigator button in the AccountDetails quick form is AccountDetails_9. In the eventual Account aspx page, there is .
In the jQuery snippets, do the selectors need to use the Control ID?
It doesn’t matter what the Group Navigator is named. That’s a composite control, meaning that it renders as several different controls (including the next/prev buttons) all with different names. The code I posted before should work, you’d just need to inject it at runtime using a LoadAction on the AccountDetails and load the script using ScriptManager.RegisterClientScriptBlock.
Make sense. Thanks Ryan.
A further question: If I change some fields on the Account Details form, after I click the next/previous arrows, is it possible to save the changes automatically? In other words, in this case, is there a place where I can add Account.Save()? Can Account.Save() be invoked in a javascript snippet?
Thanks again!
P.S. The html part after *there is* in the last comment missed. Maybe html tags can’t be saved in the database of the website. Anyway, in the eventual Account aspx page, the Control ID of the Group Navigator button is also AccountDetails_9.
Thanks!
Maybe this comment should be put here:
Make sense. Thanks Ryan.
A further question: If I change some fields on the Account Details form, after I click the next/previous arrows, is it possible to save the changes automatically? In other words, in this case, is there a place where I can add Account.Save()? Can Account.Save() be invoked in a javascript snippet?
Thanks again!
Nope
In SLX Lan we can do the autosave when clicking the group navigator arrows.
In SLX Web, is there no way to do autosave when we click the group navigator arrows? Is there a way to use server side code to do it?
Thanks!
Hi Ryan,
I meant when an arrow in the Group Navigator button is clicked, is it possible to use a server-side event handler to run something like Account.Save() to save the changes on the Account Details before going to the other pages?
Thanks!
No, not really (otherwise we’d likely see that implemented to automatically save out of the box). The only thing that comes to mind as a possibility is to wire up the client-side click event to the navigation buttons (using jQuery like I showed earlier) and then attempt to send a postback using the save button like this (in your client-side code):
__doPostBack(‘<%= cmdSave.ClientID %>‘, ”);
That would likely trigger the save, but then that would also likely stop the navigation to the next/prev record as well.
I’d say you’re out of luck for doing this.
Thanks Ryan!