I have a project built on top of Zurb Foundation, now I need to use some FuelUX components such as "wizard" and "tree". For that I include Twitter Bootstrap library (2.3.2 version downloaded from Bootstrap site) and also include "all.min.js" from FuelUX, when I use the same HTML markup as come in index.html but for some reason it doesn't work. So I tried to fire the plugin using $("#MyWizard").wizard() and get this error:
TypeError: $(...).wizard is not a function
$("MyWizard").wizard();
Any ideas in how to get this work?
How I include scripts
This is the order in which I include scripts:
<script type="text/javascript" src="/bundles/product/js/bootstrap/bootstrap.min.js?0.1"></script>
<script type="text/javascript" src="/bundles/product/js/fuelux/all.min.js?0.1"></script>
<script type="text/javascript" src="/bundles/stock/js/jquery-impromptu.js?0.1"></script>
<script type="text/javascript" src="/bundles/product/js/product.js?0.1"></script>
<script>
$("MyWizard").wizard();
</script>
This was also posted to https://github.com/ExactTarget/fuelux/issues/259 and from what I'm seeing, being careful to follow the instructions at https://github.com/ExactTarget/fuelux/wiki/Using-Fuel-UX#simple-integration-into-a-page should straighten things out. Hope this helps!
Related
I'm a newbie to web dev, so please stick with me. I know this question has come up a lot (or a similar deviation), but after a couple of hours of searching I have not found an answer that works for me.
I've made sure the JQuery file is loaded first, and tried multiple versions to no avail. Whenever I try to load the Magnific Popup script, I get (TypeError: $ is not a function) on line 50. I've had a look and tried to change $ to JQuery to no avail, so it's back to normal now.
Here's the Magnific Popup code block:
var mfp,
MagnificPopup = function(){},
_isJQ = !!(window.jQuery),
_prevStatus,
_window = $(window), <<<<<< ERROR HERE
_document,
_prevContentType,
_wrapClasses,
_currPopupType;
And the relevant html:
<head>
<link rel="stylesheet" href="css/magnific-popup.css">
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
</body>
looks like its not picking your jquery library from CDN..
make sure that you have the network in your system or have access to jquery CDN url
if all above is fine then you try with http in CDN url like below. this is working for me
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Try to load your jquery file from your own (local) machine. Hopefully, this will work well.
Also, it would be helpful for me if you please let me know that you are not getting 404 for the JQuery file from the CDN.
I found this really cool plugin for Bootstrap that measures password strength. It looks good, and I want to use it, but I can't figure out how to make it work. According to the Github page, all you have to do to use it is "Just invoke the plugin on the password fields you want to attach a strength meter to.". Unfortunately, they don't tell you where to put the files, nor which javascript files you actually need to use.
I've been Googling every possible iteration of ways to add or install plugins for Bootstrap, and have come up empty each time. Does anyone have an answer here?
I guess the github pages can be confusing with all those source files. All you need to do is get the latest minified file from this page:
https://github.com/ablanco/jquery.pwstrength.bootstrap/tree/master/dist
Download it, upload it, and load it into your HTML somewhere after your original bootstrap javascript file using
<script type="text/javascript" src="file/location/pwstrength-bootstrap-1.2.3.min.js"></script>
When you've done that, add the following javascript code to invoke the plugin on a class or element:
$(document).ready(function(){
$(':password').pwstrength();
});
Just include the plugin css and javascripts after defining bootstrap in head of your html page.
something like this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="your plugin source"></script>
To add to previous solutions: also make sure to include jquery in your html because it's required by bootstrap's js.
I'm puzzled by what might be a really simple thing to do or understand.
So I downloaded jQuery UI package with the themeroller with these settings. I only chose datepicker and a custom theme. But when I try to use it the calendar doesn't look right:
I'v added these to my test page:
<link rel="stylesheet" type="text/css" href='Scripts/jqueryui/css/redmond/jquery-ui-1.10.4.custom.min.css' />
<script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/jquery-1.11.0.min.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/jqueryui/js/jquery-ui-1.10.4.custom.min.js") %>'></script>
After investigating more, I realized that the custom css file that was created for me doesn't include the class .ui-datepicker.
So the question is, is this by design? Do I need to add still another base jquery ui css-file? I did not see any mention of this if that is the case. And why is that not included in my package if I need to do that? Or is this a bug? What should I do to get a package that only includes the css/js I need for only datepicker?
Thanks!
Try using this Google Code source
EDIT:
got it. Simply u need to select the Widget tick like this page
I'm currently running a couple different jQuery libraries on my website, here
The rotating banner is from http://codecanyon.net/item/li-jquery-sliderimage-rotator/full_screen_preview/153638
Which has me include these files
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/li-slider-animations-1.1.min.js"></script>
<script type="text/javascript" src="js/li-slider-1.1.min.js"></script>
I also am using fancybox (http://fancybox.net/howto) and include the necessary javascript files.
I got everything working fine until I tried to use this plugin, (http://plugins.jquery.com/project/tipsy)
I could not get that tipsy plugin to work without removing these javascript files from my header
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
I realize I'm probably doing something wrong by including all of these different jquery libraries, but how can I go about having everything work at the same time even though they appear to be using different files.
I included my site URL so you can check the source file to see if there is something I should fix and what I should do so I can add the correct tipsy files.
Thanks
You cannot use multiple versions of the jQuery library on the same page.
How would a script know what library to use?
Only include 1 jQuery script and find updated / other jQuery plugins if they are incompatible.
Or write the needed functionality yourself.
I just implemented a multi-language mod onto my website.
Problem is that there seems to be a conflict between the javascript files from the language mod and the javascript files that already were on the page.
<!-- language files here -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/translationEngine.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.translate-1.3.9.min.js"></script>
<script>var browserlang = 'en';</script>
<!-- Javascript -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="js/jquery.flow.1.2.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/concept.js"></script>
js/jquery-1.3.2.min.js is what makes the 3 image slider on the homepage work, but... it seems to also be interfering with the functions of the translator.
If u remove js/jquery-1.3.2.min.js from the page, the translator works fine, but the slider no longer works.
removing js/jquery-1.4.2.min.js from the page doesnt make the translator work either, in fact it seems to cause more errors in the back.
Can someone guide me in the right direction that would allow me to make the language translator and image slider both work?
http://filefx.com
Thanks :)
The short version is to remove this:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
And update your plugins, there are likely 1.4.x versions out there for each of them. By including jQuery a second time, like you are currently, it'll wipe out plugins and cause all sorts of issues...the first step is removing the second (hopefully the older) instance.
Edit: Here's an updated version of jFlow called jFlow plus that works with 1.4.2.
Check out the jQuery noConflict function. This function tells jQuery to relinquish it's control over the $ variable. This way, other libraries can use it.
The online docs give a pretty good guide as to how to use this function. It saved me a few times.
Example from the online docs:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
Basically, once you call noConflict, you can still use jQuery, just use it using the jQuery variable name instead of $.
Hope this helps!
I have alway solved conflicts between two versions of jquery e.g. jQuery 1.3.2 and jQuery 1.4.2 on the same page using iframes but i recently found out that you can use version jquery-1.5.1.js alone and everything works fine.
I change all the .js file on the page used from below code:
<script>
var K = jQuery.noConflict();
alert(K);
jQuery(document).ready(function () {
alert("Bye");
});
</script>
It works fine now.
I ended up just changing the order in which the libraries loaded.
I let all the jquery libraries load first, from newest to oldest. Then i called for the javascript files that rely on jquery.
It works fine now.