Develop Reference

JQuery .on() live calculation

I have a ul list. The items are appended to the list, when the user click on a button. This part of the script is working fine and the items are appended to the ul list. But I have an issue in the second part. Each button has a value (integer). I sum the values and show the sum in a field. This is also working without errors. However, it works only when li items already are published in the ul. For dynamic li items it does not work. I need an .on() or .live() function for that?
Here are the scripts
//append to costs //
$(document).ready(function() {
$('.button_grey').click(function() {
var toAdd = $(this).attr('name');
var toAdd2 = $(this).attr('value');
$('.ul-panel').append('<li class="items">' + toAdd + '<div class="float_right">CHF <span class="numbs">' + toAdd2 + '</span> <i class="fa fa-minus-circle" aria-hidden="true"></div></i></li>');
});
$(document).on('click touchstart', '.items', function() {
$(this).remove();
});
});
//calculation addition //
$(document).ready(function() {
function totalList() {
var subTotal = 0;
jQuery("#totalsum li").each(function() {
subTotal += parseFloat(
jQuery(this).find('span').text()
.replace('$ ', '')
.replace(',', ''));
});
var subTotal = subTotal.toFixed(2);
$('.numbercosts').html(subTotal);
};
totalList();
});
And here you have the html code.
<div class="footer_div">
<div class="panel-footer">
<ul class="ul-panel" id="totalsum">
</ul>
</div>
<div class="float_left">
<span class="details"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i> Details</span>
</div>
<div class="float_right costsli">
<span class="costs">
geschätzte Kosten
</span>
<span class="numbercosts" id="numbercosts"></span><span class="costs"> CHF</span>
</div>
</div>
The button is for example the follows:
<button class="button_grey" value="950" name="Android">
<center>
<i class="fa fa-android fa-5x" aria-hidden="true"></i>
<h4>
Android
</h4>
</center>
</button>

extract the function totalList out of the document ready, then call it where needed..
//calculation addition //
function totalList() {
var subTotal = 0;
jQuery("#totalsum li").each(function() {
subTotal += parseFloat(
jQuery(this).find('span').text()
.replace('$ ', '')
.replace(',', ''));
});
var subTotal = subTotal.toFixed(2);
$('.numbercosts').html(subTotal);
};
//append to costs //
$(document).ready(function() {
totalList();
$('.button_grey').click(function() {
var toAdd = $(this).attr('name');
var toAdd2 = $(this).attr('value');
$('.ul-panel').append('<li class="items">' + toAdd + '<div class="float_right">CHF <span class="numbs">' + toAdd2 + '</span> <i class="fa fa-minus-circle" aria-hidden="true"></div></i></li>');
});
$(document).on('click touchstart', '.items', function() {
//$(this).remove();
totalList();//maybe here?
});
});

