Develop Reference

How to add auto-increment in the DOM

I have a problem to add auto-increment function in the javascript. For example if Kod Terakhir is 100-1/5, when showing the input field is 100-1/6, that mean every time will detect from the Kod Terakhir number and add 1 behind the number.
Below is my javascript code:
var id_selected = selectObject.value;
var cate_id_selected = selectObject.selectedOptions[0].getAttribute("data-cat_id");
var root_selected = selectObject.selectedOptions[0].getAttribute("data-root");
var action = 'find_max_code';
$.ajax({
url:'?f=kod_perfailan',
type:'POST',
data:{id_selected: id_selected,
cate_id_selected: cate_id_selected,
root_selected: root_selected,
action: action
},
success:function(data) {
if(data.trim() !== ""){
// document.getElementById("function_code_last").innerHTML = "*Kod Terakhir: " + data;
document.getElementById("activity_code_last").innerHTML = "*Kod Terakhir: " + data;
document.getElementById("sub_activity_code_last").innerHTML = "*Kod Terakhir: " + data;
document.getElementById("transaction_code_last").innerHTML = "*Kod Terakhir: " + data;
document.getElementById("activity_code").value = data + 1;
document.getElementById("sub_activity_code").value = data + 1;
document.getElementById("transaction_code").value = data + 1;
}else{
// document.getElementById("function_code_last").innerHTML = "*Tiada Data Disimpan";
document.getElementById("activity_code_last").innerHTML = "*Tiada Data Disimpan";
document.getElementById("sub_activity_code_last").innerHTML = "*Tiada Data Disimpan";
document.getElementById("transaction_code_last").innerHTML = "*Tiada Data Disimpan";
}
}
Below is my output, but it is wrong, because the input field should be 100-1/6, not 100-1/51. I think my code data + 1; here is got problem.
Actually I want the success output is below the picture:
So that, below is the input field may show the number format (example):
100-1/xxxx
100-1/5/xxxx
100-1/5/10/xxxx
256-1/10/xxxx
That means, xxxx number need to add 1 every time to do the auto-increment. My number is store in the data.
Hope someone can guide me how to solve this problem. Thanks.

You need to tokenize the string, remove and increment the part that you are interested in. It seems that you are simply performing a string concatenation operation.
function incrementSubActivityCode(sac) {
var p = sac.lastIndexOf("/") + 1;
return (p === 0) ? sac :
sac.substr(0, p) + (parseInt(sac.substr(p)) + 1);
}
// Example value
var data = "100-1/5/10/5";
// Incorrect - performs concatenation
document.getElementById("sub_activity_code").value = data + 1;
// Corrected - now performs increment
document.getElementById("sub_activity_code").value = incrementSubActivityCode(data);

Im trying to auto populate in javascript some calculated user input... can you tell me why this keeps getting a parsing error?

trying to get the calculation results of user input and auto-populate them into the text input fields.. and it keeps giving me a parsing error...
enter code here
function add_number(){
var monthlyPayment = parseInt(document.getElementById("monthlyPayment").value);
var maintFees = parseInt(document.getElementById("maintFees").value);
var memFees = parseInt(document.getElementById("memFees").value);
ar exchFees = parseInt(document.getElementById("exchFees").value);
var result = (monthlyPayment?monthlyPayment:0) + (maintFees?maintFees:0) + (memFees?memFees:0) +
(exchFees?exchFees:0);
document.getElementById("txtresult").value = result;}
function mpTwelve(){
var monPay = parseInt(document.getElementById("monthlyPayment").value);
var monTwe = monPay * 12;
document.getElementById("mpTimesTwelve").value = monTwe;}
function maintTwelve(){
var maintPay = parseInt(document.getElementById("maintFees").value);
var maintTwe = maintPay * 12;
document.getElementById("maintTimesTwelve").value = maintTwe;}
Array.from(document.getElementsByClassName('input')).forEach((i)=>{
i.addEventListener('change', (event) => {add_number();mpTwelve();maintTwelve();})})

For loop inside getjson - Framework7/Jquery

I have a for loop inside a getjson call, but the loop not work…
var woeid = '455827';
var yql = encodeURIComponent('select * from weather.forecast where woeid = "' + woeid + '"and u="c"')
$$.getJSON('https://query.yahooapis.com/v1/public/yql?q='+ yql + '&format=json', function (data) {
var forecast = data.query.results.channel.item.forecast;
//Forecast
for(var i=0;i<=forecast.length;i++){
//Get
code = data.query.results.channel.item.forecast[i].code;
data = data.query.results.channel.item.forecast[i].date;
weekday = data.query.results.channel.item.forecast[i].day;
max = data.query.results.channel.item.forecast[i].high;
min = data.query.results.channel.item.forecast[i].low;
console.log(max);
}
});},3000)
The loop not work and console.log show nothing… What's wrong?
Thanks

Solved: I change my code to this:
Rather than
var forecast = data.query.results.channel.item.forecast;
for(var i=0;i<=forecast.length;i++){
//Get
code = data.query.results.channel.item.forecast[i].code;
data = data.query.results.channel.item.forecast[i].date;
weekday = data.query.results.channel.item.forecast[i].day;
max = data.query.results.channel.item.forecast[i].high;
min = data.query.results.channel.item.forecast[i].low;
}
I did
var forecast = data.query.results.channel.item.forecast;
for(var i=0;i<=forecast.length;i++){
//Pega
code = forecast[i].code;
data = forecast[i].date;
weekday = forecast[i].day;
max = forecast[i].high;
min = forecast[i].low;
}
Although I believe that the first code should work, the second code works for me like a charm
Thank you all :)

Something not right with AJAX code

