Следующий оператор добавляет значение к элементу с идентификатором response
$('#response').append(total);
. Это делает его похожим на то, что вы объединяете строки, но вы не являетесь, вы на самом деле добавив их к элементу
, измените это на
$('#response').text(total);
Вам нужно изменить событие drop, чтобы оно заменило значение элемента на общее число, вам также необходимо сохранить отслеживать, что такое сумма, я предлагаю что-то вроде следующего
$(function() {
var data = [];
var total = 0;
$( "#draggable1" ).draggable();
$( "#draggable2" ).draggable();
$( "#draggable3" ).draggable();
$("#droppable_box").droppable({
drop: function(event, ui) {
var currentId = $(ui.draggable).attr('id');
data.push($(ui.draggable).attr('id'));
if(currentId == "draggable1"){
var myInt1 = parseFloat($('#MealplanCalsPerServing1').val());
}
if(currentId == "draggable2"){
var myInt2 = parseFloat($('#MealplanCalsPerServing2').val());
}
if(currentId == "draggable3"){
var myInt3 = parseFloat($('#MealplanCalsPerServing3').val());
}
if ( typeof myInt1 === 'undefined' || !myInt1 ) {
myInt1 = parseInt(0);
}
if ( typeof myInt2 === 'undefined' || !myInt2){
myInt2 = parseInt(0);
}
if ( typeof myInt3 === 'undefined' || !myInt3){
myInt3 = parseInt(0);
}
total += parseFloat(myInt1 + myInt2 + myInt3);
$('#response').text(total);
}
});
$('#myId').click(function(event) {
$.post("process.php", ({ id: data }), function(return_data, status) {
alert(data);
//alert(total);
});
});
});
. Я перенесла оператор var total = 0;
из события перетаскивания и изменила статус назначения из этого
total = parseFloat(myInt1 + myInt2 + myInt3);
к этому
total += parseFloat(myInt1 + myInt2 + myInt3);
Вот рабочий пример http://jsfiddle.net/axrwkr/RCzGn/
Во-первых, вы используете старую версию Google Chart.
jsapi
больше не должен использоваться, см. обновление кода загрузчика библиотеки .
нужно использовать следующую библиотеку вместо ...
<script src="https://www.gstatic.com/charts/loader.js"></script>
это только изменит оператор load
.
и, говоря об операторе load
,
будет ждать загрузки страницы по умолчанию,
, чтобы вы могли использовать ее вместо. ..
$( window ).on( "load"...
и $(document).ready
и т. Д.
рекомендуют настройку, аналогичную следующей ...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var options = {
height: 350,
legend: {
position: 'bottom'
},
hAxis: {
title: 'Years'
},
vAxis: {
title: 'Property Value'
},
backgroundColor: '#f1f8e9'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
$.ajax({
url: url,
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
},
type: "POST",
data: {
'annual_capital_growth':annual_capital_growth,
'property': property,
'forcast_period': forcast_period,
},
context: this
}).done(function (response, status, jqXHR) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Years');
data.addColumn('number', 'Property Name');
data.addColumn('number', 'Compute Times');
data.addColumn('number', 'Compute Times2');
data.addRows(response.graphArray);
function resize() {
chart.draw(data, options);
}
resize();
$(window).resize(resize);
}).fail(function (jqXHR, status, errorThrown) {
console.log(errorThrown);
});
});