I am updating a variable with a splice of an existing array inside of an if statement which should then run my loop only on the updated array, however I keep getting a cannot read property 'replace' of undefined on my values array. I am only getting this error because I have to input the value plus one array index as I need the upper of the two value ranges. (values[i + 1].replace(',', ''). Any ideas why the + 1 is causing the replace to see values as undefined? Thanks in advance for any help possible!
dropDown = function (arg) {
if ($('select[name="est_property_value"]').length != 0) {
var values = ["0", "60,000", "85,000", "90,000", "95,000", "100,000", "105,000", "110,000", "115,000", "120,000", "125,000", "130,000", "135,000", "140,000", "145,000", "150,000", "155,000", "160,000", "165,000", "170,000", "175,000", "180,000", "185,000", "190,000", "195,000", "200,000", "210,000", "220,000", "230,000", "240,000", "250,000", "260,000", "270,000", "280,000", "290,000", "300,000", "310,000", "320,000", "330,000", "340,000", "350,000", "360,000", "370,000", "380,000", "390,000", "400,000", "420,000", "440,000", "460,000", "480,000", "500,000", "520,000", "540,000", "560,000", "580,000", "600,000", "620,000", "640,000", "660,000", "680,000", "700,000", "720,000", "740,000", "760,000", "780,000", "800,000", "820,000", "840,000", "860,000", "880,000", "900,000", "920,000", "940,000", "960,000", "980,000", "1,000,000", "1,500,000"],
anchor = $('select[name="est_property_value"]').val();
// default arg loads larger ltv on page load
if (arg === 'default') {
values = values.splice(0, 18);
}
console.log(values);
for (var i = 0; i < values.length; i++) {
valueToInt = values[i].replace(',', '');
if (valueToInt < parseInt(anchor)) {
curValue = '<option value="' + values[i + 1].replace(',', '') + 1 + '">' + '$' + values[i] + ' - $' + values[i + 1] + '</option>';
$('select[name="mortgage_amount"]').append(curValue);
}
}
}
return;
}
As you mentioned in question, i + 1 make that problem. because it does not exists in your array. You can use a condition in for loop so when the next element exists, Use that. And when You get to the last element of array, use 0 for example.
Change your for loop to this
for (var i = 0; i < values.length; i++) {
valueToInt = values[i].replace(',', '');
if (valueToInt < parseInt(anchor)) {
curValue = '<option value="' + (values[i + 1] ? values[i + 1] : '0').replace(',', '') + 1 + '">' + '$' + values[i] + ' - $' + (values[i + 1] ? values[i + 1] : '0') + '</option>';
$('select[name="mortgage_amount"]').append(curValue);
}
}
below is the js code for wikipedia search project. I am getting infinite for loop even though it had condition to stop repeating the loop. I am stuck in this problem.
$(document).ready(function() {
$('.enter').click(function() {
var srcv = $('#search').val(); //variable get the input value
//statement to check empty input
if (srcv == "") {
alert("enter something to search");
}
else {
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + srcv + '&format=json&limit=20&callback=?', function(json) {
$('.content').html("<p> <a href ='" + json[3][0] + "'target='_blank'>" + json[1][0] + "</a><br>" + json[2][0] + "</p>");
/*for loop to display the content of the json object*/
for (i = 1; i < 20; i++) {
$('p').append("<p><a href ='" + json[3][i] + "'target='_blank'>" + json[1][i] + "</a>" + json[2][i] + "</p>");
}
});
}
});
});
You are appending to each and every one of <p> in page.
Since your for loop appends even more <p> (and you possibly have a high number of <p> elements in your page beforehand) you overflow your call stack.
You probably wanted to append to a specific <p>. Try giving an id to your selector.
from what i can see in the url you need to do the following:
loop over the terms found and select the link based on the index of the element, chose a single element .contentto append the data not a set of elements p, this will increase the number of duplicated results
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search='+srcv+'&format=json&limit=20&callback=?', function(json){
$.each(json[1],function(i,v){
$('.content').append("<p><a href ='"+json[2][i]+"'target='_blank'>"+json[0]+"</a>"+v+"</p>");
});
});
see demo: https://jsfiddle.net/x79zzp5a/
Try this
$(document).ready(function() {
$('.enter').click(function() {
var srcv = $('#search').val(); //variable get the input value
//statement to check empty input
if (srcv == "") {
alert("enter something to search");
}
else {
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + srcv + '&format=json&limit=20&callback=?', function(json) {
$('.content').html("<p> <a href ='" + json[3][0] + "'target='_blank'>" + json[1][0] + "</a><br>" + json[2][0] + "</p>");
/*for loop to display the content of the json object*/
var i = 1;
for (i; i < 20; i++) {
$('p').append("<p><a href ='" + json[3][i] + "'target='_blank'>" + json[1][i] + "</a>" + json[2][i] + "</p>");
}
});
}
});
});
I'm noob in Javascript and I want to make a button for load images, my idea is.. Get the Json data from an url and save it in a js array.. if the user press the button, show the ten first images, and if press again show the next ten images, this to the end..
$(document).ready(function(){
var a = [""];
$.each(tumblr_api_read.posts, function(i, item) {
a[i] += '<li><img src="' + item['photo-url-500'] + '" alt="' + item.slug + '"/></li>';
});
$(".portfolio-margin").on("click", ".read-more", function(){
var i, b = "";
for (i = 1; i < 10; ++i) {
b += a[i];
}
$(".grid").append(b);
});
});
The code is not finished, but the problem.. I don't know how load the next images, and the var "b" returns "undefined" in the beginning of each li: undefined<li></li>undefined<li>..
The value of
a[i] +=
is considered as
a[i] = a[i] + new value
// ^ undefined initially
Initially, a[i] will always be undefined. So you are getting undefined.
Change that line to as I dont' see any reason to concatenate(+=). Iterator i will always occur once.
a[i] = '<li><img src="' + item['photo-url-500'] + '" alt="' + item.slug + '"/></li>';
// ^ Here
I have the following code (snippet from a larger function):
var res = data.results;
for (var i=0;i<res.length;i++) {
$('<option value="' + res[i] + '">' + res[i] + '</option>').appendTo(sel);
}
if (data.select && data.select!='') { sel.val(data.select); }
For some reason, the
if (data.select && data.select!='') { sel.val(data.select); }
line just wasn't executing, and is appearing greyed out in Firebug suggesting that Firebug somehow knows it is not reachable. If I make a simple change to the code like this:
var res = data.results;
for (var i=0;i<res.length;i++) {
var opt = '<option value="' + res[i] + '">' + res[i] + '</option>';
$(opt).appendTo(sel);
}
if (data.select && data.select!='') { sel.val(data.select); }
the last line runs without issue.
I found similar post on here where the for loop had a <= for the while parameter causing an error and although this is not the case here, when I stepped through the code it was trying to execute the loop one more time than it should have, i.e. if res.length was 4, it was allowing i to increment to 4 and then trying to execute the code in the loop which was therefore ending the code because res[i] was out of range, even though it wasn't placing an error in the console. If I change the code as demonstrated, the loop does not run when i == res.length
So, how did Firebug know that the original code wasn't going to allow execution past the end of the loop, and why is the loop executing one more time than it should?
The entire function is below and is a success callback from a jQuery ajax call which populates a select with the values received from the server:
function GetDeptsOK(data, textStatus, jqXHR) {
var sel = $('#orgpicker').find('select[name="orgpicker-dept"]');
if (sel.length == 0) {
var cell = $('#orgpicker-deptcell');
cell.text('');
$('<select name="orgpicker-dept"></select>').appendTo(cell);
sel = $('#orgpicker').find('select[name="orgpicker-dept"]');
} else {
sel.find('option').remove();
}
$('<option value=""></option>').appendTo(sel);
var res = data.results;
for (var i=0;i<res.length;i++) {
$('<option value="' + res[i] + '">' + res[i] + '</option>').appendTo(sel);
}
if (data.select && data.select!='') { sel.val(data.select); }
}
replace this by
var res = data.results;
for (var i=0;i<res.length;i++) {
if(!res[i])
break;
var opt = '<option value="' + res[i] + '">' + res[i] + '</option>';
$(opt).appendTo(sel);
}
if (data.select && data.select!='') { sel.val(data.select); }
i have a problem with this code:
var par = [];
$('a[name]').each(function() {
if (($(this).attr('name')).indexOf("searchword") == -1) {
par.push($(this).attr('name'));
$('.content').empty();
for (var i = 0; i < par.length; i++) {
$(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />');
}
}
});
It causes ie and firefox to popup the warning window "Stop running this script". But it happens only when there is a very very large amount of data on page. Any ideas how to fix it?
Your code should look like this:
var par = [];
$('a[name]').each(function() {
if (($(this).attr('name')).indexOf("searchword") == -1) {
par.push($(this).attr('name'));
}
});
$('.content').empty();
for (var i = 0; i < par.length; i++) {
$(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />');
}
There is no reason for the second loop to be inside the first - that will just cause a lot of unneeded work.
You can make this code a bit simpler by removing the par array and the second loop, and just creating the content inside the first loop:
$('.content').empty();
$('a[name]').each(function() {
var name = $(this).attr('name');
if (name.indexOf("searchword") == -1) {
$(".content").append('<a id="par" href="#' + name + '">' + name + '</a><br />');
}
});
Browsers run all javascript (and most page interaction) on a single thread. When you run a long loop like this with no interruptions, the UI is totally frozen. You should try to make your algorithm have to do less, but in case that's not possible you can use this trick where you do a bit of work, then pause and give the browser control of the UI thread for a bit, then do more work.
var $targets = $('a[name]');
var current = 0;
var i = 0;
function doSomeWork() {
if (i == $targets.length) return;
var $t = $targets[i];
if (($t.attr('name')).indexOf("searchword") == -1) {
par.push($t.attr('name'));
$('.content').empty();
for (var i = 0; i < par.length; i++) {
$(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />');
}
}
i++;
window.setTimeout(arguments.callee, 0);
}
This does one iteration of your loop in a function before yielding. It might be a good idea to do more than just one in a function call, but you can experiment with that. An article on this idea: http://www.julienlecomte.net/blog/2007/10/28/