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>
Related
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 attempting to follow the Sammy.js tutorial they have on their documentation site, and when I attempt to render my template it throws me:
Uncaught SyntaxError: Unexpected token ) sammy.template-latest.min.js:5
in Chrome. And in Firefox:
[14:55:55.136] SyntaxError: missing ; before statement # mysitehere/workspace/scripts/vendor/sammy/plugins/sammy.template-latest.min.js:5
My application script is:
(function($) {
var app = $.sammy('#main', function() {
this.use('Template');
this.around(function(callback) {
var context = this;
this.load('data/items.json')
.then(function(items) {
context.items = items;
})
.then(callback);
});
this.get('#/', function(context) {
context.app.swap('');
$.each(this.items, function(i, item) {
context.render('templates/item.template', {id: i, item: item})
.appendTo(context.$element());
});
});
});
$(function() {
app.run('#/');
});
})(jQuery);
In markup, I've imported:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="scripts/vendor/sammy/sammy-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/vendor/sammy/plugins/sammy.template-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/vendor/sammy/plugins/sammy.json-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/application/application.js" type="text/javascript" charset="utf-8"></script>
All of which resolve as 200's.
My template path is verified and copied from their github repo.
I did hear that it's a possible Chrome issue for pulling data not on the http:// protocol but I also tried in FF to no avail either.
Any ideas?
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.
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
$.getJSON("ticketPriceInArray.js",
function(json) {
var ticketPriceArray=[json.tickets[0].price, json.tickets[1].price,
json.tickets[2].price, json.tickets[3].price, json.tickets[4].price,
json.tickets[5].price];
alert(json.tickets[0].type);
var inputWord =$("#keyword").val();
if (inputWord=="A"){$("#result").text(ticketPriceArray[0]);}
if (inputWord=="B"){$("#result").text(ticketPriceArray[1]);}
if (inputWord=="C"){$("#result").text(ticketPriceArray[2]);}
if (inputWord=="D"){$("#result").text(ticketPriceArray[3]);}
if (inputWord=="E"){$("#result").text(ticketPriceArray[4]);}
if (inputWord=="F"){$("#result").text(ticketPriceArray[5]);}
});
});
});
</script>
Here is "ticketPriceInArray.js"
{
"tickets":[
{
"type":"A Ticket",
"price":220,
},
{
"type":"B Ticket",
"price":180,
},
{
"type":"C Ticket",
"price":120,
},
{
"type":"D Ticket",
"price":100,
},
{
"type":"E Ticket",
"price":80,
},
{
"type":"F Ticket",
"price":50,
}
]
}
This is a simple html where when the corresponding text inputed, the corresponding ticket price will show in the html after a button-click. All the ticket info is stored in a .json file named "ticketPriceInArray.js" and I have been trying to read it using $.getJSON(), but unfortunately I haven't been able to get any success. The weird thing is I didn't get any warning on anything so I couldn't fix it. Please see if you can give me any suggestions. Thank you.
By adding an AJAX error handler, I received this
"parsererror" SyntaxError: Unexpected token }
The problem is the trailing commas after each price property.
The following example is working fine in FF and Chrome with the exact JSON you provided. In IE you will have to remove the commas after the prices, as Phil already said.
In my test both the test.html and test.js were placed in my apache server root; viewing the files directly from my desktop into my browser didn't work apparently due to security restrictions.
<html>
<head></head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
$.getJSON("test.js", function(json) {
for (var i in json.tickets) {
var type = json.tickets[i].type;
var price = json.tickets[i].price;
$('#result').append('<span>type: ' + type+ ', price: ' + price + '</span><br />');
}
});
});
});
</script>
<button id="Button1">click me</button>
<div id="result"></div>
</body>
</html>
I suggest you use http://jsonlint.com/ to validate your JSONs; or just rely on a good encoder instead of doing it by hand ;)
A little bit different approach to solving this problem. This is assuming that you aren't changing your ticket prices based on some data that you pass to the url.
ticketPriceInArray.js
{
"A" : 220,
"B" : 180,
"C" : 120,
"D" : 100,
"E" : 80,
"F" : 50
};
main file
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript">
var ticket_prices = {};
$(function() {
$("#Button1").click(function() {
$.getJSON("ticketPriceInArray.js", function(returnedJSON) {
ticket_prices = returnedJSON;
$("#result").text( ticket_prices[ $("#keyword").val() ] );
});
});
});
</script>
If there are any considerations (or questions about my assumptions) let me know and I will update based on that.
Assuming the following facts:
you're using firefox
there is no traffic in the network-tab when you click on #Button1
there are no errors logged
... I would like to say:
the element you click on is not $("#Button1")
Are you sure that the element you click on has the ID "Button1" and that there is only one element using that ID ?
Are you running this from a webserver or from your local filesystem?
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.