Run custom code after jQuery has been loaded via Modernizr
Question
I'm in the process of developing a new site and have decided to use Modernizr for the first time. I'm fairly sure of the general gist of how it works however, I was looking for some advice regarding the best practise when it comes to loading jQuery and then running jQuery code.
I currently have the following that is loaded as the last item on my page:
Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
complete: function(){
if( !window.jQuery){
Modernizr.load('/scripts/jquery-1.11.1.min.js');
}
}
},
{
load: '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js',
complete: function () {
if ((typeof $().emulateTransitionEnd == 'function') == false) {
Modernizr.load('/scripts/bootstrap.min.js');
}
}
}
]);
This attempts to retrieve jQuery from a CDN and if it is unable to do so, loads a local version. It then repeats the process with the Javascript required for my bootstrap components on my site.
The problem I have is that I then have some jQuery code directly following this:
$(document).ready(function () {
$('.wishlist-toggle').click(function () {
var nodeId = $(this).data("node");
var id = $(this).data("id");
var type = $(this).data("type");
var addTo = $(this).data("add");
var list = $(this).data("list");
var removeFrom = $(this).data("remove");
var storedCookie = getCookie("wishlist");
var jsonString = null;
var found = false;
...
For some reason despite being after the whole jQuery loading declaration I am getting an error in my console specifying that $ is undefined. This would usually suggest that at the point at which by custom script is called, jQuery is not loaded.
My question is, how would this usually be done and what is considered the best practise in this case to ensure that jQuery truly is loaded before attempting to run the custom code.
Any help, tips or pointers would be greatly appreciated.
1 answers
solution1
0 ACCPTED 2014-09-30 18:27:53
Try
var _jquery = function () { $(document).ready(function () { // do jquery stuff console.log("jQuery loaded"); $("#jq").html("jquery version " + jQuery().jquery + " ready") }) }; var _bootstrap = function () { // do bootstrap stuff console.log("bootstrap loaded"); $(".btn").trigger("click") .promise().done(function(el) { setTimeout( function() { $(el).trigger("click") }, 3000 ) }); }; var _load = function (url1, url2, test, callback) { var script = document.createElement("script"); script.src = url1; script.type = "text/javascript"; var head = document.getElementsByTagName("head")[0]; head.appendChild(script); setTimeout(function () { if (test()) { _load(url2, null, function() {return false}, callback) } else { callback() } }, 3000) }; var _scripts = [ ["//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" , "//code.jquery.com/jquery-1.11.1.min.js", function () { return !window.jQuery }, _jquery], ["//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js", function () { return (typeof $().emulateTransitionEnd == 'function') == false }, _bootstrap] ]; _scripts.forEach(function (v) { _load(v[0], v[1], v[2], v[3]); });
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- Include all compiled plugins (below), or include individual files as needed --> <!-- Small modal --> <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div id="jq"></div> </div> </div> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.