One of the parameters in the script tag may change dynamically -
djConfig="parseOnLoad:true, locale:'fr-fr'
Script tag:
<script type="text/javascript"
src="dojo-release-1.6.1/dojo/dojo.js"
djConfig="parseOnLoad:true, locale:'fr-fr' />
where locale may be either fr-fr or en-us,...
How do I create the script tag?
I suggest explicitly creating the djConfig object before including the dojo core (as outlined in their docs):
<script type="text/javascript">
var currentLocale;
if([Your Logic Here])
{
currentLocale = 'en-us';
}
else
{
currentLocale = 'fr-fr';
}
var djConfig = {
parseOnLoad: true,
isDebug: true,
locale: currentLocale,
extraLocale: ['ja-jp']
};
</script>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.4.2/dojo/dojo.xd.js">
</script>
Please check out the dojo docs on the subject.
NOTE: You should never use self-closing script tags.
Related
I know this question has been asked multiple times. I looked at many answers but couldn't find a solution.
I am trying to load jquery.cookie.js script. Here is how:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="scripts/javascript.js"></script>
This is my javascript:
$(document).ready(function () {
var jobStats_class = $.cookie('jobStats');
// Add toggle feature
$('.jobStats caption').click(function () {
$('.jobStats th,.jobStats td').slideToggle('1000');
});
$('.ricSubscriptions caption').click(function () {
$('.ricSubscriptions th,.ricSubscriptions td').slideToggle('1000');
});
$('.trthJobStatus caption').click(function () {
$('.trthJobStatus th,.trthJobStatus td').slideToggle('1000');
});
});
Thanks for your help!
Since version 2.0, jquery-cookie project has moved to js-cookie project.
Now you can't handle cookies with $ variable (because this library didn't really use special functions of jQuery). Now, you have to use Cookies variable :
Create a cookie
//OLD
$.cookie('name', 'value', { expires: 7, path: '/' });
//NEW
Cookies.set('name', 'value', { expires: 7, path: '/' });
Read a cookie
//OLD
$.cookie('name');
//NEW
Cookies.get('name');
Read all cokies
//OLD
$.cookie();
//NEW
Cookies.get();
Delete a cookie
//OLD
$.removeCookie('name');
//NEW
Cookies.remove('name');
Your script path is the problem. Try this cdn:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
I have a requirement wherein based on some condition I have to switch between flash and HTML flowplayer.
It is a single page app.
currently I am doing the following. But is there a better approach?
$.getScript("flowplayer/flowplayer-3.2.12.min.js", function(){
$.getScript("flowplayer/jdataview.js", function(){
$.getScript("flowplayer/easybits-helper.js", function(){
$.getScript("flowplayer/easybits-mp4.js", function(){
$.getScript("flowplayer/easybits-multistreaming.js", function(){
$.getScript("flowplayer/easybits-flowplayer-flash-scrubber-preview.js", function(){
$.fn.flashFlowplayer = $.fn.flowplayer;
$.fn.flowplayer = undefined;
window.flashFlowplayer = flowplayer;
flowplayer = undefined;
$.getScript("flowplayer/flowplayerhtml5/flowplayer.min.js", function() {
$.fn.htmlFlowplayer = $.fn.flowplayer;
window.htmlFlowplayer = flowplayer;
});
});
});
});
});
});
});
/* and to render a flash video I use */
flashFlowplayer(sourceElement[0].id, {
src: "flowplayer/flowplayer.commercial-3.2.16.swf",
wmode: 'opaque'
}, oFlowPlayerConfig);
/* to render htmlFlowplayer I use */
$el.htmlFlowplayer({
"ratio": oParam.ratio,
"embed": false,
"playlist":[[{ "mp4": sVideoUrl }]],
});
You can load the scripts by using <script> elements instead of this deeply nested mess of $.getScript. The browser might download them in any order but it will execute the contents in order. That means the browser might request easybits-helper.js already while it's executing the content of flowplayer-3.2.12.min.js.
This code is equivalent to the above:
<script type="text/javascript" src="flowplayer/flowplayer-3.2.12.min.js" />
<script type="text/javascript" src="flowplayer/jdataview.js" />
<script type="text/javascript" src="flowplayer/easybits-helper.js" />
<script type="text/javascript" src="flowplayer/easybits-mp4.js" />
<script type="text/javascript" src="flowplayer/easybits-multistreaming.js" />
<script type="text/javascript" src="flowplayer/easybits-flowplayer-flash-scrubber-preview.js" />
<script type="text/javascript">
$.fn.flashFlowplayer = $.fn.flowplayer;
$.fn.flowplayer = undefined;
window.flashFlowplayer = flowplayer;
flowplayer = undefined;
</script>
<script type="text/javascript" src="flowplayer/flowplayerhtml5/flowplayer.min.js" />
<script type="text/javascript">
$.fn.htmlFlowplayer = $.fn.flowplayer;
window.htmlFlowplayer = flowplayer;
</script>
but it allows the client to cache the scripts properly and load them in parallel. It's also much more readable.
I'm facing an error where a jQuery code can't find a previously imported module.
I'm using jQuery and tag-it (https://github.com/aehlke/tag-it/blob/master/README.markdown)
I import the scripts in this order:
<script src="js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="js/vendor/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/vendor/jquery-ui-touch-punch.min.js" type="text/javascript"></script>
<script src="js/vendor/tag-it.min.js" type="text/javascript"></script>
<script src="js/tags.js" type="text/javascript"></script>
tag-it.min.js is the Tag-It provided js module and tags.js is my custom module.
tags.js is as follows:
$(document).ready(function(){
var $available_tags = $('#user_tags').val().split(",").slice(0, -1);
$('#tags').tagit({
fieldName: "tags",
availableTags: $available_tags,
placeholderText: "Enter Tags",
beforeTagAdded: function(event, ui){
var tag = ui.tag.text().slice(0, -1);
if($.inArray( tag, $('#user_tags').val().split(",") ) == -1){
$.get("/tags/add?tag=" + tag, function(data){
if(!data.error){
$("#user_tags").val( $("#user_tags").val() + tag + ",");
} else {
console.log("Eror", data);
return false;
}
});
}
},
showAutocompleteOnFocus: true
});
});
The error is in tags.js at line 6:
$('#tags').tagit({
Undefined error: tagit does not exist.
http://puu.sh/gCVUh/2d792035f6.png
How is this possible? The js loading order is fine and yet it seems not to recognice it.
Thanks in advance, if more information is needed ask for it and I'll update the thread.
Ok I found out why it wasn't working.
I just noticed that I duplicated jQuery script import some lines after these imports.
This was resseting jQuery enviroment and therefore, tag-it was removed from it.
Hope this helps someone in a future and thanks for the help!
I'm injecting a script like so:
var script = $('<script>', {
type: 'text/javascript',
async: true,
src: 'https://script.js'
});
$('script:first').before(script);
This generates markup like:
<script type="text/javascript" async="async" src="https://script.js"></script>
I would prefer the following syntax:
<script type="text/javascript" async src="https://script.js"></script>
Is this supported when passing options to a jQuery DOM element creator? Or, should I just use plain JavaScript to achieve this?
You can set the attribute using plain JS. Doing it through jQuery will auto-populate the value.
var script = $('<script>', {
type: 'text/javascript',
src: 'https://script.js'
});
script[0].setAttribute("async", "");
$('script:first').before(script);
I have a site using javascript popup effect like this:
<script type="text/javascript">
var GB_ROOT_DIR = "greybox/";
</script>
<script src="greybox/AJS.js" type="text/javascript"></script>
<script src="greybox/AJS_fx.js" type="text/javascript"></script>
<script src="greybox/gb_scripts.js" type="text/javascript"></script>
<link href="greybox/gb_styles.css" type="text/css" rel="stylesheet">
<script language="JAVASCRIPT">
function loadWindow(){
GB_showCenter('Free Report!', 'http://www.signupformlocation.com/popup/signup.php', 420, 570);
}
window.onload = loadWindow;
</script>
But everytime my visitor go to the homepage, my popup always shown. How to do making this popup only display one time?
Please Help me
you can use cookies and jquery
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script>
function loadWindow() {
if ($.cookie('popup_flag') != 'true') {
GB_showCenter('Free Report!', 'http://www.signupformlocation.com/popup/signup.php', 420, 570);
$.cookie('popup_flag', 'true');
}
}
</script>
Personally i would go with JStorage, its a HTML5 jQuery Plug-in the uses the local storage on most popular browsers.
Example:
var loadWindows = function()
{
if(!$.jSotreage.get('welcome_flag'))
{
GB_ShowCentre('Free Support!') // Blah
$.jStorage.set('welcome_flag',true);
}
}
Uses JSON To serialize all data in the local storage:-
jStorage: http://plugins.jquery.com/project/jStorage
Draft: http://dev.w3.org/html5/webstorage/
Without jQuery: Storing Objects in HTML5 localStorage
You can store around 5MB Per domain so this would be benificial and should take over the use of cookies within the javascript environment.