In my current asp.net-mvc project one of my pages allows the user to select a value in a dropdown box after wich a post request is made that updates several values.
To make sure the delay from the postback doesn't confuse the user into selecting another value (and thus creating another post, creating another delay etc) I set the select's disabled attribute to true.
Disabled inputs aren't submitted to the post call however.
How can I make it visually clear to the user that work is in progress and make it imposible to select a new value without removing the input from the post?
Yes, this annoys me too.
Basically what you need to do is hide the old button and replace it with a disabled one so it looks the same to the user. That way it's still submitted but can't be doubly submitted.
Actually I've found what seems to be a duplicate of this at Problem with disabling submit buttons on form submit.
From your answer, I gather you are already using jQuery. In that case why don't you get the value of the select box, disable it, then post the value yourself?
Bonus : BlockUI is a nice jQuery plugin to, well, block the UI.
None of the answers I found in Cletus' post was entirely what I was looking for.
Here is what I came up with. It's not 100% reusable, but it does what I need and feel free to improve/edit.
$('#productMixSelectorForm').change(function() { $(this).ChangeSelection() });
jQuery.fn.ChangeSelection = function() {
var html = $('<div class="hidden">');
$(this).find('select, input').each(function() {
if ($(this).hasClass('hidden') == false) {
//Clone the original one into the hidden div
html.append($(this).clone());
//Disable the original (visible) one and make it's name unique again
$(this).attr("disabled", true);
var name = $(this).attr("name");
$(this).attr("name", name + "disabledDummy");
}
});
//Add the collection of clones to the form so they get submitted
$(this).append(html);
$(this).submit();
}
Related
Is there a way to refresh associated Grid View ?
I have a Sales Order View on the Account Form, on this Form I have a button (New Order) that open a new Sales Order Form, in this form I do my Orders,
The question is : When I save on my Order Form I want to refresh my Order associated View (in the Account Form) , but I don't know how to get the control name or how to access to it.
I tried many ways Like
Xrm.Page.ui.controls.get("Orders").refresh();
document.getElementById("areaOrders").contentWindow.location.reload(true);
Thank's.
To refresh a subgrid you can use
Xrm.Page.getControl('new_subgrid').refresh();
However in my experience it is very buggy (since RU12 anyway), so use with caution. You also need to check the type of the control you retrieve and ensure it is a grid or an error will be thrown.
However you have asked a slightly different question:
When I save on my Order Form I want to refresh my Order associated View (in the Account Form)
Which I understand to mean you have an Order form opened from an Account form and want to refresh the subgrid on the Account form.
The easy answer is no, you cannot do this in a supported way.
It may be possible but it wouldn't pretty. You'd need to get a reference to the opening window, which may be available in
window.opener
I haven't tried and am not infront of a machine to try it. But I would advise against it, the alternative is a single click to manually refresh the subgrid; it isn't a bad alternative.
This is a javascript function I wrote to force Subgrid loading if the form contained more than 4 subgrids. I believe a recent rollup has made the purpose of the code obsolete, but it might be helpful for you to find your subgrids:
/*
By default, CRM only loads the first 4 subgrids on a form. This will load
up all subgrids on the form, or only the number (over the default 4) if specified
*/
forceSubgridLoad: function (countOver4) {
$(document).ready(function () {
var links = $("a.ms-crm-List-LoadOnDemand");
for (i = 0; i < links.length && (countOver4 == null || i < countOver4); i++) {
links[i].click();
}
});
},
I have blogged about auto-refreshing a sub-grid in Microsoft Dynamics CRM.
The solution is an unsupported customization, and basically boils down to this:
document.getElementById("crmGrid").control.refresh();
Replacing "crmGrid" with the div id of the sub-grid that is to be refreshed.
As far as I know there is no supported way to do a refresh.
EDIT
Figured it out.. $.ajaxSetup({ cache: false }); wasn't working because i had data-ajax set to turned off on the form and therefore i wasn't able to set no cache ajax on it.. just for completeness if anybody knows how to get this done WHILE dada-ajax is set to false then please post so here
Something else that I just tried and it worked was to simply add data-ajax="false" to any link that you want a page refresh on. Meaning that if I have data-ajax="false" on a link it will always refresh the page before showing it!
For example the link I had a problem with was
Add a new weekly update
and the problem was that for some reason that page was caching and always showing the cached page.. So one of the easy fixes was to add data-ajax="false" to it and that forced a reload of the page everytime
Add a new weekly update
````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
Question:
I have a options menu which brings up a form which also has a cancel and submit button.
Once the form is submitted there is certain validation that runs and if something is missing it returns to the form with some validation text.
Now if I click the cancel button at anytime i should be brought back to the options menu and if I click on the same button that brings up the form i should see a brand new clean form and this works fine if I do it before the validation.
The problem is that if I submit a non valid form which returns with the error validation messages and THEN press cancel it seems that the page becomes cached or something similar because from that point on anytime I click on the form options menu button the same form shows up each with the validation errors and data. I put a break point in the method that returns the form View() and they are never hit so for some reason it skips the entire method which creates a new form and somehow just shows the old page.
The cancel button is the following
Cancel
Does anybody know what is happening? is it being cached somehow when it returns to the same page with the validation errors??
** EDIT **
I Tried adding [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")] in front of the controller by to no avail..
I also now added
$.ajaxSetup({ cache: false });
to the top of my $(document).ready(function () but that also does not seem to be doing anything, do I just put it there or do I have to call it somehow?
I checked System.Web.HttpContext.Current.Cache and the page doesn't show up there.
Have you tried setting the output cache options on the controller action like
[OutputCache(Duration=600,VaryByParam="id")]
You might also want to try making sure jquery is not caching the request as well. You can globally turn off jquery ajax caching using the information here: How to set cache: false in jQuery.get call
You can try using $.mobile.changePage() to transition to the page, it allows you to set some options, one of which is reloadPage.
reloadPage (boolean, default: false) Forces a reload of a page, even if it is already in the DOM of the page container. Used only when
the 'to' argument of changePage() is a URL.
Source: http://jquerymobile.com/demos/1.1.1/docs/api/methods.html
You could work this into your link with something like:
<script>
function changeMyPage(url) {
$.mobile.changePage(url, { reloadPage : true });
}
</script>
Cancel
jquery Mobile pulls multiple pseudo-pages into the DOM at one time and normally deletes (.removes()) a pseudo-page after you've navigated away from it. It however sounds like that's not happening so you may need to use my above code (or something similar) to force a refresh of the page.
You need to clear your ModelState before hand.
This should work:
if (ModelState.IsValid)
{
//saving
if (result > 0)
{
**ModelState.Clear();**
return View(new CategoryViewModel());
}
}
How to Clear model after submit the data in database in MVC3
A user wants to post in his blog, he fills the field and click submit.
The site is running slow, he clicks again, and again, and again.
It was finally saved, but now he check his posts and sees 4 posts.
How can I prevent this from happening? If the user click to submit once I want to do nothing for the next clicks or abort previous and start a new post, whichever makes more sense or is recommended.
In a form with
#using (Ajax.BeginForm(...))
{
}
The easiest way to achieve this is to disable submit buttons after click.
Add the following javascript (jQuery) to your view:
$(function () {
$('input[type="submit"]').click(function() {
$(this).attr('disabled', 'disabled');
});
});
Remember to enable buttons after ajax request complete if neccessary:
$('input[type="submit"]').removeAttr('disabled');
UPDATE:
It's better to disable the submit button in forms submit event handler, because an user can submit the form by pressing enter button:
$(function () {
$('form').submit(function() {
$('input[type="submit"]', this).attr('disabled', 'disabled');
});
});
There are many solutions.
One is to create a random GUID with
the form as a hidden field which is
inserted into database with the post.
Before inserting, it checks if GUID
already exists.
Alternatively you can use a real property such as DateTime (which is sent to the client side as a hidden field) or "Post title".
How about the minute the user clicks on the action link for the post area you create a real post but set its "Status" to draft?. After you InsertOnSubmit() the post immediately redirect to an action which you retrieve the post and edit it. This happens so fast the user will not notice. So if the site is slow and he clicks on "Submit" multiple times you will not be generating new records just saving to the same record. I using the process on an task list application I working on. See the code below.
Better Task List Ticket Controller
It may not be the fanciest solution but could lead you to a more creative solution that works for you.
My vote is for ActionFilters. This blog post has code to just drop into your project and decorate your actions.
Simple one here... is there a clean way of preventing a user from double-clicking a button in a web form and thus causing duplicate events to fire?
If I had a comment form for example and the user types in "this is my comment" and clicks submit, the comment is shown below... however if they double-click, triple-click or just go nuts on the keyboard they can cause multiple versions to be posted.
Client-side I could quite easily disable the button onclick - but I prefer server-side solutions to things like this :)
Is there a postback timeout per viewstate that can be set for example?
Thanks
I dont think that you should be loading the server for trivial tasks like these. You could try some thing jquery UI blocking solution like this one. Microsoft Ajax toolkit should also have some control which does the same. I had used it a long time ago, cant seem to recall the control name though.
With jQuery you can make use of the one event.
Another interesting read is this: Build Your ASP.NET Pages on a Richer Bedrock.
Set a session variable when the user enters the page like Session["FormXYZSubmitted"]=false.
When the form is submitted check that variable like
if((bool) Session["FormXYZSubmitted"] == false) {
// save to db
Session["FormXYZSubmitted"] = true;
}
Client side can be tricky if you are using Asp.Net validation.
If you have a master page, put this in the master page:
void IterateThroughControls(Control parent)
{
foreach (Control SelectedButton in parent.Controls)
{
if (SelectedButton is Button)
{
((Button)SelectedButton).Attributes.Add("onclick", " this.disabled = true; " + Page.ClientScript.GetPostBackEventReference(((Button)SelectedButton), null) + ";");
}
if (SelectedButton.Controls.Count > 0)
{
IterateThroughControls(SelectedButton);
}
}
}
Then add this to the master page Page_Load:
IterateThroughControls(this);
I have had the same scenario. The solution of one of my coworkers was to implement a kind of Timer in Javascript, to avoid considering the second click as a click.
Hope that helps,
Disable the button on click, utilize jquery or microsoft ajax toolkit.
Depending on how important this is to you, could create an array of one time GUID's which you remove from the array once the update has been processed (ie posted back in viewstate/hidden field)
If the guid is not in the array on postback, the request is invalid.
Substitute database table for array in a clustered environment.
I'm creating this form (.net) where i have a select with a postback, that will trigger a action depending on which option i select. I'm trying to use the jQuery Validate Plugin (plugin website) to validate my form.
My problem is, when i validate the form, and my select is marked as invalid, the validation plugin overwrite it's onChange method to make it unmark when i change the value, the thing is that it's deleting my __dopostback from the onchange, making the form 'useless'.
Is there a way to the plugin validate my selects without deleting my postback action from the onchange?
I know this is an old post, but I had a similar situation and was able to resolve it like this. Just thought I'd post it just in case someone else found there way here. I'm using jQuery Validation Plugin 1.9.0:
$('#aspnetForm').validate({
errorLabelContainer: "#messageBox",
wrapper: "li"
});
$("input[id$='myButton']").click(function () {
SetRules();
if ($('#aspnetForm').valid()) {
// form passed validation
} else {
$('#aspnetForm').resetForm();
return false;
}
});
function SetRules(){
$("select[id$='myDropDown']").rules("remove");
$("select[id$='myDropDown']").rules("add", {required:true});
}
My validator is set up so errors display together in one designated div. When I click the button, the validation fires and displays all the elements in that div and marks the fields that are invalid, including the select (all choices are red), and when I change the selection my autopostback fires and the colors of the select change back to their old value (assuming the choice passed the validation).
I am pretty new at this plugin, so I can't explain it too well but my thought process was to try and get the form to validate and show the errors, and then reset the controls back to their original state while still keeping the error messages visible. I was expecting to lose the red error highlighting, but somehow that retained while also bringing back the select's postback.
Also, I do not know if setting the rules in this manner contributed to this working or not; I had to set them like this for various reasons, the biggest one due to needing the selector for .NET's automatically generated IDs.