I have written a widget and it works great, but right now I am giving my users a link to a remote script, a link to my script and a div to place on their page. I would like to reduce this to just a link to my script and the div. The remote link I want to include in my code below is
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Can anyone please educate me on how to add a second link in my code? I already link to a remote jquery and a remote stylesheet, but I am not sure how/where to include another remote link. I have tried a number of places and ways, but I keep breaking my page, haha. Thanks for any help offered.
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.12.4') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src", "//code.jquery.com/jquery-1.12.4.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function() { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main();
}
/******** Our main function ********/
function main() {
jQuery(document).ready(function($) {
/******* Load CSS *******/
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
});
css_link.appendTo('head');
/******* Load HTML *******/
var jsonURL = "//www.myurl.com/mssql.php/ws_nfy";
jQuery(document).ready(function() {
jQuery.ajax({
url: jsonURL,
success: searchCallback
});
});
function searchCallback(data) {
var ws_nfy = data.ws_nfy.records;
jQuery.each(ws_nfy, function(index, nfy) {
jQuery("#tabs ul").append('<li>' + nfy[2] + '</li>');
jQuery("#tabs ul").after("<div id='tabs-" + nfy[0] + "'>" + nfy[1] + "</div>");
});
$("#tabs").tabs();
};
});
}
})(); // We call our anonymous function immediately
You're checking if jQuery is already loaded before injecting it... Which is good. Now you should do the same for jQuery-UI.
So that's the same procedure...
Try this:
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.12.4') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src", "//code.jquery.com/jquery-1.12.4.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function() {
// For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
//main(); // Not now! Check for UI first.
checkUI();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
//main(); // Not now! Check for UI first.
checkUI();
}
// ========================== Check if jQuery-UI is already loaded
function checkUI(){
if(typeof(jQuery.ui) != "undefined"){
// UI is loaded already.
console.log("UI is defined");
console.log( typeof(jQuery.ui) );
main();
}else{
// UI is not loaded. Got to load it.
console.log("UI is NOT defined");
//console.log( typeof(jQuery.ui) );
var ui = document.createElement('script');
ui.setAttribute("type", "text/javascript");
// For UI
window.$ = jQuery;
ui.setAttribute("src", "https://code.jquery.com/ui/1.12.1/jquery-ui.js");
console.log(ui);
document.getElementsByTagName("head")[0].appendChild(ui);
if (ui.readyState) {
console.log( "READYSTATE" );
ui.onreadystatechange = function() { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
console.log( "STATELOADED" );
main();
}
};
} else {
console.log( "ELSE" );
jQuery(ui).on("load", function(){
console.log("UI loaded...");
main();
});
}
}
}
/******** Our main function ********/
function main() {
jQuery(document).ready(function($) {
console.log("jQuery: "+jQuery.fn.jquery+"\njQuery-UI: "+jQuery.ui);
console.log("Tabs element: "+jQuery("#tabs").length);
/******* Load CSS *******/
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
});
css_link.appendTo('head');
/******* Load HTML *******/
var jsonURL = "//www.myurl.com/api.php/ws_nfy";
jQuery.ajax({
url: jsonURL,
success: searchCallback
});
function searchCallback(data) {
var ws_nfy = data.ws_nfy.records;
jQuery.each(ws_nfy, function(index, nfy) {
jQuery("#tabs ul").append('<li>' + nfy[2] + '</li>');
jQuery("#tabs ul").after("<div id='tabs-" + nfy[0] + "'>" + nfy[1] + "</div>");
});
jQuery("#tabs").tabs();
};
});
}
})(); // We call our anonymous function immediately
I am building a widget to be deployed in any site as long as they add the script tag with the src pointing to the url I set. I am trying to use javascript to detect whether or not Bootstrap library has been loaded. If it is not loaded, then I will add references to Bootstrap CDN. But, the problem is that it always return me false, so the code will inject new bootstrap script tag, therefore having 2 bootstrap tag at the same time which causes my modal bootstrap not working.
First of all, when my widget first loaded, it will check whether jQuery is loaded.
$(window).load(function()
{
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var scriptTag = document.createElement('script');
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");
if (scriptTag.readyState) {
scriptTag.onreadystatechange = function () { // For old versions of IE
if (this.readyState === 'complete' || this.readyState === 'loaded') {
loadScript();
}
};
} else {
scriptTag.onload = loadScript;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(scriptTag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
loadScript();
}
});
This is where it checks whether bootstrap has been loaded. The bootstrap_enabled is always false.
function loadScript()
{
var jsLibraries = [];
var bootstrap3_enabled = (typeof $().emulateTransitionEnd == 'function');
if (!bootstrap3_enabled) {
var bootstrapCss = $("<link>",
{
rel: "stylesheet",
type: "text/css",
href: "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
});
bootstrapCss.appendTo('head');
jsLibraries.push("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js");
}
jQuery = window.jQuery.noConflict(true);
jsLibraries.push("https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js");
getScripts(jsLibraries, function () {
main();
});
}
function getScripts(list, fn) {
var cntr = list.length;
for (var i = 0; i < list.length; i++) {
$.getScript(list[i], function () {
--cntr;
if (cntr === 0) {
fn();
}
});
}
}
Can anyone tell me what goes wrong? Thanks in advance.
I have a widget that only works with one instance.
The problem I have is that if I have one instance of the widget on a page it works fine. If I have more than one instance on the page, only one instance works. The second instance does not work...
you can check this page for an example http://fullylinked.com/advert.php
From my troubleshooting, I have noticed the following
1. The placement ID of the second instance is not passed to the script.
2. Even if the default placement ID is used, I get an error saying
"Uncaught ReferenceError: jsonpCallback is not defined".
Unfortunately the jsonpCalback is defined because the first script works..
Please here are my code..
The Widget...
<script placementID = "37" src="placement.js" type="text/javascript"> </script>
<div id="widget-container_37"></div>
---- Second instance below this line -------
<script placementID = "36" src="placement.js" type="text/javascript"></script><div id="widget-container_36"></div>
NOW HERE IS THE .JS file
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main();
}
/******** Our main function ********/
function main() {
jQuery(document).ready(function($) {
/******* Load CSS *******/
/** var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "style.css"
});
css_link.appendTo('head');
/**** get host name ***/
var site_name = window.location.hostname;
/****** get user ID******/
var this_js_script = $('script[src*=placement]'); // get file name..*/
var placementID = this_js_script.attr('placementID');
/**var placementID = document.getElementById("adblabla_2").getAttribute("placementID");**/
if (typeof placementID === "undefined" ) {
var placementID = '23';
}
/******* Load HTML *******/
$.ajax({
url: 'processors/processor.php?placementID='+placementID,
data: {name: 'Chad', site: site_name},
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
success: function(data){
//alert(placementID);
$('#widget-container_'+placementID).html(data.message);
}
});
});
function jsonpCallback(data){
$('#widget-container_2').text(data.message);
}
}
})();
The reason is another then I thought, your code is already encapsulated, so its not calling twice the same main function, but it finds twice the same script tag, and thus gets the wrong parameter I think.
http://www.2ality.com/2014/05/current-script.html
Well you can try this code:
(function () {
// Localize jQuery variable
var jQuery,
//get current script
currentScript = document.currentScript || (function () {
var scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
})();
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main();
}
/******** Our main function ********/
function main() {
jQuery(document).ready(function ($) {
/******* Load CSS *******/
/** var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "style.css"
});
css_link.appendTo('head');
/**** get host name ***/
var site_name = window.location.hostname;
/****** get user ID******/
var this_js_script = $(currentScript); // get file name..*/
var placementID = this_js_script.attr('placementID');
/**var placementID = document.getElementById("adblabla_2").getAttribute("placementID");**/
if (typeof placementID === "undefined") {
var placementID = '23';
}
/******* Load HTML *******/
$.ajax({
url: 'processors/processor.php?placementID=' + placementID,
data: {name: 'Chad', site: site_name},
dataType: 'jsonp',
jsonp: 'callback',
success: function (data) {
//alert(placementID);
$('#widget-container_' + placementID).html(data.message);
}
});
});
function jsonpCallback(data) {
$('#widget-container_2').text(data.message);
}
}
})();
PS: its always very useful when you build up a testcase on http://jsfiddle.net/
First off, I'm very limited in my knowledge of using Backbone outside of a few tutorials, so thanks in advance to anyone who offers any assistance. I am using JQuery and Backbone to basically set up the page for responsiveness and hidden sidebar navigation.
I am getting "_.extend is not a function", "Uncaught TypeError: BerlinConnectView is not a function" and "Cannot read property 'extend' of undefined" errors when my page renders AT random (I change nothing and one moment I get one error, reload and get another a minute later).
Hoping someone can look at my code and offer some assistance as I am now days into looking at the same code with no solution.
My file structure is as such:
js
Helpers
--helpers.js
Vendor
--backbone.js
--jquery.js
--require.js
--underscore.js
Views
--BerlinConnectView.js
main.js
BerlinConnectView.js:
//BerlinConnectView.js
define([
'vendor/jquery',
'vendor/underscore',
'vendor/backbone',
'helpers/helpers'
], function($, _, Backbone, helpers) {
return Backbone.View.extend({
'el': 'body',
'events': {
'click .scroll a[href*=#]': 'scrollToAnchor',
'click .slate.dimmed, .thelightbox, .sidebar-container li.internal, .nav-links ul li.internal': 'onLickLightboxLink',
'click .lightbox .close, .lightbox-container .close-lightbox, .lightbox .lightbox-overlay, .dark-overlay': 'closeLightbox',
'click .sidebar-control': 'toggleSidebar',
'click .sidebar .close': 'closeSidebar',
'mousedown button[data-track]': 'onClickAnylyticsLink',
},
'render': function() {
var self = this;
// Set high res images if user is on retina
self.setRetinaInlineImages();
// Check Scroll Position
self.checkScrollPosition();
// Check Scroll Position
self.outsideLinks();
// Check if mobile
self.isMoblie();
// Creates a sticky menu
self.stickyMenu();
//
self.videoHider();
// self.checkHash();
},
// checkHash:function() {
// var self = this;
// var hash = window.location.hash.replace('#','');
// if(hash.length === 0) return;
// self.openLightbox(hash);
// },
'videoHider': function() {
var self = this;
// setTimeout(function() {
// $('.video-hero .logo').addClass('fadeIn');
// }, 12000);
setTimeout(function() {
$('.video-hero').addClass('fadeOut');
}, 1000);
$(".video-hero video").bind("ended", function() {
$('.video-hero').addClass('backgroundAdded');
});
},
'isMoblie':function() {
var self = this;
var ismobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent.toLowerCase());
if (ismobileDevice)
{
$('*').css("background-attachment", "scroll")
$('.mobile').removeClass("hidden")
$('.desktop').addClass("hidden")
}
},
'outsideLinks':function() {
var self = this;
$(document.links).filter(function() {
return this.hostname != window.location.hostname;
}).attr('target', '_blank');
},
'trackEvent': function (section, area, action) {
return _gaq.push(['_trackEvent', section, area, action]);
},
'onClickAnylyticsLink':function (ev) {
var self = this;
var $target = $(ev.target);
if (ev.target.tagName !== 'A') {
$target = $target.closest('a');
}
var href = $target.attr('href');
var parts = $target.attr('data-track').split(':');
self.trackEvent(parts[0], parts[1], parts[2]);
},
'toggleSidebar': function () {
var self = this;
var $body = $('body');
$body.toggleClass('active');
// document.location.hash = '!';
},
'closeSidebar': function () {
var self = this;
var $body = $('body');
$body.removeClass('active');
// document.location.hash = '!';
},
'stickyMenu': function () {
var self = this;
var $header = $(".menu"),
$clone = $header.before($header.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = $(window).scrollTop();
var height = $('.hero, .sub-hero, .video-hero').height();
$(".menu.clone").toggleClass("down", (fromTop > height));
});
},
'onLickLightboxLink': function (ev) {
var self = this;
var $target = $(ev.target);
if (!$target.hasClass('slate, thelightbox, sidebar-container li.internal, nav-links ul li ')) {
$target = $target.closest('.slate, .thelightbox, .sidebar-container li.internal , .nav-links ul li');
}
var elementId = $target.attr('id');
self.openLightbox(elementId);
},
openLightbox: function(id) {
// document.location.hash = '!';
$('.lightbox.' + id).removeClass('hidden');
$('.dark-overlay').removeClass('hideme');
$('.lightbox .lightbox-overlay').removeClass('hidden');
$('body').css("overflow", "hidden");
// window.location.hash = id;
},
'closeLightbox': function () {
var self = this;
var $lightbox = $('.lightbox');
$lightbox.addClass('hide');
$('.dark-overlay').addClass('hide');
$('body').css("overflow", "auto");
setTimeout(function() {
$lightbox.addClass('hidden');
$('.dark-overlay').addClass('hideme');
$lightbox.removeClass('hide');
$('.dark-overlay').removeClass('hide');
}, 500);
// document.location.hash = '!';
},
'setRetinaInlineImages': function () {
var self = this;
var $retinaImages = self.$('img.retina-image, img.col-image');
if (window.devicePixelRatio > 1) {
$retinaImages.each(function() {
var src = $(this).attr('src');
if (src) {
src = src.replace(/(\.)(jpg|png)($|\?)/, '#2x.$2');
$(this).attr('src', src);
}
});
}
},
'scrollToAnchor': function(ev) {
var self = this;
var hash = $(ev.target).closest('a').attr('href');
var $anchor = $(hash);
if($anchor.length) {
ev.preventDefault();
self.$el.animate({scrollTop:$anchor.offset().top}, 500, function () {
window.location.hash = hash;
});
}
},
'checkScrollPosition': function() {
var self = this;
function checkPosition () {
var position = $(window).scrollTop();
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var height = $('.hero').height();
var footerHeight = $('footer').height();
Backbone.Events.trigger('scroll', position);
if (position + windowHeight == documentHeight) {
$(".menu.clone").toggleClass("down");
$("body").removeClass('active');
}
}
throttledPositionCheck = _.throttle(checkPosition, 250);
$(window).on('scroll', throttledPositionCheck);
}
});
});
Main.js
//main.js
require([
'vendor/jquery',
'vendor/underscore',
'vendor/backbone',
'views/BerlinConnectView'
], function($, _, Backbone, BerlinConnectView) {
var berlinConnectView = new BerlinConnectView();
berlinConnectView.render();
});
Index.html
<head>
<!--Header Content
...................
...................
...................
-->
<!-- Scripts -->
<script type="text/javascript" src="/js/vendor/require.js"></script>
<script type="text/javascript">
window.require = requirejs.config({
'baseUrl': '/js',
'context': 'bc'
});
</script>
<script type="text/javascript" src="/js/main.js"></script>
<!-- Google Analytics
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-82811-13']);
_gaq.push(['_setDomainName', 'myberlinconnect.de']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
-->
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="bc" data-requiremodule="vendor/jquery" src="/js/vendor/jquery.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="bc" data-requiremodule="vendor/underscore" src="/js/vendor/underscore.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="bc" data-requiremodule="vendor/backbone" src="/js/vendor/backbone.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="bc" data-requiremodule="views/BerlinConnectView" src="/js/views/BerlinConnectView.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="bc" data-requiremodule="helpers/helpers" src="/js/helpers/helpers.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/maps-api-v3/api/js/22/2/common.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/maps-api-v3/api/js/22/2/util.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/maps-api-v3/api/js/22/2/stats.js"></script>
</head>
So this can happen depending on how you use require to load scripts. require will load files asynchronously whenever possible, unless you define dependencies.
Your code as written seems to be running into race conditions, in that your vendor libraries are not being loaded before your application code executes.
You can use use require.config to define dependencies and load vendor libraries synchronously.
In your main.js:
// main.js
require.config({
// shim allows us to configure dependencies for scripts
// that do not call define() to register a module
// e.g. vendor libs, like jQuery, underscore, Backbone, etc...
shim: {
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
}
},
paths: {
// vendor libs
jquery: 'vendor/jquery',
underscore: 'vendor/underscore',
backbone: 'vendor/backbone'
}
});
require([
'backbone',
'views/BerlinConnectView'
], function( Backbone, BerlinConnectView ) {
// at this point, $, _, and Backbone are already loaded and
// available within the `window` object
var berlinConnectView = new BerlinConnectView();
berlinConnectView.render();
});
In your BerlinConnectView.js:
define([
'helpers/helpers',
], function(helpers) {
// at this point window.Backbone should exist
// so you should be able to refer to it globally
return Backbone.View.extend({
'el': 'body',
// ...
// ...
});
After #jiminikiz help I was able to realize that I was calling dependencies both in my HTML and in the main.js. I removed the HTML calls so that my scripts looked as such:
index.html
<!-- Scripts -->
<script type="text/javascript" src="/js/vendor/require.js"></script>
<script type="text/javascript">
window.require = requirejs.config({
'baseUrl': '/js',
'context': 'bc'
});
</script>
<script type="text/javascript" src="/js/main.js"></script>
After removing calls to dependencies elsewhere the code executed correctly with no errors.
Thanks for the point in the right direction #jiminikiz!
I am creating a widget to be embedded on a third party website. I am dynamically creating the script tags to load the version of jQuery and my other in house java script files. While i am creating the script tags dynamically it throws me an errors:
1. Uncaught TypeError: Cannot read property 'fn' of undefined
2. Uncaught Error: Bootstrap's JavaScript requires jQuery
I know the 2nd error means that your jQuery is not loaded. But when i look at the script tags in my element tab i can see the jQuery script tag on top.
I am following this tutorial:
http://alexmarandon.com/articles/web_widget_jquery/
And Below is my code:
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.11.1') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main();
}
/******** Our main function ********/
function main() {
jQuery(document).ready(function($) {
/******* Load CSS *******/
var script2URL = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js";
var script3URL = "http://localhost:8080/iam/scripts/bootstrap3-typeahead.min.js";
var script4URL = "https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js";
var script5URL = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js";
var scripts = [script2URL,script3URL,script4URL,script5URL];
var cssURL1 = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";
var cssURL2 = "http://localhost:8080/iam/css/typeaheadjs.css";
var cssURL3 = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css";
var cssURL4 = "http://localhost:8080/iam/css/typeahead_ext.css";
var cssURL5 = "http://localhost:8080/iam/css/ePass.css";
var cssURLs = [cssURL1,cssURL2,cssURL3,cssURL4,cssURL5];
//This function loads all the CSS Files
for(var iCount=0;iCount< scripts.length;iCount++){
var script_link = $("<script>", {
type: "text/javascript",
src: scripts[iCount]
});
script_link.appendTo('head');
}
//This function loads all the CSS Files
for(var iCount=0;iCount< cssURLs.length;iCount++){
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: cssURLs[iCount]
});
css_link.appendTo('head');
}
/******* Load HTML *******/
var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?";
$.getJSON(jsonp_url, function(data) {
$('#example-widget-container').html("This data comes from another server: " + data.html);
});
});
}
})();