Changes:-
1.Call function totalList();inside $('.button_grey').click(function() { and $(document).on('click touchstart', '.items', function() {
2.Put function code outside of $(document).ready(function(){..})
$(document).ready(function() {
$('.button_grey').click(function() {
var toAdd = $(this).attr('name');
var toAdd2 = $(this).attr('value');
$('.ul-panel').append('<li class="items">' + toAdd + '<div class="float_right">CHF <span class="numbs">' + toAdd2 + '</span> <i class="fa fa-minus-circle" aria-hidden="true"></div></i></li>');
totalList();
});
$(document).on('click touchstart', '.items', function() {
$(this).remove();
totalList();
});
});
function totalList() {
var subTotal = 0;
jQuery(".numbs").each(function() {
subTotal += parseFloat(jQuery(this).text());
});
var subTotal = subTotal.toFixed(2);
$('.numbercosts').html(subTotal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer_div">
<div class="panel-footer">
<ul class="ul-panel" id="totalsum">
</ul>
</div>
<div class="float_left">
<span class="details"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i> Details</span>
</div>
<div class="float_right costsli">
<span class="costs">
geschätzte Kosten
</span>
<span class="numbercosts" id="numbercosts"></span><span class="costs"> CHF</span>
</div>
</div>
<button class="button_grey" value="950" name="Android"><center><i class="fa fa-android fa-5x" aria-hidden="true"></i><h4>Android</h4></center></button>

Dynamically adding items to listview (jQuery mobile)

How i can you pull out of the object's data and dynamically add them to the listview
function (){
var person = {
title: "ddd",
mes: "sss",
op: {},
tel: 2
};
}
the data will be coming from to json server
<div data-role="page" id="page1">
<div data-role="header">
<h1>Заголовок</h1>
</div>
<ul data-inset="true" id="ideaposits" data-role="listview" data-split-icon="gear">
<script type="text/html" id="list">
<li>
<a class="ui-btn ui-icon-carat-r " href="#page2">
<h2 class="title"></h2>
<p class="mes"></p>
</a>
</li>
</script>
</ul>
</div>
and move on to the second screen page2 ........

First, make the "template" element hidden:
<li style="display:none">
<a class="ui-btn ui-icon-carat-r " href="#page2">
<h2 class="title"></h2>
<p class="mes"></p>
</a>
</li>
Then, change your javascript to copy the template item and fill in the values, and then show it:
function (){
var person = {
title: "ddd",
mes: "sss",
op: {},
tel: 2
};
var li = $("li");
var newLi = li.clone();
newLi.find(".title").text(person.title);
newLi.find(".mes").text(person.mes);
newLi.show();
li.after(newLi);
}

function getRandomInt(min, max) {
//credit : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
function dataFromAjaxExample(){
var sumall = getRandomInt(2,20);
$('#head-list').html('List View ( total item ' + sumall + ' )');
// json data from ajax example
var itemlist = [];
for(i=1;i<=sumall;i++){
itemlist.push({
itemid: i,
title: 'Item ' + i,
desc: 'is ' + i,
page: 'page'+i
});
}
return itemlist;
}
//template
function itemList(item){
var htmlList = [
'<li>',
'<a class="ui-btn ui-icon-carat-r " href="#' + item.page + ' ">',
'<h2 class="title">' + item.title + '</h2>',
'<p class="desc">' + item.desc + '</p>',
'</a>',
'</li>'
];
return htmlList.join('');
}
//add process
function addItemListView(data){
is_list = $('#ideaposits');
is_list.html('');
data.forEach(function(x){
is_list.append(itemList(x));
});
}
//main process
setInterval(function(){
addItemListView(dataFromAjaxExample());
},4000);
//onload
addItemListView(dataFromAjaxExample());
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="page1">
<div data-role="header">
<h1 id='head-list'>List View</h1>
</div>
<ul data-inset="true" id="ideaposits" data-role="listview" data-split-icon="gear">
<li>
<a class="ui-btn ui-icon-carat-r " href="#page2">
<h2 class="title"></h2>
<p class="mes"></p>
</a>
</li>
</ul>
</div>

How do I add then remove class on outer div on each clink

If id of li a item matches the class of div item a want to add a class "theme" on each click.
If id of li a item doesn't matches the class of div item a want to remove the class "theme" from non matching divs.
But it only adds the class on each click but doesn't remove class. Any suggestions?
<ul class="funding-theme">
<li data-rel="all"><a class="sub active" id="all" href="javascript:void(0)">All</a></li>
<li><a class="sub" id="education" href="javascript:void(0)">Education</a></li>
<li><a class="sub" id="healthcare" href="javascript:void(0)">Healthcare</a></li>
<li><a class="sub" id="justice" href="javascript:void(0)">Justice</a></li>
</ul>
<div class="list left">
<div class="non_profit all education"></div>
<div class="non_profit all education"></div>
<div class="non_profit all justice"></div>
<div class="non_profit all healthcare"></div>
</div>
<script>
var $sub = $(".sub");
$sub.click(function(e){
if (e.target.id == "all") {
//alert("#" + $(this).attr('id') + "");
$("."+$(this).attr('id')).removeClass('theme');
} else if (e.target.id == $(this).attr('id')) {
alert("#" + $(this).attr('id') + "");
$("."+$(this).attr('id')).removeClass('theme');
$("."+$(this).attr('id')).addClass('theme');
}
});
</script>

Try this
$('.sub').click(function (e) {
var id = ($(this).attr("id"));
$('.list').find('div').each(function(){
if($(this).hasClass(id))
{ $(this).addClass('theme');
}else
{
$(this).removeClass('theme');
}
});
});
Fiddle Demo

Try this:
var $sub = $(".sub");
$sub.click(function(e){
if (e.target.id == "all") {
//alert("#" + $(this).attr('id') + "");
$(".theme").removeClass('theme');
} else if (e.target.id == $(this).attr('id')) {
alert("#" + $(this).attr('id') + "");
$(".theme").removeClass('theme');
$("."+$(this).attr('id')).addClass('theme');
}});
Working Demo

If I got this right, you need to change the following lines:
$("."+$(this).attr('id')).removeClass('theme');
$("."+$(this).attr('id')).addClass('theme');
to
$(".all").removeClass('theme');
$("."+$(this).attr('id')).addClass('theme');

Semantic-UI Dynamic Dropdown

Got a problem with semantic-ui dropdown.
I've been using Semantic-Ui, and wanted to change the dropdown item dynamically.
That is, when i choose the value from the first dropdown, the second dropdown's item will change.
But the thing is, when the items are changed, the second dropdown cannot be chose,
the value won't change. The dropdown won't collapse back.
The HTML
The First Dropdown
<div id="programmetype" class="ui fluid selection dropdown">
<input type="hidden" name="programmetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="val1">Car</div>
<div class="item" data-value="val2">Tank</div>
<div class="item" data-value="val3">Plane</div>
</div>
</div>
Second Dropdown
<div id="servicetype" class="ui fluid selection dropdown">
<input type="hidden" name="servicetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="select">Choose..</div>
</div>
</div>
..........................
The jQuery
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "val1")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Saloon</div>' +
'<div class="item" data-value="val2">Truck</div>'
);
};
if (val == "val2")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Abraham</div>' +
'<div class="item" data-value="val2">Leopard</div>' +
);
};
if (val == "val3")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Jet</div>' +
'<div class="item" data-value="val2">Bomber</div>' +
);
};
}
});

