I am learning the JQuery Mobile framewrok and is using VS 2013 for my new project. I created a MVC 4 JQuery Mobile project. From the project I got out of the box, I click on the Login link and on that login page, I click on the Login Button, it shows the expected error messages. I want my project to be ajax enabled so I set the $.mobile.ajaxEnabled = true; and debug in VS, it hits the break point I set in the Login action in the AccountController so the client-side validation didn't work and got to the post on the server-side.
Is it by design that I can't use the built-in client-side validation when ajaxEnabled is set to true? Or is there some settings that I need to set? I need my project to be jax enabled and would like to use the built-in client side validation if possible and don't have to write custom jquery validation code.
Found the answer. add the below code to the on pageshow event
$.validator.unobtrusive.parse(".ui-page-active form");
Related
We encounter the following problems with Jquery Mobile.
Our site is divided in a mobile and a fixed desktop site.
Both use the same database and php code. Only the templates are different.
On our mobile site we use Jquery mobile for a better user experience and that works fine. However we integrated a button "goto desktop".
This link should bring us back to our "normal" desktop site.
But there is the problem. In the desktop-site, Jquery mobile is still activated and it replaces drop down fields, input fields and make a complete mess of the desktop site.
We tried everything to disable JQM but nothing seems to work.
How we can switch from our mobile site template to the desktop site template and disable JQM completely when we are on the desktop template?
Thanks a lot for help!
There are few available solutions but only one will really do.
Working example: http://jsfiddle.net/Gajotres/NvEcW/
Few things are needed, first we need to set this:
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
it will give us an ability to programatically turn on/off content enhancement. If you already don't know this mobileinit event must be initialized before jQuery Mobile initialization but after the jQuery initialization. This must always be a part of a page.
There's one last step. When we want to move from mobile to desktop page we need to reload page and use this javascript:
$(document).on('pagebeforecreate', '#index', function(){
$(this).attr('data-enhance','false');
});
Pagebeforecreate event is important because at this point content is still not enhanced and attribute data-enhance = false will prevent any further page enhancement. If you want to turn it on again just set attribute value to true.
If you want more solutions then take a look at my other answer, search for the topic Methods of markup enhancement prevention : jQuery Mobile: Markup Enhancement of dynamically added content.
I am fairly new to mvc and I tried mvc4 when it was still in beta. I remember that when I started a new internet project, I got a popup dialog for log in and registration by default. I don't see that when I start a new project anymore, is that gone from the internet project?
I believe the popup dialog you're referring to was just the jQuery UI Dialog that the sample project used to use:
The project was built to support both a straight request to /Login and one via the jQuery UI dialog which was slimmed down to look like it was only a popup. It did this by making the Login action return a different View based on it being requested through the frame or not as detected by a value in the query string.
You can of course have this again, you'll just need to do it manually (or dig out one of the older templates) as it's no longer in the default templates.
To help you out, here's a couple of somewhat related questions that contain the sample code (ContextDependentView is one thing I remember from this template) and probably some hints on how to recreate it:
Generating a modal jQuery partial view with MVC4 does not work
ASP.NET MVC 4 and ContextDependentView
MVC4 - ContextDependentView - What does it mean?
It was removed from the Internet project templates in the final releases of MVC 4. The popup was pretty slick but I imagine there were issues/complexities they decided to eliminate by just keeping the view/page for logon and registration. In the older versions that had the pop-up they still had the view/page for logon because of how forms based authentication works. If the user is not authenticated/authorized for a web site/page MVC does a redirect to the logon page. This will not work with a JQuery popup dialog on the same page. The popup only worked if you clicked on the Logon link for the page. I am guessing that they decided since they need the view/page logon anyway to simplify things and keep it consistent by eliminating the popup dialog.
I have implemented an MVC Single Page Application (SPA) that only uses a JQuery dialog for a popping up a dialog for logon, and eliminates the need for logon page. But it required a fair amount of customization to authentication/authorization process on the server and used basic authentication on the client.
I am using twitter bootstrap modal with a remoteurl to load in a partial view; in this case for a reset password form.
I am using the MVC model binding and have set the data annotations on the model to enable the client side validation to occur in the partial view.
This however does not fire the client side validation. I get the server side validation which is fine, but for some reason when this form is within the modal it does not invoke the client side validation.
The jquery validation and bootstrap scripts are referenced in the main page which contains the modal.
I have however added the jquery and jquery validation script references to the end of the partial view, and doing this does ensure the client side validation is invoked.
Why is it necessary for these scripts to be included within the parital view which is loaded into the modal?
As it works this way I would have been happy to leave it, but doing so causes me another problem with the twitter bootstrap modal when I need to dynamically load different remoteUrls.
When the jquery scripts are referenced in the partial view too, the modal will fire the first time, but then subsequent times I get an error. I know it is the jquery references causing a problem as if
I remove them, although I don't get the client side validation, I can open the modal multiple times without any problems.
The code I am using to invoke the modal is found from internet searches to try and get the modal to refresh the modal body for different remoteurls passed to it.
$('#mymodal').removeData('modal');
$('#mymodal').modal({ remote: self.remoteUrl, keyboard: true });
The error I then get is on firing this for the second time $('#mymodal').modal is null. but it will always work the first time. As detailed above, I believe this to be because of the jquery script references in the partial view.
Does anyone have an thoughts on either of these two problems.
The only way I seemed to be able to get this to work in the end was when the partial view was loaded to call the following:
$('#frmName').removeData("validator");
$('#frmName').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse('#frmName');
This seemed to invoke the client side validation for me.
Unknown server tag 'asp:AutoCompleteExtender'.what should I do to use AutoCompleteExtender in MVC.I have no problem with this when using in aspx page holding single textbox/ajax
what should i do to use AutoCompleteExtender
Nothing. You shouldn't use server side controls in an ASP.NET MVC application. I would recommend you taking a look at jQuery UI and its AutoComplete widget.
I am trying to update the partialview in which i used ajax.beginform. normally, first time it validate on client side but when i refresh the partial view innerHTML using outside button event, it is no more doing clientside validation on button submit.
It is working fine in google chrome but it is not working in IE 8, 9 or Mozilla.
Please find below link to download the sample project that i have created.
Download Sample
I found out a way to solve this situation.
Change 1
As on the sample project i referenced
two jquery scripts called Jquery.validate.min.js and jquery.validate.unobstusive.js on layout page but i didnt reference those jquery script file on my partial view.
Change 2
instead of updating the content of ajax.beginform in partialview, we need to update the container of ther partialview which is $("#dvPartialData").html(result) in Index view of home controller.