I have a ValidationSummary that works pretty well, although it doesn't go away after the last of the form errors are rectified.
I'm not sure if this is default behavior or a bug. It seems more towards the latter, since they don't go away after my form has been submitted.
The only thing I suspect might be impacting the functionality is that the form is created through Ajax.BeginForm().
Even still, shouldn't the ValidationSummary disappear right as I hit the submit button?
You can make it hide on form submit in your javascript. If you inspect element on your validation summary, you'll notice it changes styles from .validation-summary-valid to .validation-summary-errors if there are any errors. So this makes it easy to hide.
e.g.
$('#formName').submit(function() {
if ($(this).valid()) { // checks form is valid.
$('.validation-summary-errors').hide(); // hides it
}
});
This is an example of something I've used prior, hopefully it helps anyone who finds this. I kinda disagree with the accepted answer as it breaks the usability of the summary later.
$("form#AJAX_FormA").on('submit', function (e) {
e.preventDefault();
$(this).validate();
if ($(this).valid()) {
$('.validation-summary-errors ul li').attr("style", "display:none"); //Hide
$('.validation-summary-errors').removeClass("validation-summary-errors").addClass("validation-summary-valid");
ajaxGenerateList($(this).serialize());
}
});
Related
I'm using best_in_place 2.1.0 in a rails 3.2 app.
I have a set of best in place fields whose values are dependent on each other.
Because modifying one changes the values for all of them, I need to disable editing for all of them when an AJAX request is sent from any of them.
If you notice, best in place already disables one field while it's waiting for the AJAX request to finish. I just want to extend this so that it disables all of them.
I tried overriding the onclick
$('.best_in_place').bind("onclick", function(e){
e.stopPropogation();
e.cancelBubble();
return false;
});
but that didn't work. Sometimes it appeared to be called prior to the creation of the best in place field, but other times it appeared to occur after. Either way, it didn't work for me.
I also thought about using the "best_in_place:activate" jQuery trigger, but that is called after this.activateForm() in BestInPlaceEditor.prototype{.. activate: } so that doesn't work.
I'm not really sure what to do. Anything that will disable all, or a selection of, best in place fields dynamically will work for me.
If someone is still looking for a solution for that, I went with adding a class to the element, and canceling events via css:
in the js:
$('.best-in-place.parent-setting').on("ajax:success", function(e, t) {
var enable = $(this).data('bip-value');
var childrenSettings = $(this).data('children-setting');
$('.best-in-place.'+childrenSettings).toggleClass('disabled', !enable);
});
in the css:
.best-in-place.disabled{
opacity: .5;
pointer-events: none;
}
I have an application which includes a series of forms, each on their own page.
I do not want some of these pages to be added to the history stack. So that when the user presses back, it skips them.
Jquery-mobile does this with dialogs. You can configure this to happen with ALL pages (or any other data-role) but not with just some pages.
Does anyone know how to do this? Alternatively, would it be possible to create a new data-role that extends "page". If that was possible, then I could disable history for all of those pages.
in this case, you can call $.mobile.changePage() by yourself:
$.mobile.changePage( "url", {
changeHash: false //do not track it in history
});
http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
http://jquerymobile.com/demos/1.2.0/docs/api/methods.html
I was facing the same issue and I was going berserk!!! Finally, I was able to do it with the following code that does just that!
The code below automatically prevents storing the changed locations for all pages in the current document.
Please note that it has been tested with jqm 1.4.2
<script>
$(document).on("pagebeforetransition",function(event, ui){
ui.options.changeHash = false;
}) ;
</script>
Hope it helps
Checkout this question, pretty much the same as what you are trying to do.
How to modify jQuery mobile history Back Button behavior
Thanks,
Alex.
I have a dynamic MVC4, jQuery Mobile application that works for the most part quite well. I have an auto posting dropdown list that selects a list from the database via the following code.
<script type="text/javascript">
$(function () {
$("#TownID").live('change', function () {
//$("#TownID").change(function () {
var actionUrl = $('#TheForm1').attr('action') + '/' + $('#TownID').val();
$('#TheForm1').attr('action', actionUrl);
$('#TheForm1').submit();
});
});
</script>
<p>
#using (Html.BeginForm("SearchTown", "Home", FormMethod.Post, new { id = "TheForm1" }))
{
#Html.DropDownList("TownID", (SelectList)ViewBag.TownId, "Select a Town")
}
</p>
The problem is it only works properly the first time a search is performed unless I click refresh. I don’t think this has anything to do with MVC, I think the problem is with AJAX and jQuery Mobile.
Edit:
The first time I search www.mysite.com/Home/Search/2 yields a result and woks fine, but the second time something seems to be left behind in the DOM??? and it looks for:
www.mysite.com/Home/Search/2/2 also
I get 404 errors in my log and “Error Loading Page” but it still finds the results and displays the page correctly!
Then with a third search I get the error 404’s in my log and “Error Loading Page” but it has grown and now looks for:
www.mysite.com/Home/Search/2/2
www.mysite.com/Home/Search/2/2/2 also
This then continues to grow after every search until at some seemingly random point on each test, it seems to give up and I get error 505
Additional Edit:
The code works perfectly if I take jQuery Mobile out of the question
Can anyone tell me what might be going on here?
Get rid of: $(function () {
And replace it with: $(document).delegate('[data-role="page"]', 'pageinit', function () {
Please read the big yellow sections at the top of this page: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
You can't rely on document.ready or any other event that only fires once per page. Instead you have to get used to using jQuery Mobile's custom page events like pageinit so your code will work no-matter when the page is added to the DOM (which you don't know when this will happen in a jQuery Mobile website). There are a ton of events, so again, please read the documentation I linked-to above.
Firstly, dynamically generated html using a server side templating engine blows. I really don't understand what value people see in it.
My guess is that it used to make sense 10 years ago before AJAX became popular, and has just hung in there ever since because people have this feeling that it is "the right way to do it". It isn't. ESPECIALLY for mobile web apps.
Secondly, it looks like you are trying to do pretty simple search. All this MVC4 garbage makes it difficult for you to see what is really happening though. You don't need to append parameters to your URL for a simple form submission like this. In fact your TownId should already be part of the POST data when you submit, so you can just remove the URL modification bit.
Alternatively, don't use a form submission, but just a GET and AJAX. I don't know what your app is doing here, but I imagine you want to display the results on the page dynamically somehow, so a GET is more than enough.
Use your developer browser tools (F12) to see what exactly is getting submitted when you do the submit - it really helps. And for your next project, abandon MVC4! "Well established design patterns" my foot.
I have been bothered by this problem for a long time
There are same select element in the DOM I think so...
and I used $('.SelectCSS:last').val()
It seen work well.
I come from China , English is poor...
I guess this is one for the future, MVC and jQuery Mobile don't seem to blend completely right now. Maybe MS's response to the issue is Single Page Applications!
SPA may satisfy Danial also?
I've got a model that does some validation checking and adds the errors to ModelState:
ViewData.ModelState.AddModelError("mycontrol", "message")
They display fine on the view side, but is there a way to set the focus to the control that corresponds to the validation message? Right now, the page refreshes and stays at the top of the page, so if the error is towards the end of the page, it's not obvious to the user what happened.
Note: Another solution would be for ValidationSummary to show the list of errors at the top of the page, but I've never been able to get it to display anything. All my errors are displayed via ValidationMessage.
Edit: I found my problem with ValidationSummary. The markup I had was:
<% Html.ValidationSummary()%>
which should have been:
<%=Html.ValidationSummary()%>
I'd still like to know how to snap to the field with the error however.
Some jquery goodness to scroll to the first input with an error. The tricky bit is that you have to get the underlying DOM element BEFORE you invoke focus() as the focus() method on a jQuery object fires the focus event instead of giving focus to the element.
<script type='text/javascript'>
$(document).ready( function()
{
var input = $('.input-validation-error:first');
if(input)
{
input.focus();
}
});
</script>
You could use JavaScript to find the input elements on the page that have the MVC validation HTML class (input-validation-error) added, and move the carat to the first one. That /should/ move the screen to that element although I haven't tested it.
A JS library such as jQuery will make this straightforward to do.
I added the following code to change the hash to the tab name:
$("#tabs > ul").tabs({
select: function(event, ui){
window.location.hash = ui.tab.hash;
}
} );
This works fine in FF3 but in IE7 it moves down the page (depending on the tab selected anywhere from somewhere near the top of the page all the way down to the very end of the page).
I tried changing it to:
$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location = ui.tab.hash;
})
This leads to identical behavior in both IE7 and FF3, which moves the page down to the top of the selected tab.
I would like the tab to be changed, the hash to be updated, but the page not moved at all, which is how it works in FF3 in my first example, but not in IE7.
Thanks.
Notes: JQuery 1.3.1 / JQuery-UI 1.6rc6
If there's an element on the page that has the same id as what you're setting the hash to, for instance you're trying to set the browser hash to #cars and there's already a div#cars on the page, the browser will scroll you down to where that div is.
To my knowledge, there are 3 possible workarounds
1) Change the browser hash to something else such as #thecars.
2) Change your existing markup in some similar manner.
3) On some event, changing the id of your similarly named markup, then changing the browser hash, then rechanging the name of markup back to it's original value should also theoretically work. This is obviously a bad and slow workaround, just thought I'd mention it.
You could try having a "return false;" after you set the window location but I can't be sure.
Unfortunately, your problems won't end there. There are other issues with navigating back and forth across multiple browsers--nothing may change, page may reload, page state might be mangled, javascript may get reinitialized etc.
You may want to have a look at Tabs v2 which uses the History/Remote plugin though it has not been updated for jQuery 1.3+.
This demo is easier to understand. If you look at the javascript source, you'll notice the use of iframes to handle states.
There is also the History Event plugin and the jHistory plugin to achieve what you want.
Would like to hear back how things turns out and what solution you went with.
What Chris suggested worked for me, had no clue even a div could link via the #. So my solution is quite simple, in the show: event handler, I do the following, it's not perfect in that back button won't be in history, but that's another job for BBQ history plugin. All my divs simply have id="tab-cars", id="tab-trucks"... strip out the 'tab-' part and put it into the url hash.
var name = ui.panel.id.substr(4);
location.hash = '#'+name;