Im trying to examine a simple html page that I could add data as I pressed 1st button into jquery cookie array and in another button could read all cookie values in a list.
simply attempting to add to cookie array and print its values into a span. but simply this code does not throw any console error. and array size alerts always zero. what is the problem with my js codes ? Can you help?
<html>
<head>
<script src="Scripts/jquery-2.2.0.min.js"></script>
<script src="Scripts/jquery.cookie.js"></script>
</head>
<body>
<form id="form1">
<div>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="ADD TO COOKIE ARRAY" onclick="addToCookie();" />
</div>
</form>
<p>
<input id="Button2" type="button" value="READ ALL COOKIE ARRAY INTO SPAN" onclick="readAllFromCookie();" />
<span id="span_listhere"></span>
</p>
<script type="text/javascript">
///////////////////////
$.cookie.defaults.path = '/';
var cookieList = function (cookieName) {
var cookie = $.cookie(cookieName);
var items = cookie ? cookie.split(/,/) : new Array();
return {
"add": function (val) {
var index = items.indexOf(val);
if (index == -1) {
items.push(val);
$.cookie(cookieName, items.join(','));
}
},
"remove": function (val) {
indx = items.indexOf(val);
if (indx != -1) items.splice(indx, 1);
$.cookie(cookieName, items.join(','));
},
"clear": function () {
items = null;
$.cookie(cookieName, null);
},
"items": function () {
return items;
}
}
}
///////////////////////
list_stockno = new cookieList("c_stockno");
///////////////////////
function addToCookie() {
alert("addToCookie has been started");
$stockno = $('#Text1').val();
list_stockno.add($stockno);
alert(list_stockno.items.length);
}
///////////////////////
function readAllFromCookie() {
alert("readAllFromCookie has been started");
for ($i = 0; $i < list_stockno.items.length; $i++) {
$sn = list_stockno[$i];
$mydata = ("stockno:" + $sn);
$('#span_listhere').append($mydata);
}
}
</script>
</body>
</html>
Modified as mentioned in responses. but no luck
this is not an answer. just added path parameter name/value pair. as you mentioned below, no luck. still array value alerts to zero and nothing happens. andalso no any console error occuring as I press both of button elements.
<html>
<head>
<script src="Scripts/jquery-2.2.0.min.js"></script>
<script src="Scripts/jquery.cookie.js"></script>
</head>
<body>
<form id="form1">
<div>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="ADD TO COOKIE ARRAY" onclick="addToCookie();" />
</div>
</form>
<p>
<input id="Button2" type="button" value="READ ALL COOKIE ARRAY INTO SPAN" onclick="readAllFromCookie();" />
<span id="span_listhere"></span>
</p>
<script type="text/javascript">
///////////////////////
var cookieList = function (cookieName) {
var cookie = $.cookie(cookieName, { path: '/' });
var items = cookie ? cookie.split(/,/) : new Array();
return {
"add": function (val) {
var index = items.indexOf(val);
if (index == -1) {
items.push(val);
// $.cookie(cookieName, items.join(','));
$.cookie(cookieName, items.join(','), { path: '/' });
}
},
"remove": function (val) {
indx = items.indexOf(val);
if (indx != -1) items.splice(indx, 1);
$.cookie(cookieName, items.join(','), { path: '/' });
},
"clear": function () {
items = null;
$.cookie(cookieName, { path: '/' });
},
"items": function () {
return items;
}
}
}
///////////////////////
list_stockno = new cookieList("c_stockno");
///////////////////////
function addToCookie() {
alert("addToCookie has been started");
$stockno = $('#Text1').val();
list_stockno.add($stockno);
alert(list_stockno.items.length);
}
///////////////////////
function readAllFromCookie() {
alert("readAllFromCookie has been started");
for ($i = 0; $i < list_stockno.items.length; $i++) {
$sn = list_stockno[$i];
$mydata = ("stockno:" + $sn);
$('#span_listhere').append($mydata);
}
}
</script>
</body>
</html>