Wait for Javascript load from CDN - javascript

I have this block of javascript in a Rails app, with turbo-link enabled:
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/be7019ee387/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" charset="utf-8">
var ready = function() {
setTimeout(function() {
$('#table-products').dataTable();
}, 100);
};
$(document).on('ready, page:change', ready);
</script>
Usually, I get the error that the .dataTable() function is undefined, and a refresh can solve the problem. However, refresh is not always pleasant, so I added the setTimeout for 100ms to wait for the js from CDN to load.
So far I don't see any issue in my dev environment, but I am afraid that if there is a slow client, the js won't finish loading within 100ms.
I wonder if there would be a better way to solve this, like checking if the two js files have been loaded, similar to $(document).ready for DOM.
Thanks!

There's actually a gem for this. It's really easy to use and comes with bootstrap styling options. This is more elegant than what you have because it doesn't rely on CDNs and instead leverages the Rails asset pipeline.

Try
<head>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/be7019ee387/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" charset="utf-8">
$.holdReady(true);
var s = setInterval(function() {
if ($.fn.hasOwnProperty("DataTable")
&& typeof $.fn.DataTable === "function") {
$.holdReady(false);
clearInterval(s);
};
}, 1);
$(document).ready(function() {
$("#table-products").dataTable();
});
</script>
</head>
jsfiddle http://jsfiddle.net/guest271314/RZVRL/
See https://api.jquery.com/jQuery.holdReady/

The most elegant way I can find is to move all the cdn links to the layout page in the , so that all the libraries will be loaded and cached for the entire user experience.

Related

Can you automatically choose between two <script src=""> files?

So lets say you're implementing a website that uses jQuery HEAVILY. You could put some code like
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and import it from some repository. If you're developing it without internet you could download the source and store it somewhere locally, then access it with some script like
<script src="js/jquery-1.10.2.min.js"></script>
But is there a simple way to have both? Such as if you can reach the repository use that, but if you can't use the local copy.
Check for a variable in the first script. If it is not found, use document.write to create the second script tag. Here is an example for jQuery I found here:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
The fail-safe way of referencing scripts on a CDN is to link to the local copy only if the CDN has failed for any reason.
The way to do this is simply to check if anything within the script has executed. For jQuery this is simply checking whether jQuery exists:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
if (!window.jQuery) document.write('<script type="text/javascript" src="/path/to/jquery-ver.sion.min.js"><\/script>');
</script>
Personally I have never had a script fail due to a CDN being offline, however I have had periods of internet outage. With scripts set up with a proper fallback, I've been able to continue local development as the pages still work without needing to connect to a CDN.
You can add resources dynamically if required one is not available. for eg:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
if( typeof $ != "function")
{
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'js/jquery-1.10.2.min.js';
head.appendChild(script);
}
</script>
</head>
<body>
</body>
</html>
Though JQuery hosted on Google CDN should be safe enough, the codes below can be used as a fallback with requireJS.
requirejs.config({
enforceDefine: true,
paths: {
jquery: [
'//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js',
'js/jquery-ui.min.js'
]
}
});
require(['jquery'], function ($) {
});

javascript tab function not working

I am trying to make wall script like google+ but i have one problem. Users can share pictures and videos I've created a base. However, the tab does not work currently. Reason ... <script type="text/javascript"> </ script> I think it is relevant. .... tags into the tags I add the script call. But by far misunderstood. but I could not. I'm giving you my code below.
Head
<head>
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery.min2.js"></script>
<script src="jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
</head>
Call javascript function This function for post cancel or submit
<script type="text/javascript">
$(function(){
$(".content").focus(function(){
$(this).animate({"height": "55px",}, "fast" );
$("#button_hide").slideDown("fast");
return false;
});
$("#cancel").click(function(){
$(".content").animate({"height": "30px",}, "fast" );
$("#button_hide").slideUp("fast");
return false;
});
});
</script>
and this javascript function is for Photo and video click open box also this function is not working now.
<script type="text/javascript">
$(document).ready(function(){
$(".oculto").hide();
$(".MO").click(function(){
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")){
$(nodo).hide();
return false;
}else{
$(".oculto").hide();
$(nodo).fadeToggle( "slow" );
return false;
}
});
});
</script>
This link is my tutotiral link. If you check this page you can understand me. If you click photo photo share panel will not open also video share panel not working.
http://goo.gl/i98FNX
What is there in this file js/jquery.min2.js? If it is the jquery library, please remove it because you have a google cdn code in the same file. In addition, you are using a old version of jquery. Since 1.4 many things have changed in jQuery so, please use the latest version of jquery http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
I think that leads up the tab portions. Just like facebook. I understand that you have used bubble box. If you want three different areas. For example: status, video, link to share, create the base area. This will provide you more convenience.
You can write your php code easier.
Because sharing is currently part of three different courses you want to use a single form. But you can spend more time for it. However, creating three forms that will be easier if you make sharing.
Share your theme really nice congratulations. However troubling.
I've studied your own scripts. Bonding between the lines of the script too much. This is not true. Create a new js file and then type into the function you are using. Gators later use the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/yourscript.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
In this way, your problems will disappear.