Found it,
I put $('#servicetype').dropdown();
after assigning the values:
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "fertility")
{
$('#servicetype').dropdown({'set value':'something'});
$('#servicetype .menu').html(
'<div class="item" data-value="acp">ACP</div>' +
'<div class="item" data-value="art">ART</div>'
);
$('#servicetype').dropdown();
};
});

A workaround approach:
function setDinamicOptions(selector, options) {
var att = "data-dinamic-opt";
$(selector).find('[' + att + ']').remove();
var html = $(selector + ' .menu').html();
for(key in options) {
html += '<div class="item" data-value="' + options[key] + '" ' + att + '>' + key + '</div>';
}
$(selector + ' .menu').html(html);
$(selector).dropdown();
}
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "val1")
setDinamicOptions('#servicetype', {Saloon:'val1', Truck:'val2'});
if (val == "val2")
setDinamicOptions('#servicetype', {Abraham:'val1', Leopard:'val2'});
if (val == "val3")
setDinamicOptions('#servicetype', {Jet:'val1', Bomber:'val2'});
}
});
Try this.

If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div
this is a demo
http://jsfiddle.net/BJyQ7/30/
<div class="ui simple dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>

Another approach for setting dropdown content just in time (for example based on some dynamic criteria) is using the remoteApi, that is a particularly unfortunate name for the data binding features of the SemanticUI dropdowns.
Follow instructions here: http://semantic-ui.com/behaviors/api.html#mocking-responses

jQTouch Dynamic Web app?