I have a page with a menu of categories and subcategories of products.
Categories have a class 'category' and subcategories have a class 'subcategory'. When either is clicked some AJAX sends the category to some php to compile the html which the AJAX then sends back to the page to populate a div. This part works fine.
There is a function in the code to split the returned records. So say there are 6 records and the page is to show 2 at a time then there are 3 pages. I get the correct amount of pages displayed(1 2 3) but all 6 records displayed on each!
Can anyone see the problem?
$('a.category, a.subcategory').click(function (e) {
// first stop the link to go anywhere
e.preventDefault();
// get the class of the link
var linkClass = $(this).attr("class");
//get the text of the link by converting the clicked object to string
var linkText = new String(this);
// the value after the last / is the category ID
var categoryValue = linkText.substring(linkText.lastIndexOf('/') + 1);
// put the post parameters into 'params' to pass through the AJAX post request
var params = {};
params[linkClass] = categoryValue;
// send the category ID to the getProductData.php script using jquery ajax post method
// send along a category ID
// on success insert the returned text into the chosen div
$.post('../inc/showproducts.php', params, function (data) {
//find total number of records
var totalRecords = $(data).length;
//define how many records shown per page
var pageSize = 2
//work out number of pages needed to hold records
var numOfPages = Math.ceil(totalRecords / pageSize);
//make page links
var i,
pageLinks = '<div class="pageLinks">';
for (i = 0; i < numOfPages; i++) {
pageLinks += '<a href="#" onclick="showProductPage(' + i + ');return false;">' + (i + 1) + '<\/a> ';
}
pageLinks += '<\/div>';
//display returned data and page links in chosen div (.showproduct)
$('.showproduct').html(pageLinks + data);
showProductPage(0);
});
});
//function to slice up records into pages
function showProductPage(pageNo) {
var perPage = 2;
var start = pageNo * perPage;
var end = start + perPage;
$('.image').hide().filter(function (index) {
return ((index > (start - 1)) && (index < end));
}).show();
}

//check out this line of your code
$('.showproduct').html(pageLinks + data);
The data var has all the records in it still. You have to get each data[position] with a for loop that iterates based on pageSize * pageNum. So page 1 would look like
var iterationSize = pageSize * pageNum; //(2 * 1 = 2)
var i;
var j = 0;
var pageData[];
for(i = pageNum - 1; i < iterationSize; i++, j++){
pageData[j] = data[i];
}
$('.showproduct').html(pageLinks + pageData.join(''));

Assistance needed with Jquery if statement for calculated fields

ow would I write a script that would allow the option of having the user enter a percentage and a dollar amount is calculated or a dollar amount and a percentage is calculated? Currently my form only allows for the entry of a percentage and the dollar amount is calculated, but I need for the user to be able to enter either and have the form automatically calculate the missing element. Here is the code that I am using to calculate the dollar amount:
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".TextBox").hover(function(){
$(this).toggleClass('TextBoxSelected');
},function(){
$(this).toggleClass('TextBoxSelected');
}).change(function(){
calculate();
});
});
function getFldValue(fldValue) {
return isNaN(fldValue) ? 0 : parseFloat(fldValue);
}
function calculate() {
var property_SPrice = getFldValue($('#property_SPrice').val());
var price = getFldValue($('#price').val());
var REO_sale_percentage = getFldValue($('#REO_sale_percentage').val());
var REO_sale_dollars = getFldValue($('#REO_sale_dollars').val());
var REO_sale_bonus_dollars = getFldValue($('#REO_sale_bonus_dollars').val());
var REO_sale_fixed_dollars = getFldValue($('#REO_sale_fixed_dollars').val());
var REO_sale_total_dollars = getFldValue($('#REO_sale_total_dollars').val());
var REO_list_percentage = getFldValue($('#REO_list_percentage').val());
var REO_list_dollars = getFldValue($('#REO_list_dollars').val());
var REO_list_bonus_dollars = getFldValue($('#REO_list_bonus_dollars').val());
var REO_list_fixed_dollars = getFldValue($('#REO_list_fixed_dollars').val());
var REO_list_total_dollars = getFldValue($('#REO_list_total_dollars').val());
var gr_comm_percentage = getFldValue($('#gr_comm_percentage').val());
var gr_comm_dollars = getFldValue($('#gr_comm_dollars').val());
var gr_bonus_dollars = getFldValue($('#gr_bonus_dollars').val());
var gr_fixed_dollars = getFldValue($('#gr_fixed_dollars').val());
var gr_total_dollars = getFldValue($('#gr_total_dollars').val());
$('#price').val(property_SPrice);
$('#gr_comm_percentage').val(REO_list_percentage + REO_sale_percentage);
$('#gr_comm_dollars').val(getFldValue(REO_list_dollars + REO_sale_dollars));
$('#REO_list_dollars').val(getFldValue(REO_list_percentage/100*price));
$('#REO_sale_dollars').val(getFldValue(REO_sale_percentage/100*price));
$('#gr_fixed_dollars').val(getFldValue(REO_list_fixed_dollars + REO_sale_fixed_dollars));
$('#gr_bonus_dollars').val(getFldValue(REO_list_bonus_dollars + REO_sale_bonus_dollars));
$('#gr_total_dollars').val(getFldValue(REO_sale_total_dollars + REO_list_total_dollars));
$('#REO_sale_total_dollars').val(getFldValue(REO_sale_dollars + REO_sale_fixed_dollars + REO_sale_bonus_dollars));
$('#REO_list_total_dollars').val(getFldValue(REO_list_dollars + REO_list_fixed_dollars + REO_list_bonus_dollars));
}
</script>

you could try something like
var fieldvalue= //get the field value
if(fieldvalue.indexOf('%') != -1){
var percentage = parseFloat(fieldvalue.replace('%',''));
//do whatever you need with that value
}