Just upgraded a very old project from MVC 4 to 5 and now after the upgrade the Razor Partial views which were working fine no longer work.
By this I mean that in the partial views there is a Script file that is called at the bottom:
<script src="~/Scripts/simAvail.js" type="text/javascript"></script>
And this was loading the JS and in that file some JQuery added CSS etc as needed to the elements on the page. However after the upgrade this JS file is no longer loaded and I use this method on many pages in the project so wondered if anyone knows the reason why.
The data in the Partial view is loaded and displayed but all the styling and reading/posting of the changes via Ajax is no longer there as this is what the JS file adds to the page.
Thanks
I Managed to fix this it turns out that when the upgrade to MVC5 happened part of the process as detailed on the MS instructions was to re-install all the Nuget's. This part actually installed the latest versions of all the JS packages like JQuery/Knockout etc without me noticing.
This then caused there to be two versions of everything being loaded and thus caused the issue. SO I deleted the old version of the JS packages and back running.
I copied the navbar default sample from from the samples but without any changes it appears to be doing what I think is mobile format. The only thing I see is the brand tag to the left and the button to the right. My monitor is pretty big so it can handle the menu and it does when I view it online which you can visually see here. I can only assume that since I cut and paste from the demo code I have a setting somewhere else that is wrong but I have no idea where to look. I did make sure to run nuget and get the latest version of the code so I should match what is on the demo. Any ideas?
Update
The issue appears to be with VS2012 and debug mode. Using Visual Studio Development Server seems to be the problem. If I publish locally it works as expected. I thought it might be IE8 but realized it was VS2012 after I published the site.
Is there a way to work around this while using the debugger in VS2012?
Update 2
And somehow it is not working in IE8 again even after being published. Chrome seems to work fine. Must be something picky about IE8 that I need to code around.
Try to copy all the page html, then if it works cut unnecessary code.
Use this instead of your local bootstrap:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Looks like this was an issue with IE8 all along. I didn't think it was a browser issue so I never looked for IE8 nav problems but here is a link that documents the issue.
We have deployed our webapp, which was developed with JSF, Spring and Hibernate on Tomcat server in our internal network (intranet). When I test in my application in local it's working fine.
But once I deploy to DEV I come across style issues. When I have two dropdowns one after another, the top dropdown overlaps with another one.
This happens when I have Document Mode set to "IE7 standards." When I change Document Mode to "IE8 standards," everything works fine.
To force Document Mode to IE8 standards, I tried this meta tag in my section of the HTML document according to this link, but it didn't work for me:
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
How can I force my page to render according to IE8 standards on the intranet? Does my application render in IE8 standards on the internet?
EDIT :I see something in my develoer tools.Even though I kept my <meta> it after <head> but my primefaces styles and scripts are loading before to that.How can I resolve this?
Odd, this item was posted yesterday, not sure if it applies to your situation:
IE 8 will ignore the x-ua-compatible setting if it comes after the stylesheets. In order for IE to acknowledge the meta setting, put it at the top.
I am glad to tell I am finally able to resolve this issue by using this link in primefaces.And this post also helped to do it through entire application
http://blog.primefaces.org/?p=1433
When I add jqm-icon-pack-2.1.2-fa.css to my website, the jQuery UI fonts don't show. If I remove the reference, they show. I'm creating an MVC4 mobile application using Visual Studio 2012. Here is how I'm referencing the css files:
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile.structure-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile.theme-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jqm-icon-pack-2.1.2-fa.css")" type="text/css">
If I remove the last reference, the jQuery icons work but the Font Awesome icons don't work. I've tried to reorder the references and that didin't work. I've inspected the page with Firebug and I can't see a difference. I've made sure the paths are correct as well. I'd like to post a link to my website but it's inside an extranet so it can't be accessed. The best I can offer is I'm setting an input to type="search" and the search icon and clear text icon do not appear. Any help would be greatly appreciated!!
ANSWER: I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.
I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.
I am using Twitter Bootstrap and I want to use an "auto-suggest" which is not available in Bootstrap, whereas jQuery UI has its own methods for auto-suggest.
Can I use both? Will it overload the bandwidth?
Check out jquery-ui-bootstrap. From the README:
Twitter's Bootstrap was one of my favorite projects to come out of
2011, but having used it regularly it left me wanting two things:
The ability to work side-by-side with jQuery UI (something which
caused a number of widgets to break visually) The ability to theme
jQuery UI widgets using Bootstrap styles. Whilst I love jQuery UI, I
(like others) find some of the current themes to look a little dated.
My hope is that this theme provides a decent alternative for others
that feel the same. To clarify, this project doesn't aim or intend to
replace Twitter Bootstrap. It merely provides a jQuery UI-compatible
theme inspired by Bootstrap's design. It also provides a version of
Bootstrap CSS with a few (minor) sections commented out which enable
the theme to work along-side it.
just to update this, bootstrap v2 no longer conflicts with jquery ui
https://github.com/twbs/bootstrap/issues/171
Edit: as #Freshblood there are a few things that still conflict. However, as originally posted Twitter suggests that they are working on this and it largely works, specially compared to v1.
For future reference (since this is google's top answer ATM), to prevent jQuery UI from overriding bootstrap's or your custom style, you need to create a custom download and select the no-theme theme. That will only include jQuery UI's resets, and not overload bootstrap's style for various elements.
While we're at it, some jQuery UI components (such as datepicker) have a native bootstrap implementation. The native bootstrap implementations will use the bootstrap css classes, attributes and layouts, so should have a better integration with the rest of the framework.
In my limited experience I am coming across issues as well. It appears that JQuery elements (such as buttons) can be styled using bootstrap CSS. However, I am experiencing issues having created a JQuery UI tab and wanting to lock a bootstrap only input (using the input-append class) to the bottom of each tab, only the first sits correctly. So, JQuery tabs + Bootstrap buttons = probably not.
Bootstrap still doesnt work with Jquery UI, for example the modal.Bootstrap has nice style but as a framework with Twitter behind isnt that good.
If you're running into javascript namespace collisions, you can use Bootstrap's noConflict() function make it cede functionality to jQuery UI.
Although this question specifically mentions jQuery-UI autosuggest feature, the question title is more general: does bootstrap 3 work with jQuery UI? I was having trouble with the jQUI datepicker (pop-up calendar) feature. I solved the datepicker problem and hope the solution will help with other jQUI/BS issues.
I had a difficult time today getting the latest jQueryUI (ver 1.12.1) datepicker to work with bootstrap 3.3.7. What was happening is that the calendar would display but it would not close.
Turned out to be a version problem with jQUI and BS. I was using the latest version of Bootstrap, and found that I had to downgrade to these versions of jQUI and jQuery:
jQueryUI - 1.9.2 (tested - works)
jQuery - 1.9.1 or 2.1.4 (tested - both work. Other vers may work, but these work.)
Bootstrap 3.3.7 (tested - works)
Because I wanted to use a custom theme, I also built a custom download of jQUI (removed a few things like all the interactions, dialog, progressbar and a few effects I don't use) -- and made sure to select "Cupertino" at the bottom as my theme.
I installed them thus:
<head>
...etc...
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/cupertino/jquery-ui-1.9.2.custom.min.css">
<link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">
<!-- <script src="js/jquery-1.9.1.min.js"></script> -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/bootstrap-3.3.7.min.js"></script>
...etc...
</head>
For those interested, the CSS folder looks like this:
[css]
- bootstrap-3.3.7.min.css
- font-awesome.min.css
- style.css
- [cupertino]
- jquery-ui-1.9.2.custom.min.css
[images]
- ui-bg_diagonals-thick_90_eeeeee_40x40.png
- ui-bg_glass_100_e4f1fb_1x400.png
- ui-bg_glass_50_3baae3_1x400.png
- ui-bg_glass_80_d7ebf9_1x400.png
- ui-bg_highlight-hard_100_f2f5f7_1x100.png
- etc (8 more files that were in the downloaded jQUI zip file)
If don't store it locally and use the link that they provide you might have an improved performance.The client might have the scripts already cached in some cases. As for the case of jQueryUI i would recommend not loading it until necessary.
They are both minimized, but you can fire up the console and look at the network tab and see how long it takes for it to load, once it is initially downloaded it will be cached so you shouldn't worry afterwards.My conclusion would be yes use them both but use a CDN
Yes you can use both. js bootstrap from twitter is a collection of jquery plugins. There shohuldn't be any conflict with jQuery UI.
Regarding bandwidth overload, it really depends on how you handle the requests to load all of your js files. if you really dont want to make multiple requests to the server to request for each file, just append them together and minimize. Or you probably can get rid of some js bootstrap plugins you dont need. it is very modular.
Kendo UI has a nice bootstrap theme here and a set of web UI comparable to jquery-UI.
They also have an open source version that works nicely with the theme.
I have site developed using jquery ui, I just tried to plug in bootstrap for future development and styling but it breaks virtually everything.
So No they are not compatible.
Because this is the top result on google on jquery ui and bootstrap.js I decided to add this as community wiki.
I am using:
Bootstrap v3.2.0
jquery-2.1.0
jquery-ui-1.10.3
and somehow when I include bootstrap.js it disables the dropdown of the jquery ui autocomplete.
my three workarounds:
exclude bootstrap.js
or more to typeahead lib
move from bootstrap.js to bootstrap.min.js (strange, but worked for me)
The data-role="none" is the key to make them work together. You can apply to the elements you want bootstrap to touch but jquery mobile to ignore.
like this
input type="text" class="form-control" placeholder="Search" data-role="none"