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.
Related
Setup
I had an MVC View containing a Partial View that had an Ajax.BeginForm.
This was in turn triggering bootstrap modal pop ups for subsequent operations.
I enabled Unobtrusive validation and included Unobtrusive Ajax script references.
All my scripts were of the latest JQuery version.
Mine was an ASP.NET MVC5 application running on .NET 4.5 framework with razor views.
Problem
All hell broke loose when I ran this web application.
1)Bootstrap backdrop remained after modal was hidden.
2)Form was submitted twice
3)Submit button was rendering the Json result directly on the browser instead of sending it to onSuccess designated method.
Troubleshooting this from scratch, I realized that I had included the Modal dialog DIVs (the one which we refer in the data-target attribute) inside the Ajax.BeginForm of my partial view (thinking that those are anyways being triggered from within the partial view).
Keeping them out of the form resolved the issue.
Why can't the Modal Divs be kept within the Ajax.BeginForm? Is this caused due to the way the Bootstrap treats and invokes the Modals?
I have a strange problem in a web-app (using jQuery 1.10.2 and jQuery UI 1.10.3: the tabs (of the Tabs-plugin) are SOMETIMES rendered correctly and SOMETIMES not. "incorrect" means that the divs with the tab-contents are shown one below the other, no
That happens with IE7,8,10 and FF26 and on machines with rigid policies as well as those with more relaxed policy.
The browser may show a page incorrectly and then you just press F5 and the reload renders correctly.
Has anyone else had similar problems before? I have no idea how to approach this thing, yet the project-mgr wants to see something happening...
(I have validated the HTML/JS using CSE HTMLValidator and it did not report issues, also the JS console does not show any errors, but reports a few warnings (like 'Expected declaration, but found '*' for CSS-declaration like '*cursor: hand;' etc., but nothing related to the stuff I do)
How are you loading the tab content? Is it in the page when it's downloaded, or are they loaded via Ajax?
If already present in the document, you should try hiding (display: none) the content div's - that way you won't see them all if the tab initialization fails (which is likely what is happening intermittently).
This sounds like it could be a timing issue - where are the tabs initialized? Make sure you have them in the document.ready function so you are sure jQuery and jQuery UI are fully loaded first.
After a failure you could try manually initializing the tabs from the console - the result (success or failure) should give some additional insight.
Also use Firebug to examine the content divs to see if they are getting changed by the tab initialization - there should be classes added.
Long story short:
We've had errors being logged concerning a JQuery/JQueryUI based system for some time. At it's core we're doing a pretty basic click link -> JQuery AJAX GET -> Open JQueryUI modal pattern.
The error we were getting appeared simple - "Object doesn't support property or method 'dialog'" - leading us to believe there was an error with JQueryUI. After expending a lot of time ruling out browser incompatibilities, bad code on JQuery's end, bad code on our end, angry code gods... we caught a lucky break. A 100% repro on one of the machines in the office.
Turns out the thing was riddled with adware - specifically [an older version of] easyinline - http://www.easyinline.com. When the user clicked any link a cascade of javascript files would be loaded, including reloading JQuery from Google's CDN.
For most links this isn't really a problem - they take you off the page anyway and everything reloads. But for our modals it meant that every modal link would stamp over our JQuery at the point the request was sent, resulting in the response trying to make use of the 'new' $ which would now be missing JQueryUI and any other plugins.
Initially we thought about making another global var ($$ or something) for 'our' JQuery and explicitly using that in our code instead of just $. The issue with that is that we were using a few other 3rd party tools which rely on $ and the adware-loaded $ is a different (older) version. So it's important that we preserve $ correctly.
Any ideas? I'm aware of JQuery's noConflict() method but after a cursory glance don't think it fits the bill.
Ultimately we've decided to re-establish our JQuery integrity when we receive any ajax responses (i.e. just before the open modal code is executed). All our ajax stuff is wrapped in our own handler so this was fairly easy to inject across the board.
Basically;
We have the original JQuery 'saved' - we've got it in-scope thanks to our handler but it could be easily put into a separate global (like $$) just after it is loaded. In our ajax response handler we've got a fairly straightforward check;
if (window.$ !== $$) {
window.$ = window.jquery = window.jQuery = $$;
}
This will reset the global jquery back to what it should be.
well this is just a work around and not a full fledged solution.
you can try multiple things here
1. if you have control over what the adware loads then just put in something like this if(!$) where they try to load the jquery
2. try loading your plugin at the end of the page
3.even if end of the page is not working. Try injecting the link(a script tag using document.write) to the plugins CDN in the Jquery document ready event. this would ensure that the plugins code would be loaded at the end when all the jquery is already loaded (not a preferred thing).
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.
I have a set of jqueryui tabs that, when clicked, load in their content dynamically. It works great, except that one of the pages uses a jquery plugin itself. This results in two issues:
The main page that holds the tabs throws an error when loaded because there is js that refers to elements that haven't loaded yet (those elements are in the external file that contains the code that relies on the plugin).
If I embed the js that triggers the plugin functionality into the external file, it is outside of the document.ready function from the main page and therefore isn't usable.
Basically I am looking for a technique that allows me to ajax load an external html file into the DOM while not crapping out the main page itself because JS that is already there is expecting HTML which is not yet there.
Thanks.
I haven't used it yet, but I think that this is what you are looking for
Listen
This plugin brings a clean, light solution, to websites with dynamic loaded content, or full of event bindings.
Intead of bound, handlers for events, are registered along with matching selectors.
And they'll still work for new added content.
This is achieved, using Event delegation, so the plugin will only work for events that bubble
You need to encapsulate your jquery code inside of the $(document).ready() function. If you're saying the code that's waiting to load via AJAX may or may not be loading at the same time as the parent page (i.e. a user has to click the tab to load it, vs. it being the default load) then you're design is bad and you'll have to rethink the approach. Basically you can't have code in your parent page referencing DOM elements that don't yet exist, and may not exist until your user clicks a tab.