Jquery Conflict which gives error

Working on an project which has variety of functionality in it such as,
Google translator
Image Slider [galleriffic used]
Popup window [Shadow box used]
JavaScript horizontal menu bar*
Now we are getting jquery conflict in it and error message such as
I know such message are occurred when the code doesn't find the jquery file but the files is present .
Here are the list of files used in the project
This is needed by the google translator
1.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
3. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
4. <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
5. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
6. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
7. <script type="text/javascript" src="/scripts/common.js"></script>
This one is for the slider
1. <script type="text/javascript" src="/SliderBox/js/jquery-1.3.2.js"></script>
2. <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
3. <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
This is for the popup window
1. <script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
2. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
3. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
4. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
This is needed by the horizontal menu
1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
2. <script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
3. <script src="../scripts/settingsEN.js" type="text/javascript"></script>
I have optimized all these and have included only one jquery file of jquery-1.9.1.min.js
but still not able to clear the conflict
Here is the sequence used by me
1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
2.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
3. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
4. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
5. <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
6. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
7. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
8. <script type="text/javascript" src="/scripts/common.js"></script>
9. <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
10. <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
11.<script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
12. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
13. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
14. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
15.<script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
16. <script src="../scripts/settingsEN.js" type="text/javascript"></script>
I have tried all these
http://api.jquery.com/jQuery.noConflict/
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUsing_jQuery_with_Other_Libraries%26redirect%3Dno
http://www.w3schools.com/jquery/jquery_noconflict.asp
I have tried all these
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
or
<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>
or
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
but still not able to get the Solution
When I remove this code of slider, every thing works fine , no errors but the slider will not work
<!--script for slider--->
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '', 'float' : 'right'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
random: true,
prevLinkText: '',
nextLinkText: '',
nextPageLinkText: '',
playLinkText: '',
pauseLinkText: '',
prevPageLinkText: '',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
<!--script end--->
Can anyone help?
I read your question and search on site of every plugins that you use.
Any List Scroller
Shadowbox.js
Prototype
Galleriffic
If something is missing plugin, publish it please.
I had the similar problem and I not used the $.noConflict(true);
If you project is the server that when this is open for take the file html.
I suggest for you that you insert the calling for external div in one file html.
And in every file html you can write the script with
$(document).ready(function () {
.............
});
You can't calling the file external in every file html because this create a normal conflict.
AND..
I suggest this site for look the last libraries... Google-libraries-last
AND..
I have optimized all these and have included only one jquery file of jquery-1.9.1.min.js but still not able to clear the conflict Here is the sequence used by me
This is better.
AND:::
For the error TypeError: $ is not a function depends how this function is implemented or write.
Possible error is ; or {, } , ( , )
This happens because another javascript library has been loaded and has overwritten the object $() shortcut for jQuery.
So when we include other javascript libraries besides jquery, we are exposing the jquery library to conflicts.
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $.
One solution if we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict() like:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ follow here.
});
// Code that uses other library's $ follow here.
</script>
Another solution is to reassign jquery object $() back to jquery library, wrapping up our call inside a function that reassigns $() object. Thus we make sure our code isn’t messed with Prototype, Scriptaculous, etc.
( function($) {
// Your jquery code
} ) ( jQuery );
Suppose:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
( function($) {
// Assigning $ again to jquery
$(document).ready( function() { alert("Now you can use to use '$' in your jquery code"); } );
} ) ( jQuery );
//this will fail
$(document).ready( function() { alert('This fails because $ has been modified outside jquery'); } );
</script>
This approach is a self-calling anonymous function style to avoid conflicts with jQuery. If you don't use it then you would have to type jQuery() instead of its object $().
Example:
$(document) //won't work
jquery(document) //will work
Example on JSFIDDLE.NET
Finally
Typeerror for null
Look on jquery-documentready-controlid-is-null
try to use .noConflict() in jQuery
<script src="....../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_8_3 = $.noConflict(true);
</script>
<script type="text/javascript" src="...../jquery-1.4.2.js"></script>
<script type="text/javascript">
var jQuery_1_4_2= $.noConflict(true);
</script>
I went with this flow and the error was solved. Didn't need any .noConflict() and on!!!
1)<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2)<script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
3)<script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
4)<script type="text/javascript" src="/scripts/jquery.bt.js"></script>
5)<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
6)<script type="text/javascript" src="/scripts/common.js"></script>
7)<script src="/scripts/jQuery/insert_active_flash.js" type="text/javascript"></script>
8)<script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
9)<script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
10)<script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
11)<script type="text/javascript" src="/scripts/jquery.als-1.1.min.js"></script>
12)<script type="text/javascript" src="/scripts/settingsEN.js"></script>
The minified version javascript where having conflict with prototype.js. I just removed the prototype.js file and arranged all reference file in sequence [Sequence matters a lot]
Now the error is removed I was still wondering what was the actual issue with prototype.js ???

