Develop Reference

load two jQuery if not loaded

I was working on the jQuery plugin by using jQuery UI. In this script http://alexmarandon.com/articles/web_widget_jquery/
Author is only checking whether jQuery library added is or not. But I need to check for both jQuery and jQuery UI.
If not loaded then load it. When I tried to do this then due to synchronous process I get error jQuery/jQuery-ui is not defined can you please help me with that.
Thanks
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.10.2') {
console.log('In if of index js');
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
"https://code.jquery.com/jquery-1.10.2.js");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
loadui();
} else {
console.log('Index end of first if');
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
// main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
console.log('Index loaded');
// 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
loadui();
}
function script2LoadHandler() {
console.log('Index2 loaded');
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
main()
}
/******** Our main function ********/
function main() {
setTimeout(myFunction, 3000);
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
"js/scripts.js");
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
function myFunction(){
console.log("asdasdasdasdas");
}
function loadui(){
console.log('Loadui2');
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
"https://code.jquery.com/ui/1.10.4/jquery-ui.js");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
main();
}
})();

This is how to check whether library loaded or not
var s;
if (typeof jQuery === 'undefined'){
// jquery not loaded
s = document.createElement('script');
s.src = "https://code.jquery.com/jquery-3.2.1.js";
document.head.appendChild(s);
}
if (typeof jQuery.ui === 'undefined'){
// jquery ui not loaded
s = document.createElement('script');
s.src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js";
document.head.appendChild(s);
}
This is how to load one can load one after another when there is dependency.
var s;
if (typeof jQuery === 'undefined') {
// jquery not loaded
s = document.createElement('script');
s.src = "https://code.jquery.com/jquery-3.2.1.js";
document.head.appendChild(s);
// jquery load
s.onload = function() {
// jquery ui you cant load without jquery so
s = document.createElement('script');
s.src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js";
document.head.appendChild(s);
// jquery version
console.log(jQuery.fn.jquery);
// jquery ui load
s.onload = function() {
// jquery ui version
console.log(jQuery.ui.version);
}
}
}

As answered in this post you can do a condition by checking its type
if (typeof jQuery != "undefined"){ //check if jQuery Exists
if (typeof jQuery.ui != "undefined"){ //check if jQueryui library has been loaded
}
}

loading jquery library from javascript getting error $ is not defined

I have loaded my jquery library in my plug in from javascript and getting an error $ is not defined if I call my plug in anonymous function from another javscript page
Following is my work
(function () {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.11.3') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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();
// Call our main function
main();
}
/******** Our main function ********/
function main() {
// Add some validation here to make sure UI is not loaded etc...
jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js');
jQuery(document).ready(function ($) {
/******* Load CSS *******/
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "StyleSheet.css"
});
css_link.appendTo('head');
//loading plug in
"use strict";
$.fn.myplugin = function (options) {
var settings = $.extend({
//default
isstatic: false
});
var options = $.extend(settings, options);
var images = ['http://www.example1.com'/1.png, 'http://www.example2.com/final.gif'];
//Iterate over the current set of matched elements
return this.each(function () {
var obj = $('.div2');
obj.hide();
$(this).show();
$(this).click(function () {
obj.toggle("slow");
if (options.isstatic) {
$(".image-class").attr("src", images[0]);
options.isstatic = false;
}
else {
$(".image-class").attr("src", images[1]);
options.isstatic = true;
}
});
});
return options.isstatic = false;
}
});
}
})();
I am calling it using another file.js
$(document).ready(function () {
$('#mydiv').myplugin();
});
I am getting an error here $ is no defined how to remove this error may b I have done something wrong with jQuery variable or $ in javascript file

