Develop Reference

How to storage values in local storage using jquery?

How can dynamic values be stored in the local storage?
I have a seat layout. How i can store only the selected seat numbers in the local storage, but not reserved seats?
My code can be seen below:
$(function() {
var settings = {
rows: 6,
cols: 10,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function(reservedSeat) {
var str = [],
seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
var SeatNo = document.getElementById('place').value;
localStorage.setItem('SeatNum', SeatNo);
};
//case I: Show from starting
//init();
//Case II: If already booked
var bookedSeats = [5, 10, 25];
init(bookedSeats);
$('.' + settings.seatCss).click(function() {
if ($(this).hasClass(settings.selectedSeatCss)) {
alert('This seat is already reserved');
} else {
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function() {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function() {
var str = [],
item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
<div>
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="">
<ul id="seatDescription">
<li style="background:url('available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="width:100%">
<input type="button" id="btnShowNew" value="Show Selected Seats" />
<input type="button" id="btnShow" value="Show All" />
</div>
</div>

localStorage is an object within the global 'window' object, and therefore will normally be available throughout your javascript code. It pretty much behaves like a dictionary, you create, retrieve, edit and remove key:value pairs. jQuery will not be necessary.
It is also imporant to remember that localStorage only support string values, and simply saving an array would not work.
// When modifying bookedSeats:
var bookedSeatsCacheString = JSON.stringify(bookedSeats);
localStorage.setItem('bookedSeats', bookedSeatsCacheString);
// Init code:
var bookedSeatsCache = localStorage.getItem('bookedSeats');
var bookedSeats = JSON.parse(bookedSeatsCache);
if(!Array.isArray(bookSeats))
bookedSeats = [];
init(bookedSeats);
EDIT: I edited your code to make this work with localStorage
$(function () {
var settings = {
rows: 6,
cols: 10,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function (reservedSeat) {
var str = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
};
// Init code
var bookedSeatsCache = localStorage.getItem('bookedSeats'),
bookedSeats;
if(typeof bookedSeatsCache === 'string' && bookedSeatsCache.length > 0)
bookedSeats = JSON.parse(bookedSeatsCache);
else
bookedSeats = [];
init(bookedSeats);
$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
alert('This seat is already reserved');
}
else{
var seatNum = $(this).attr('title');
bookedSeats.push(seatNum);
localStorage.setItem('bookedSeats', JSON.stringify(bookedSeats));
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function () {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function () {
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
#holder{
height:225px;
width:365px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
list-style: none outside none;
position: absolute;
}
#place li:hover
{
background-color:yellow;
}
#place .seat{
background:url("available_seat_img.gif") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;
padding:5px;
}
#place .selectedSeat
{
background-image:url("booked_seat_img.gif");
}
#place .selectingSeat
{
background-image:url("selected_seat_img.gif");
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#seatDescription li{
vertical-align: middle;
list-style: none outside none;
color:white;
font-family:'LatoWeb', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
font-size:13px;
padding-left:28px;
padding-top:14px;
height:35px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="">
<ul id="seatDescription">
<li style="background:url('available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="width:100%">
<input type="button" id="btnShowNew" value="Show Selected Seats" />
<input type="button" id="btnShow" value="Show All" />
</div>
</div>

Javascript append keep adding elements

I am trying to append list[i].name and list[i].email once every time sponsorListTree li is being clicked. I can append the document.getElementById("name").appendChild(div_group); but the problem occurs when i click the div a few times, the same data will add up instead of displaying the result only once
$.ajax({
url: 'test.php',
method: 'GET',
success: function(data){
var list = data;
for (i = 0; i < list.length; i++) {
$('#sponsorListTree li').attr('id', function(i) {
return 'sponsorListTree'+(i+1);
});
$('#sponsorListTree').append('<li class="button"><tbody><tr><td><span id="information" class="details"><br/><br/> '+ 'Email: ' + list[i].email + '</br></br> '+ 'Contact No: ' + list[i].contact.phone + ' </br></br> '+ 'Joined date: ' + list[i].date + ' </br> </br>'+ 'InvestedAmount: ' + list[i].account.investedAmount + '</span></td></tr></tbody><table></li>');
}
$("#sponsorListTree li").click(function() {
var name = $(this)[0].innerHTML;
var details = $(this).find('span')[0].innerHTML
var div_name = document.createElement('div');
var div_details = document.createElement('div');
div_name.innerHTML = name;
div_details.innerHTML = details;
div_name.className ="nameDetail";
div_details.className ="detail";
var div_group = document.createElement('div');
div_group.append(div_name);
div_group.append(div_details);
document.getElementById("name").append(div_group);
});
$(".button").click(function() {
$("span").toggleClass("details");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style=" overflow-x: auto; width: 400%; height: 600px;">
<li>
<a id="root" href="#"></a>
<ul id ="sponsorListTree">
</ul>
</li>
</ul>
<div id = "name" class="control-label"></div>

Generate HTML with JavaScript and jQuery - JavaScript not executing?

Following to this post, I recreated the code with jQuery. jsFiddle says, that everything should be find and I can't find any mistakes either. Here's the Code:
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div></div>').attr('post_' + postCount).attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
$('#post_h3_' + postCount).append('<span>' + time + '</span>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
var paragraphCount = 0;
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
paragraphCount++;
}
postCount++;
}
Now the problem might be that the JavaScript is not even executed, my HTML looks like this:
<head>
<?php include 'components/_head.php';?>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/postGen.js"></script>
<script type="application/javascript" src="postGen.js">
document.addEventListener('DOMContentLoaded', function() {
generatePost("Testing Title", "I don't know", "This is || a paragraph");
}
</script>
</head>
<body>
<header>
<?php include 'components/header.php';?>
</header>
<main>
<?php include 'components/main.php';?>
<div class="fullscreencontainer">
<img class="background" src="img/background.jpg">
<div class="title">
<h2>Der Bürger als Edelmann</h2>
<h4>von Moliére</h4>
</div>
</div>
<div class="container">
<div id="postcontainer">
/* ? */
</div>
<div class="sidebar">
</div>
</div>
</main>
<footer>
<?php include 'components/footer.php';?>
</footer>
</body>
The structure of the files:
index.php
js/jquery-1.11.3.min.js
js/jquery-migrate-1.2.1.min.js
js/postGen.js This file contains the code written in the first code-box
Inspector shows nothing new.
Console shows:
Syntax Error: Missing ) after argument list
EDIT:
The final Code:
<script type="application/javascript">
$(document).ready(function() {
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div id=' + "post_" + postCount + '></div>')
$('#post_' + postCount).attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '<span>' + time + '</span></h3>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>');
}
postCount++;
}
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
});
</script>

Seems you were calling the generatePost() function too early (when document loads, but at the same time, thats also when you load your jQuery... why you were getting the ")" Missing error..).
So I changed the HTML to:
<head>
</head>
<body>
<main>
<div class="container">
<div id="postcontainer">
</div>
</div>
</main>
</body>
And the jQuery to:
$(document).ready(function() {
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div id=' + "post_" + postCount + '></div>').attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
$('#post_h3_' + postCount).append('<span>' + time + '</span>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
var paragraphCount = 0;
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
paragraphCount++;
}
postCount++;
}
generatePost("Testing Title", "I don't know", "This is || a paragraph");
});
Just calling the function at the end of the document.ready. Also, as you can see, I also ran into some issues about how the post's id was being assigned, so ended up switching that up as well, assigning it with some simple string interpolation.
Cheers,
PG

Generate JQM Popup Dynamically

I want to display a JQM PopUp based on the contents of my variable.
I have a variable that contains this.
924-1922, 928-3074, 928-8363
Then I perform .split so I can get the three phone numbers.
secNumber = res.rows.item(i).secondary_num.split(", ");
So my variable secNumber now has an array of three numbers: 924-1922,928-3074,928-8363
Now here is my code for displaying it (I am using for loop for this since there are many entries with phone numbers):
html += ' Tel. No.: ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+secNumber+'\', \'_system\');"> ' + secondary +' </span> ';
The onclick on my last <span> is working. However, it only puts the first number on the phone's dialer. What I want to achieve on my onclick is, after show a popup onclick using this code from JQM website
Actions...
<div data-role="popup" id="popupMenu" data-theme="d">
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d">
<li data-role="divider" data-theme="e">Choose an action</li>
<li>View details</li>
<li>Edit</li>
<li>Disable</li>
<li>Delete</li>
</ul>
</div>
When I click on my <span> the contents of the listview of the popup will be the contents of my array secNumber, then on the onclick of each element in the listview, I will call window.open to access the phone's dialer.
EDIT
This is my code.
article.emergency = function() {
var secNumber;
var telnum;
var html = '';
appDB.transaction(function(tx) {
tx.executeSql("SELECT * FROM emergency", [], function(tx, res) {
if (res.rows.length > 0) {
for (var i = 0; i < res.rows.length; i++) {
function openPopup(index) {
//reset its content
$('#popupMenu').find('ul').html('<li data-role="divider" data-theme="e">Choose an action</li>');
//loop on secondary_num items
$.each(res.rows.item(index).secondary_num.split(", "), function(k, v) {
$('#popupMenu').find('ul').append('<li>' + v + '</li>');
});
//refresh listView
$('#popupMenu').find('ul').listview("refresh");
//open popup
$('#popupMenu').popup("open", {"transition":"slideup"});
}
var secondary = (res.rows.item(i).secondary_num != 'null') ? 'Secondary Number: ' + res.rows.item(i).secondary_num : '';
secNumber = res.rows.item(i).secondary_num.split(", ");
console.log(secNumber);
/*secondary = secondary.replace(/-/g,"");
console.log("Secondary number string : "+secondary);*/
console.log(res.rows.item(i).tel_num);
telnum = res.rows.item(i).tel_num.split(" to");
console.log(telnum);
html += ' Tel. No.: ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+secNumber+'\', \'_system\');"> ' + secondary +' </span> ';
//html += ' Tel. No.: ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+secNumber+'\', \'_system\');"> ' + secondary +' </span> ';
}
$('.list-display').html(html);
}
});
}, article.onErr, article.onSuccess);
}
I hope someone can help me. Thanks.

Supposing your item array has multiple elements and you want to use a unique popup container you'll have to generate dynamically its content (refreshing the listView widget).
Your secondary span should look similar to
<span onclick="window.openPopup(' + index + ');"> ' + secondary +' </span>
and your openPopup function
function openPopup(index) {
//reset its content
$('#popupMenu').find('ul').html('<li data-role="divider" data-theme="e">Choose an action</li>');
//loop on secondary_num items
var secNumber = item[index].secondary_num.split(", ");
for (var i = 0; i < secNumber.length; i++) {
$('#popupMenu').find('ul').append('<li>' + secNumber[i] + '</li>');
}
//refresh listView
$('#popupMenu').find('ul').listview("refresh");
//open popup
$('#popupMenu').popup("open", {"transition":"slideup"});
}
Here you can fine a working example with a simplified structure: http://jsfiddle.net/phtzwxb6/5/
Update fixing your code with a possible solution:
// declared outside
function openPopup(index) {
//reset its content
$('#popupMenu').find('ul').html('<li data-role="divider" data-theme="e">Choose an action</li>');
//loop on secondary_num items
var secNumber = item[index].secondary_num.split(", ");
for (var i = 0; i < secNumber.length; i++) {
$('#popupMenu').find('ul').append('<li>' + secNumber[i] + '</li>');
}
//refresh listView
$('#popupMenu').find('ul').listview("refresh");
//open popup
$('#popupMenu').popup("open", {"transition":"slideup"});
}
//your enclosure...
article.emergency = function() {
var secNumber;
var telnum;
var html = '';
appDB.transaction(function(tx) {
tx.executeSql("SELECT * FROM emergency", [], function(tx, res) {
if (res.rows.length > 0) {
for (var i = 0; i < res.rows.length; i++) {
var secondary = (res.rows.item(i).secondary_num != 'null') ? 'Secondary Number: ' + res.rows.item(i).secondary_num : '';
secNumber = res.rows.item(i).secondary_num.split(", ");
telnum = res.rows.item(i).tel_num.split(" to");
html += ' Tel. No.: ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.openPopup(' + i + ');"> ' + secondary +' </span> ';
}
$('.list-display').html(html);
}
});
}, article.onErr, article.onSuccess);
}

Please help me in this javascript for 'read more' link of post summary

I am using this code on my blogger blog.This is the javascript-
<script type='text/javascript'>
var thumbnail_mode = & quot;
yes & quot;; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx, chop) {
if (strx.indexOf("<") != -1) {
var s = strx.split("<");
for (var i = 0; i < s.length; i++) {
if (s[i].indexOf(">") != -1) {
s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length - 1) ? chop : strx.length - 2;
while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
strx = strx.substring(0, chop - 1);
return strx + '...';
}
function createSummaryAndThumb(pID) {
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if (thumbnail_mode == "yes") {
if (img.length >= 1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;">
<img src="' + img[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/>
</span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
And this is the code i am using in div of post element
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<a class='more' expr:href='data:post.url'> read more </a>
<script type='text/javascript'>
createSummaryAndThumb( & quot; summary < data: post.id / > & quot;);
</script>
This is the result:
Twitter is the second most popular social networking site. It is used by celebrities all around world. It is also called a microblogging website... read more
I want read more link just after ' ...' for example-
It is also called a microblogging website... read more
How can i do it, please help me.

Just one solution of many, but give your div prior to the anchor a display:inline; css styling and the anchor will fall to the right of the div content. Either in another included css file, in a style tag, or within the div tag place a style="display:inline".