Multiple jQuery includes in a document

I have a document which uses old jQuery and I need new jQuery for a particular plug-in.
My document structure looks like this:
<html>
<head>
<script type="text/javascript" src="jQuery.old.js"></script>
</head>
<body>
<script>
$("#elem").doSomething(); // use old jQuery
</script>
<!-------- My plugin begins -------->
<script type="text/javascript" src="jQuery.new.js"></script>
<script type="text/javascript" src="jQuery.doSomething.js"></script>
<script>
$().ready(function(){
$("#elem").doSomething(); // use new jQuery
});
</script>
<div id="elem"></div>
<!-------- My plugin ends ---------->
<script>
$("#elem").doSomething(); // use old jQuery
</script>
</body>
</html>
I have googled for this question but found nothing that would look like my case (I need first to load old javascript (in the head) and THEN new (in the body). By the way, in the Firefox looks like old jQuery lib loads and scripts that depends on it works, but script that uses new version, and in IE and Chrome everything is exactly opposite.
To start, you should try running all the plugins under the latest version of jQuery - you may find you can use just the one latest version.
If you cannot do this, you can run in compatibility mode. Here is how.
<script src="jquery-1.3.2.js"></script>
<script>
var jqueryA = jQuery.noConflict();
</script>
<script src="jquery-1.4.2.js"></script>
<script>
var jqueryB = jQuery.noConflict();
</script>
You would need to call
jqueryB("#myelement").....
To use the alternate version.
You should use jQuery.noConflict();
See this example: http://web.enavu.com/daily-tip/using-multiple-versions-of-jquery-on-the-same-page/
As a rule of thumb, stick to one included jquery file. It's quite a large file, and there's no need to import multiple versions. I would opt for the latest version, which can be served from google or microsoft to speed up your server.
Note if you want the "doSomething" event to behave differently depending on where it's called in the page, you could try to bind the event differently. Check out the following example. As with yours, it calls the new version from within your plugin area on the page ready event - this might be later than you expected.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="elem"></div>
<script>
var oldFunct = function (e,o) { alert("old jquery" + o); };
var newFunct = function (e,o) { alert("new jquery" + o); };
$("#elem").bind("doSomething", oldFunct);
$("#elem").trigger("doSomething", ["1"]);
</script>
<script>
$(document).ready(function(){
$("#elem").bind("doSomething", newFunct);
$("#elem").trigger("doSomething", ["2"]);
$("#elem").bind("doSomething", oldFunct);
});
</script>
<script>
$("#elem").trigger("doSomething", ["3"]);
</script>
</body>
</html>

google.load - and message "google is not defined"

What do I need to include to do a google.load() statement?
I'm getting the error:
google is not defined
Based on this page, I thought I should add this:
<script type="text/javascript"
src="http://www.google.com/jsapi?key=ABCDEFG">
</script>
But when I did, I got this error:
"window.LoadFirebugConsole" is not a function.
I had the same problem and solved it like this:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type='text/javascript'>
function LoadGoogle()
{
if(typeof google != 'undefined' && google && google.load)
{
// Now you can use google.load() here...
}
else
{
// Retry later...
setTimeout(LoadGoogle, 30);
}
}
LoadGoogle();
</script>
The idea is to retry until google is defined.
The other solutions didn't help me, probably because this piece of code is loaded via Ajax from another page.
Did you include the google jsapi script before adding the load and callback methods? They should be in seperate script blocks.
<script src="http://www.google.com/jsapi?key=ABCDE"></script>
<script type="text/javascript">
google.load("jquery", "1");
// Define our onLoad callback
function OnLoad(){
alert("Loaded!");
}
google.setOnLoadCallback(OnLoad);
</script>
There are additional examples in the Google's 'AJAX Api's Playground'.
you should include this script -- http://www.google.com/jsapi
I had the problem, but I was using:
<script type="text/javascript" src="http://www.google.com/jsapi" />
It was solved by chanching the line to:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Categories