I am facing a problem in contact form 7, and I would like to have some help. The problem that I am having is that I have a set of Check boxes that I would like to have a total show when a client clicks on it.
MY Check box: (multiple select ) can pick more then one
[checkbox GRCGA class:multipal use_label_element "$10.00" "$20.00" "$25.00" "$50.00" "$75.00" "$100.00" "$200.00" "$400.00" "$500.00"]
Total Amount: <span id="total">$00</span>.00
Jvascript:
$("input[type=checkbox]").change(function(){
updateTotal();
});
function updateTotal(){
var total = 0;
$("input[type=checkbox]:checked").each(function(){
total += parseFloat($(this).val());
});
$("#total").html(total);
}
Will this work to get the total amount when they select one or more to get the amount that they want.
<script>
$(document).ready(function() {
$("input[type=checkbox]").on("change", function() {
var tot = 0;
$("input[type=checkbox]:checked").each(function() {
var val = this.value.substr(1).split(' ')[0];
tot += +(val);
});
$("#result").text("Total: $" + tot);
});
});
</script>
Hope this will help you
Related
Please see this plunker
https://plnkr.co/edit/cOuQ5YPdQDl6oDvoUSSn?p=preview
If i put filter on any column, eg from Gold i remove 8 then the total should get refreshed. How can this be achieved
enter code herefunction
CustomPinnedRowRenderer () {}
CustomPinnedRowRenderer.prototype.init = function(params) {
this.eGui = document.createElement('div');
this.eGui.style = params.style;
this.eGui.innerHTML = params.value;
};
CustomPinnedRowRenderer.prototype.getGui = function() {
return this.eGui;
};
It's not updated cuz it doesn't relate with visible data, it's binding to real (immutable, memory data)
But for sure you can create a workaround and handle pinnedData by yourself
onFilterChanged:(params)=>{
let result = {
gold:0,
silver:0,
bronze:0
}
setTimeout(()=>{
params.api.forEachNodeAfterFilter(i=>{
result.gold += Number(i.data.gold);
result.bronze += Number(i.data.bronze);
result.silver += Number(i.data.silver);
});
console.log(result);
params.api.setPinnedTopRowData([result]);
},0)
}
Add this part to your gridOptions.
One notice: currently we should use setTimeout inside onFilterChanged cuz grid doesn't provide updated data inside this event, the ag-grid team informed about
AG-2078 Filter Cell Renderer refreshes before grid has finished updating
I have this code,
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1ntnhvfMhYtFNwFjkoKu8cUZOQPCaT5_U1Z6piB_w0-E/edit#gid=0');
query.setQuery('order by A');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var options = {
title: 'TEMP & HUMID',
hAxis: {
direction: -1
},
legend: 'none'
};
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.getElementById('columnchart'));
chart.draw(data, options);
}
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<div id="columnchart" style="width: 900px; height: 500px"></div>
</body>
</html>
And here is my spreadsheet data: https://docs.google.com/spreadsheets/d/1ntnhvfMhYtFNwFjkoKu8cUZOQPCaT5_U1Z6piB_w0-E
What I want to do is to plot last 5 data. i.e) row 8 - 12 in my spreadsheet.
I tried the limit and range queries, but what I want to do is, if a new data comes in, I want the chart to refer the updated last 5 data i.e) row 9 -13
How could I achieve this?
I don't know if this is a best approach, but I work it out.
So, before drawing the table, I actually called the spreadsheet in JSON format and retrieve its column length.
Then I subtracted the column length by number of data I want to display (limit query) which will give me offset to start.
Then I made a string with the value of limit and offset to pass the query option to query.setQuery.
Here is the code for the part.
function drawChart() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1NSEbUWojJsMzhH0hi8kx8ic7Xxuq29z0c7BXs-inzb8/edit#gid=0');
$.getJSON("https://spreadsheets.google.com/feeds/list/1NSEbUWojJsMzhH0hi8kx8ic7Xxuq29z0c7BXs-inzb8/od6/public/basic?hl=en_US&alt=json", function(data) {
colLen = data.feed.entry.length;
console.log(colLen);
limit = 4;
var offset = colLen - limit;
console.log(offset);
queryOption = "limit "+limit+" offset "+offset;
console.log(queryOption);
query.setQuery(queryOption);
query.send(handleQueryResponse);
});
}
I want to use crossfilter's reduceSum function dc.leaflet.js, and display the sum instead of the number of clustered markers.
The first example for dc.leaflet.js uses reduceCount. Additionally it doesn't use the reduced value; it just displays the number of markers in the cluster.
I want to use the sum of data using reduceSum.
Here is my data as tsv:
type geo say
wind 38.45330,28.55529 10
wind 38.45330,28.55529 10
solar 39.45330,28.55529 10
Here is my code:
<script type="text/javascript" src="../js/d3.js"></script>
<script type="text/javascript" src="../js/crossfilter.js"></script>
<script type="text/javascript" src="../js/dc.js"></script>
<script type="text/javascript" src="../js/leaflet.js"></script>
<script type="text/javascript" src="../js/leaflet.markercluster.js"></script>
<script type="text/javascript" src="../js/dc.leaflet.js"></script>
<script type="text/javascript">
/* Markers */
d3.csv("demo1.csv", function(data) {
drawMarkerSelect(data);
});
function drawMarkerSelect(data) {
var xf = crossfilter(data);
var facilities = xf.dimension(function(d) { return d.geo; });
var facilitiesGroup = facilities.group().reduceSum(function(d){return d.say});
dc.leafletMarkerChart("#demo1 .map")
.dimension(facilities)
.group(facilitiesGroup)
.width(1100)
.height(600)
.center([39,36])
.zoom(6)
.cluster(true);
var types = xf.dimension(function(d) { return d.type; });
var typesGroup = types.group().reduceSum(function(d){return d.say});
dc.pieChart("#demo1 .pie")
.dimension(types)
.group(typesGroup)
.width(200)
.height(200)
.renderLabel(true)
.renderTitle(true)
.ordering(function (p) {
return -p.value;
});
dc.renderAll();
}
</script>
I have rewritten the question because it was very unclear. I agree with #Kees that the intention was probably to display the sum in a clustered marker chart, rather than "reduceSum doesn't work".
#Kees also pointed out a Leaflet.markercluster issue which gives basic information about how to display a sum inside a marker cluster.
The question becomes, how to apply these customizations to dc.leaflet.js?
First, I've created a version of the example data with another column rnd:
type geo rnd
wind 43.45330,28.55529 1.97191
wind 43.44930,28.54611 3.9155
wind 43.45740,28.54814 3.9922
...
We can use reduceSum like this:
var facilitiesGroup = facilities.group().reduceSum(d => +d.rnd);
And annotate each marker with its value by overriding .marker(), wrapping the default callback:
const old_marker_function = marker.marker();
marker.marker(function(d, map) {
const m = old_marker_function(d, map);
m.value = d.value;
return m;
});
And we can specify a different rendering of the icon using .clusterOptions():
marker.clusterOptions({
iconCreateFunction: function(cluster) {
var children = cluster.getAllChildMarkers();
var sum = 0;
for (var i = 0; i < children.length; i++) {
sum += children[i].value;
}
sum = sum.toFixed(0);
var c = ' marker-cluster-';
if (sum < 10) {
c += 'small';
} else if (sum < 100) {
c += 'medium';
} else {
c += 'large';
}
return new L.DivIcon({ html: '<div><span>' + sum + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
}
});
The example given in the above issue was missing any styling, so I copied the implementation of _defaultIconCreateFunction from the Leaflet.markercluster sources, and modified it.
Demo fiddle
As expected, the numbers are close to 2.5 times the original numbers (since the new column is a random number from 0 to 5).
Putting numbers on the individual markers
marker.icon() allows you change the icon for individual markers, so you can use DivIcon with similar styling to display the numbers:
marker.icon(function(d, map) {
return new L.DivIcon({
html: '<div><span>' + d.value.toFixed(0) + '</span></div>',
className: 'marker-cluster-indiv marker-cluster',
iconSize: new L.Point(40, 40) });
});
This introduces a new class .marker-cluster-indiv to distinguish it from the others; in the new fiddle I've colored them blue with
.marker-cluster-indiv {
background-color: #9ecae1;
}
.marker-cluster-indiv div {
background-color: #6baed6;
}
The interaction is perhaps less clear since clicking blue dots brings up a popup instead of expanding. Perhaps a different icon should be used.
The reduceSum part should work fine, since that is just a different crossfilter function.
Are you sure that your data is getting read correctly? You state that it is a tsv file, and show code that looks like it is tab-separated, but then you use d3.csv to load it, which would have pretty bad effects considering there is a comma in the middle of the second field.
Please try console.log(data) after your data is loaded, and verify that it is loading correctly.
Also, you do not state what problem you encounter. "It doesn't work" does not help us help you.
I'm using the backstretch jquery to cycle images on my website. I can get the images to cycle fine, but I'm trying to add "next" and "previous" buttons, and I can't get them to work.
When I click on the next button, nothing happens.
My next button looks like this:
<a id="next" href="#"><img src="/images/arrow-right.png">
And I'm putting all my jquery code at the bottom of the page before the body close tag.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.backstretch.js"></script>
<script>
var images = [
"/images/backgrounds/Image01.jpg",
"/images/backgrounds/Image02.jpg",
"/images/backgrounds/Image03.jpg"
];
$(images).each(function() {
$('<img/>')[0].src = this;
});
// The index variable will keep track of which image is currently showing
var index = 0;
$.backstretch(images[index], {speed: 500});
$('#next').click(function(x) {
x.preventDefault();
$('body').data('backstretch').next();
});
$('#prev').click(function(x) {
x.preventDefault();
$('body').data('backstretch').prev();
});
</script >
Using firebug to debug, I get this:
TypeError: $(...).data(...) is undefined
$('body').data('backstretch').next();
The backstretch call was wrong.
Instead of this:
$.backstretch(images[index], {speed: 500});
I wanted this:
$.backstretch(images, {speed: 500});
$('body').data('backstretch').pause();
It's not that the next/prev buttons weren't working, it's that the initial call was passing the first image, not the set of images.
The second line (w/ pause in it) is there so the images don't change automatically, they only change when I hit the next/prev buttons.
Try this instead:
$('body').backstretch(images[index], {speed: 500});
$('#next').click(function(x) {
x.preventDefault();
$('body').data('backstretch').next();
});
$('#prev').click(function(x) {
x.preventDefault();
$('body').data('backstretch').prev();
});
I'm trying to fix this same problem of yours...
var rootUrl = "http://www.sagmeisterwalsh.com";
var images = [
rootUrl+"/images/u_work/Aizone-11.jpg",
rootUrl+"/images/u_work/Aizone-12.jpg",
rootUrl+"/images/u_work/Aizone-13.jpg"
];
$(images).each(function() {
$('<img/>')[0].src = this;
});
var index = 0;
var i = 1;
$.backstretch(images[index], {
fade: 750,
duration: 4000
});
$('#next').click(function(x) {
x.preventDefault();
$.backstretch(images[i++], {
fade: 750,
duration: 4000
});
$('#output').html(function(i, val) { return val*1+1 });
});
$('#prev').click(function(x) {
x.preventDefault();
$.backstretch(images[i--], {
fade: 750,
duration: 4000
});
$('#output').html(function(i, val) { return val*1-1 });
});
Try this:
http://jsfiddle.net/XejZV/
I am new to JS and trying to learn some basic stuff. I have spent hours on this but i don't think it should be that difficult. For some reason, my computer is not recognizing that I am asking for childNodes.
This is a simply script that is only trying to count the number of li tags I have. I know there are other ways to do this but i am trying to learn this way.
<title>To-Do List</title>
<script>
function findComments(){
var bodyTag = document.getElementsByTagName("ol");
var count = 0;
for(var i=0;i<bodyTag.childNodes.length;i++){
if(bodyTag.childNodes[i].nodeType == 1){
count++;
}
}
alert(count);
}
window.onload = findComments;
</script>
<!--List is declared-->
<ol id="toDoList">
<!--List Items are created-->
<li>Mow the lawn</li>
<li>Clean the windows</li>
<li>Answer your email</li>
</ol>
<!--Main paragraph-->
<p id="toDoNotes">Make sure all these are completed by 8pm so you can watch the game on TV!</p>
<script>
</script>
getElementsByTagName returns an array, you need to retrieve its first element (and change the name from bodyTag to olTag or something since it's not the body tag and confused the heck out of me trying to make sense of your code)
function findComments(){
var ol = document.getElementsByTagName("ol")[0];
var count = 0;
for(var i=0;i<ol.childNodes.length;i++){
if(ol.childNodes[i].nodeType == 1){
count++;
}
}
alert(count);
}
And here's what you really should do now that you know what's wrong with your code
var ol = document.getElementsByTagName("ol")[0];
var liCount = ol.getElementsByTagName("li").length;