I'm working on a dynamically changing web app. I'm using javascript and jQuery to populate DIV's with <li>'s and <a>'s. For example, I start with one menu dynamically built with javascript. From that menu, depending on item selected, another javascript function gets called to dynamically populate the corresponding DIV. The problem coming when I keep dynamically building submenu's and JQTouch doesn't switch to the next page.
In the following code, the alert('what') displays on an iPhone but never switches to the ePresentationDetails DIV. I have tried forcing it with jQT.goTo(); but that usually causes more issues and doesn't fix the problem.
Basic html code:
<div id="home">
<div class="toolbar">
<a class="blueButton" href="javascript: void(0);" onClick="$('#logout').show();">Logout</a>
<h1>AllaccessMD</h1>
</div>
<div id="logout" style="display:none;">
<div id="confirmBox">
Are you sure?
<a class="logoutButton" href="javascript: void(0);" onClick="logOut();">Logout</a>
<a class="cancelButton" href="javascript: void(0);" onClick="$('#logout').hide();">Cancel</a>
</div>
</div>
<h1>Home</h1>
<ul class="edgetoedge" id="ulHome"></ul>
</div>
<div id="ePresentations">
<div class="toolbar">
<a class="button back" href="#">Back</a>
<h1>AllaccessMD</h1>
</div>
<div id="ePresentationsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
</div>
</div>
<div id="ePresentationDetails">
<div class="toolbar">
<a class="button back" href="#">Back</a>
<h1>AllaccessMD</h1>
</div>
<div id="ePresentationDetailsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
</div>
</div>
Javascript file:
function setupHome(){
if(localStorage.role == "Specialist"){
var homeUL = '<li class="arrow"><a id="aEP" rel="s,' + localStorage.userID + '" href="#ePresentations">My E-Presentation</a></li>'
+ '<li class="arrow"><a id="aN" rel="s,' + localStorage.userID + '" href="#date">My Newsletter</a></li>'
+ '<li class="arrow"><a id="aE" rel="s,' + localStorage.userID + '" href="#date">My Events</a></li>'
+ '<li class="arrow"><a id="aMP" rel="s,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
+ '<li class="arrow"><a id="aS" rel="s,' + localStorage.userID + '" href="#date">Search</a></li>'
+ '<li class="arrow"><a id="aP" rel="s,' + localStorage.userID + '" href="#date">Profile</a></li>';
$('#ulHome').html(homeUL);
} else {
var homeUL = '<li class="arrow"><a id="aMP" rel="m,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
+ '<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>'
+ '<li class="arrow"><a id="aP" rel="m,' + localStorage.userID + '" href="#date">Profile</a></li>';
$('#ulHome').html(homeUL);
}
$('#ePresentations').bind('pageAnimationStart', function (e){setupEPresentations(getID($('#aEP').attr('rel')).id);});
}
function setupEPresentations(sID){
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var epObject = JSON.parse(xmlhttp.responseText);
var html = '<h1>Dr. ' + epObject.DR.DATA[0][1] + ' E-Presentation\'s</h1>';
if(epObject.EP.DATA.length == 0){
html += '<div><p>There are currently no E-Presentation\'s for this doctor.</p></div>';
} else {
html += '<ul class="edgetoedge">';
for(var i in epObject.EP.DATA){
html += '<li class="arrow"><a id="' + epObject.EP.DATA[i][0] + '" href="#ePresentationDetails">' + epObject.EP.DATA[i][1] + '</a></li>';
}
html += '</ul>';
}
$('#ePresentationsData').html(html);
$('#ePresentationsData li a').click(function(e) {alert('what');setupEPresentationDetails(this.id);});
}
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getAllEPsID&sID=" + sID,true);
xmlhttp.send();
}
function setupEPresentationDetails(id){
/*xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var epObject = JSON.parse(xmlhttp.responseText);
var html = '<h1>Dr. ' + epObject.DATA[0][0] + ' E-Presentation</h1>';
html += '<p>';
//html += '<br />' + epObject.DATA[0][2].format("mmmm dd, yyyy");
html += '<br /><strong>Rating:</strong> ' + Math.ceil(epObject.DATA[0][4]) + ' / 5 (' + epObject.DATA[0][5] + ' votes cast)';
html += '<br /><br /><a rel="external" href="http://www.youtube.com/v/' + epObject.DATA[0][3] + '">Click here to view E-Presentation</a>';
html += '</p>';
$('#ePresentationDetailsData').html(html);
}
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getEP&id=" + id,true);
xmlhttp.send();*/
$('#ePresentationDetailsData').html('I dont get called?');
}
What am I doing wrong? Maybe there is a better way to do this?
Thanks!!

What version of JQT are you using?
Are you wrapping your entire app in the <div id="jqt"></div> ?
Have you looked at it using Safari developer mode to see what the list HREFs actually are when they are rendered?
I would look at the rendered HREF for these:
<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>
Make sure the html is what it should be. The rel= or your quotes not being escaped might be throwing it off. But I don't see anything obvious that you are doing wrong.
Do you have a link you can send me so I can debug it in action?