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>
Related
My drag and drop code does not apply to each new added list item individually, but instead applies to all the list items in one block. However, the purpose of the drag and drop is to make the list items individually sortable and draggable. Any clue to how to correct the code to apply to each new task/list item that is appended under the 'To Do' list?
var $addButton = $(".btn-primary");
var $removeButton = $(".btn-danger");
var $todoList = $(".uncomplete");
var $doneList = $(".completed");
//Take Text Input and Add <li> to To Do List
$addButton.on("click", function(){
//Creating object Variables
var $sort = $(".sort").val();
var $newTask = $(".newTask").val();
var $taskDescr = $(".taskDescr").val();
var $taskDate = $(".taskDate").val();
// var $category= $(".category").val();
var $category= $("input[type='radio'][name='category']:checked").val();
//var $importance = $("input[type='checkbox'][name='importance']:checked").val();
var $importance = $('<input type="checkbox" name="importance"/>').val();
var $newTaskString = $sort + ", " + $taskDescr + ", " + $newTask + ", " + $taskDate + ", " + $category + ", " + $importance + " ";
var $todoList = $(".uncompleted");
//call append method on $todoList
$todoList.append("<li>" + $newTaskString + "<button><span> Done</span></button><button><span> Remove</span></button></li>").addClass("todo");
//drag and drop array
function allowDrop(e)
{
console.log("allow drop");
e.preventDefault();
}
function drop(e)
{
console.log("drop");
e.preventDefault();
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.querySelector("#" + data));
}
function drag(e)
{
console.log("dragging");
//e.preventDefault();
e.dataTransfer.setData("text", e.target.id);
}
function showAllUsers(){
let allUsersDiv=document.querySelector("#allUsersDiv");
for(var i=0; i < allUsers.length; i++)
{
var newUserDiv=document.createElement("DIV");
newUserDiv.setAttribute("draggable", "true");
newUserDiv.setAttribute("ondragstart", "drag(event)"); //"editUser(this)"
newUserDiv.setAttribute("id", ("userdiv-" + i));
newUserDiv.setAttribute("style", "border:1px solid red;");
var newUserEditLink = document.createElement("A");
newUSerEditLink.setAttribute("href", "#");
newUSerEditLink.setAttribute("onclick", "editUSer(this)");
newUserEditLink.innerHTML = "Edit";
newUserEditLink.setAttribute("id", ("edit-", + i));
newUserDiv.innerHTML=allUsers[i].username;
newUserDiv.appendChild(nowUserEditLink);
allUsersDiv.appendChild(newUserDiv);
}
}
<div class="list-wrap" contenteditable="false">
<div class="list-inner-wrap">
<h2 class="title">ToDo List</h2>
<h3 class="title">Add Task</h2>
<!--<h4>Task Name</h4>-->
<label for="sort">Sort Order:</label><input type="text" class="sort"
name="sort" id="sort" value="" placeholder="A,B,C,etc.">
<br> </div></div>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-plus"> Add</span>
</button>
<h3 class="title">To Do</h2>
<h6><i>Click task item to edit or modify</i></h6>
<!--Change color of editable task -->
<div id='div' contenteditable='false' oninput='change()'>
<div id="allUsersDiv" ondragover="allowDrop(event)" ondrop="drop(event)" style="position:absolute;left:5px;top:450px;height:200px;width:500px; border: 1px solid black">
<div draggable="true" ondragstart="drag(event)">
<ul class="uncompleted" contenteditable="false" id="id01" >
<li>Need to be completed task
<button class="btn btn-success">
<span class="glyphicon glyphicon-ok"> Done</span>
</button>
<button class="btn btn-danger">
<span class="glyphicon glyphicon-remove"> Remove</span></button>
<br>
</li></ul>
</div></div></div>
This is my laravel view code. Here,I am trying to increment the counter value(ie.,value="0/5") . I have the input fields inside the modal and when clicking on the save button which is inside the model, the value should get incremented based on the filled input fields.ie(1/5..2/5..)
I have tried to increment those counter value.But it displays NaN
var val;
$("input").click(function() {
val = $('#counter').val();
val++;
$('#counter').prop('value', val)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none">
</div>
<script type="text/javascript">
$("input").click(function() {
let val = parseInt($('#counter').val().split('/')[0]);
$('#counter').prop('value', `${++val}/5`);
});
</script>
Actually your code is working fine. Since you have the view inside a modal, which is only displayed or shown on a click event, you should use the jQuery "on" method to enhance your click handler function definition. In that case you should have your code working
var val;
$(document).on('click','#counter',function()
{
val = $('#counter').val();
val++;
$('#counter').prop('value',val )
});
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i>
Price,stock and Shipping Information<input type="submit" id="counter"
**value="0/5"** style="background-color: transparent; border:none">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You can use regular expression to parse data before / character
var val;
$("input").click(function() {
val = $('#counter').val();
qty = val.match(/[^/]*/i)[0];
qty++;
$('#counter').prop('value', qty)
});
If you want to increase like this 1/5..2/5 .Use split and increase only upper value .
var val;
$("input").click(function() {
val = $('#counter').val().split("/");
//check eqal value with base
if(val[0] == val[1]) {
return false;
}
val[0]++;
$('#counter').prop('value', val[0]+"/"+val[1]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none">
</div>
Here is your solution:
$("input").click(function() {
var val = $('#counter').val();
$('#counter').prop('value', `${++val % 6}/5`);
});
And a working fiddle:
https://jsfiddle.net/wv2x0mx5/4/
You can also try this.
$("#counter").on("click",function(){
var counterBtn = document.getElementById("counter");
var count = counterBtn.value;
//alert(count.split("/")[0]);
count = count.split("/");
counterBtn.value = ((parseInt(count[0])+1)%(parseInt(count[1])+1))+"/"+count[1];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none">
</div>
I tried with .next(), .closest() .parent() but non of them worked.
Here is my html markup:
<div id="arrownav1" class="ct_as_arrow_nav ">
<div class="ct_amy_arrows_next">
<i class="fa fa-angle-right next-arrow"></i>
</div>
<div class="ct_amy_arrows_prev">
<i class="fa fa-angle-left prev-arrow"></i>
</div>
</div>
I am trying to show left arrow after user does the first click on the right arrow.
I hide it with:
jQuery('.ct_amy_arrows_prev').removeClass("prev_show");
Then I show it with:
jQuery('.ct_amy_arrows_prev').addClass("prev_show");
It works but since there are multiple instances of that slider on a page click on the first slider activates all left arrows on all sliders.
So I need a way to just activate that closest element and add prev_show class to it.
What am I doing wrong?
The whole nav code:
//Navigation
//==================================================
function initButtons() {
jQuery('#arrownav' + sliderID + ' .next-arrow').click(function() {
gonext();
});
jQuery('#arrownav' + sliderID + ' .prev-arrow').click(function() {
goprev();
});
}
var stopnextslide = 0;
function gonext() {
var stopnextslide = 0;
var n = jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').length;
jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').each(function() {
if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) + 3 == n) {
deck.slide(0);
stopnextslide = 1;
}
});
if (stopnextslide != 1) {
jQuery(this).closest(".ct_as_arrow_nav").find(".ct_amy_arrows_prev").addClass("prev_show");
deck.next();
}
};
function goprev() {
var stopnextslide = 0;
var n = jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').length;
jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').each(function() {
if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) == 3) {
deck.slide(n - 1);
stopnextslide = 1;
}
if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) == 1) {
}
});
if (stopnextslide != 1) {
deck.prev();
}
};
Thanks
You know the structure. Just navigate up to the parent then search for the previous button. No need to use expensive operations like closest
$('.ct_amy_arrows_next').on('click', function() {
$(this).parent().find('.ct_amy_arrows_prev').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrownav1" class="ct_as_arrow_nav ">
<div class="ct_amy_arrows_next">
<i class="fa fa-angle-right next-arrow">></i>
</div>
<div class="ct_amy_arrows_prev" style="display: none;">
<i class="fa fa-angle-left prev-arrow"><</i>
</div>
</div>
You can achieve this using closest and find methods:
$('.next-row').click(function(){
$(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});
$('.next-arrow').click(function(){
$(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});
.prev_show{
color:red;
}
i{
font-size:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div id="arrownav1" class="ct_as_arrow_nav ">
<div class="ct_amy_arrows_next">
<i class="fa fa-angle-right next-arrow"></i>
</div>
<div class="ct_amy_arrows_prev">
<i class="fa fa-angle-left prev-arrow"></i>
</div>
</div>
<div id="arrownav2" class="ct_as_arrow_nav ">
<div class="ct_amy_arrows_next">
<i class="fa fa-angle-right next-arrow"></i>
</div>
<div class="ct_amy_arrows_prev">
<i class="fa fa-angle-left prev-arrow"></i>
</div>
</div>
You can do it like this:
$(this).closest(".ct_as_arrow_nav")
.find(".ct_amy_arrows_prev")
.removeClass("prev_show");;
Or like this:
$(this).parent()
.next(".ct_amy_arrows_prev")
.removeClass("prev_show");
Note: If the navs are dynamically created then consider binding the events like this!
Edit:
Change your initButtons to this:
function initButtons() {
jQuery('#arrownav' + sliderID + ' .next-arrow').click(gonext);
jQuery('#arrownav' + sliderID + ' .prev-arrow').click(goprev);
}
So that gonewt and goprev will have this bound to the arrow buttons.
I have a sample program using JQuery
DEMO
I'm having a trouble in adding new table row using data attribute, that should be displayed before the button or with the table row.
JS:
var newhtml = '<table><tr><td>data1</td><td>data2</td><td>data3</td></tr><!--show here--><!--new table row added in clicking more--><tr><td></td><td></td><td><button>more</button></td></tr></table>';
$(".advanced-info").click(function(){
console.log($("#" + $(this).attr("data-div")).html().length);
if ($("#" + $(this).attr("data-div")).html().length > 0) {
$("#" + $(this).attr("data-div")).empty();
} else {
$("#" + $(this).attr("data-div")).append(newhtml);
}
});
output
I apologize my problem is not clear
Here you go:
I've changed the usage of .attr to .data.
var newhtml = '<table><tr><td>data1</td><td>data2</td><td>data3</td></tr><tr><td></td><td></td><td><button>more</button></td></tr></table>';
$(".advanced-info").click(function() {
console.log($("#" + $(this).attr("data-div")).html().length);
if ($("#" + $(this).data("div")).html().length > 0) {
$("#" + $(this).data("div")).empty();
} else {
$("#" + $(this).data("div")).append(newhtml);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' class='advanced-info' data-div='adv1'>Advanced Options</a>
<div id='adv1'></div>
<br/>
<br/>
<a href='#' class='advanced-info' data-div='adv2'>Advanced Options</a>
<div id='adv2'>
</div>
<br/>
<br/>
<a href='#' class='advanced-info' data-div='adv3'>Advanced Options</a>
<div id='adv3'></div>
Try this way.
var newhtml = '<table><tr style="display:none;"><td>data1</td><td>data2</td><td>data3</td></tr><tr><td></td><td></td><td><button>more</button></td></tr></table>';
$(".advanced-info").click(function() {
console.log($("#" + $(this).attr("data-div")).html().length);
if ($("#" + $(this).attr("data-div")).html().length > 0) {
$("#" + $(this).attr("data-div")).empty();
} else {
$("#" + $(this).attr("data-div")).append(newhtml);
}
});
$("div").on("click", "button", function() {
$(this).closest("table").find("tr:eq(0)").css("display", "table-row");
$(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href='#' class='advanced-info' data-div='adv1'>Advanced Options</a>
<div id='adv1'></div>
<br/>
<br/>
<a href='#' class='advanced-info' data-div='adv2'>Advanced Options</a>
<div id='adv2'></div>
<br/>
<br/>
<a href='#' class='advanced-info' data-div='adv3'>Advanced Options</a>
<div id='adv3'></div>
Hope this your need!
I have two div html elements with different id and here I am using spinner. Whenever values in the spinner input changes alert box will be displayed.
HTML code
<div id="accordion2" class="panel-group" style="display: block;">
<div id="accordion2" class="panel-group">
<div id="Tea">
<div class="spinner Tea input-group ">
<input type="text" id = "servings" class="form-control input- sm" value="Tea"/>
<div class="input-group-btn-vertical">
<button class="btn Tea btn-default">
<i class="fa fa-caret-up"></i>
</button>
<button class="btn Tea btn-default">
<i class="fa fa-caret-down"></i>
</button>
</div>
<h4 id="energy" class="Tea"> Tea </h4>
</div>
<div id="Coffee">
<div class="spinner Coffee input-group ">
<input type="text" id = "servings" class="form-control input-sm" value="Coffee"/>
<div class="input-group-btn-vertical">
<button class="btn Coffee btn-default">
<i class="fa fa-caret-up"></i>
</button>
<button class="btn Coffee btn-default">
<i class="fa fa-caret-down"></i>
</button>
</div>
<h4 id="energy" class="Coffee">Coffee</h4>
</div>
</div>
</div>
JQuery code
$(function(){
$('.spinner:first-of-type input').on('click', function() {
$('.spinner:first-of-type input').val(parseInt($('.spinner:first-of-type input').val(), 10) + 1);
var val = $('.spinner:first-of-type input').val();
changeValues(val);
});
$('.spinner:last-of-type input').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
});
function changeValues(value){
alert($('#energy').attr('class').split(' '));
};
});
But in the alert box whenever I click the spinner up arrow only Tea is displayed.
what I expect is when the spinner is clicked from Tea div tea should be displayed and when from coffee , coffee should be displayed.Please help me out
I'm not sure I totally got what you are trying to do, but it seems to me that you want to increment and decrement number of beverage cups on up/down buttons click. For this you would better modify mark up a little (remove duplicated ids, add classes for convenience). And I may look like this then:
$(function() {
$('.spinner').on('click', '.servings', function(e) {
$(this).val(parseInt($(this).val() || 0, 10) + 1);
var val = $(this).val();
changeValues.call(e.delegateTarget, val);
})
.on('click', '.up', function(e) {
$(e.delegateTarget).find('.servings').val(function() {
return ++this.value;
});
})
.on('click', '.down', function(e) {
var $input = $(e.delegateTarget).find('.servings');
if (+$input.val() > 1) {
$input.val(function() {
return --this.value;
});
}
});
function changeValues(value) {
var type = $(this).find('.energy').data('type');
alert(type);
};
});
Demo: http://plnkr.co/edit/9vXC0RipxkzqhXrHJAKD?p=preview
try this:
$(function () {
$('.spinner').each(function () {
var $el = $(this),
$buttons = $el.find('button'),
$h4 = $el.find('h4'),
input = $el.find('input').get(0);
function showAlert() {
alert($h4.get(0).className);
}
$buttons.eq(0).on('click', function (event) {
event.preventDefault();
input.value = (parseInt(input.value, 10) || 0) + 1;
showAlert();
});
$buttons.eq(1).on('click', function (event) {
event.preventDefault();
input.value = (parseInt(input.value, 10) || 0) - 1;
});
});
});
JSFiddle http://jsfiddle.net/yLtn57aw/2/
Hope this helps