I guess you need jquery for further scripts in your page or for your plugin to run, so jquery reference should be the first one in the head, could you try replacing the part of your code
( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild(script_tag)
with
var head=( document.getElementsByTagName("head")[0] || document.documentElement ); head.insertBefore(script_tag,head.firstChild);

Can't use jquery after loading it dynamically

I'm loading data.js into my a.html page.
In my data.js, i am checking if a.html has jquery and loading it if not. Right after loading jquery i am making an ajax call but i am getting
$ is not defined
exception.
Here is my data.js
if(typeof jQuery=='undefined') {
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = 'http://localhost:8001/jquery-min.js';
headTag.appendChild(jqTag);
}
var url = 'http://127.0.0.1:5000';
$.ajax({
url: url,
success: function(data) {
$("#" + containerId).html(data);
},
error: function(e) {
console.log(e.message);
}
});
From developer console, i can see jquery is loaded. I can see it in both Resources and head tag.

The jQuery (and $ thus) isn't loaded yet when you make the AJAX call since you only just added the script tag to your DOM. After that it starts the downloading. Instead you should bind the onload event of script tag and perform the actions after it has been loaded.
Example
jqTag.onload = function() {
var url = 'http://127.0.0.1:5000';
$.ajax({
url: url,
success: function(data) {
$("#" + containerId).html(data);
},
error: function(e) {
console.log(e.message);
}
});
}
jqTag.src = 'http://localhost:8001/jquery-min.js';

change this Line :
if(typeof jQuery=='undefined')
to
if(typeof jQuery== undefined ) {

how to create a reusable javascript web-app from my HTML CSS and JS files

i have a working HTML file with CSS and JS files i want to create a web app with this.
i don't have any experience or idea how to create a webapp from what i have.
my code dosen't need any interaction with the server.
i have found this guide from this site
(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');
/******* 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);
});
});
}
})(); // We call our anonymous function immediately
1.) i understood till loading CSS but i did not get what the code is doing for loading a HTML file.
2.) is it possible to do a webapp with what i have and how..?
3.) i know css html js jq.......... is it important to know ajax or anything else for creating a web app.
thank you.

I'm not sure if I understand your question, but maybe if I try to describe what this script is doing, it will help you?
Basically, this script is (somewhat clumsily IMO) first loading jQuery, and then loading a stylesheet style.css and finally retrieving data from http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?. It assumes that you have a document element with the id "example-widget-container", which is where it will inject the html received from the JSON call.
If you clarify what exactly you're asking, then maybe I or someone else can help you some more.

Trying to build a widget using jquery and javascript

I'm currently working on a widget using javascript and jquery. Now what I want to create a widget button that when clicked, will start a chat with the person whose id is associated with the widget. On the main website it's just a call to the function that does that but with the widget I don't really know how to do it since I can't call my function from another website.
I've read a few tutorials on creating jquery widgets but I didn't fully grasp them because it seems that what the tutorial was teaching was to retrieve data from the host server which isn't really my intention. Also they quoted the use of JSON which I don't also fully grasp as it seems that JSON is a way of displaying objects and strings.
Anyway I need some guidance on how to achieve this.
So far this is what I put down :
(function () {
var jQuery;
if (window.jQuery == undefined || window.jQuery.fn.jquery !== '1.8.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.8.1/jquery.min.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () {
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
jQuery = window.jQuery;
main();
}
function scriptLoadHandler() {
jQuery = window.jQuery.noConflict(true);
main();
}
function main() {
jQuery(document).ready(function ($) {
var homeURL = 'http://www.reflap.com/';
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: homeURL + "assets/widget.css"
});
var $container = ('#mywebsite-container');
css_link.appendTo('head');
$.getJSON(homeURL + 'assets/js/anonymous.js', function (response) {
$container.append(response.html);
});
});
}
})();
NEW EDIT
This is what I attempted before.
The function in question is call chat and it takes 3 parameters.
So my first widget looked like this
<script src="http://www.mydomain.com/chatter.js"></script><a href="#"
onclick="Chatter.chat('1','user', null)" id="chat-widget">Chat now</a>
But that doesn't work.