So I'm trying to parse a large amount of data from another website trough JavaScript and jQuery and (I'm new to both) so the problem here is the function inside the 2nd jQuery load() is not working.
function load() {
var r = 0;
var cols = [4,5,8,9,10];
$('#Parser').load('url #tableID', function () {
var r = $('#Parser').find('label').length;
for (var i = 0; i < r; i++) {
$('#table').append('<tr id="'+i+'"></tr>')
for (var j = 0; j < cols.length; j++) {
$('#'+i).append('<td id="c'+i+j+'"></td>')
$('#c'+i+j).load('url #tableId\\:Row'+i+'\\:Col'+cols[j], function() {
$('#c'+i+j).html($('#c'+i+j).children().text());
});
}
}
$('#Parser').html('');
});
}
So if tested this on its own with static id's and it works
$('#test').load('url #tableId\\:Row1\\:Col1', function() {
$('#test').html($('#test').children().text());
});
I need to parse the code by column and row like this because the webpage where I'm getting the data from has the data I want scattered over the columns on the cols variable and I find how many rows the table has on the r variable
I don't know if it's a logic problem or just a misuse of the functions but I have been struggling the whole day and I needed help.
The main load() function is called when the page starts, and this outputs the whole element instead of only the text
var time =new Date().getTime();
var rc = 0;
load();
refresh();
function load() {
var r = 0;
var cols = [4,5,8,9,10];
$('#Parser').load('url #tableID', function () {
var r = $('#Parser').find('label').length;
if (r != 0) {
//Simulating going back to this page
$('body').css({'background-color':'red','color':'white'});
for (var i = 0; i < r; i++) {
if (rc < r) {
$('#table').append('<tr id="'+i+'"></tr>')
}
for (var j = 0; j < cols.length; j++) {
if (rc < r) {
$('#'+i).append('<td id="c'+i+j+'"></td>')
}
col = $('#c'+i+j).load('url #tableId\\:Row'+i+'\\:Col'+cols[j],function() {
if ($('#c'+i+j).html != col){
$('#c'+i+j).html('');
}
});
}
}
}else {
if (rc != 0 ) {
for (var i = 0; i < rc; i++) {
for (var j = 0; j < cols.length ; j++) {
$('#c'+i+j).html('');
}
}
}
if ($('body').css('background-color') != 'white') {
//Simulating another page
$('body').css({'background-color':'white','color':'black'});
}
}
$('#Parser').html('');
if (rc < r) {
rc = r ;
}
});
}
function refresh() {
if(new Date().getTime() - time >= 10000){
load();
setTimeout(refresh, 10000);
}else{
setTimeout(refresh, 10000);
}
}
This is my full javascript on the page
the previous code is my atempt on processing it to text on a simpler way
Try this:
function load()
{
...your code...
}
$(document).ready(load);
Maybe the function is not being called on time, make sure you call it AFTER the DOM has been rendered.
Okay so it was a pretty easy fix, inside the second load function I have replaced
the
$('#c'+i+j).html($('#c'+i+j).children().text());
to
$(this).html($(this).text());
And it works fine now.
Related
im trying to use a dom event trigger using tag manager to run a script that will change all the on page elements with the same css selector
this is the JS loop im trying to run :
<script>
function dissapper() {
var e = document.getElementsByClassName('form-disappear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="none";
}
}
function appear() {
var e = document.getElementsByClassName('form_appear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="block";
}
}
</script>
any idea why its not working ?
so al i needed to fix this was to add a function call at the end like so :
<script>
function dissapper() {
var e = document.getElementsByClassName('form-disappear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="none";
}
}
function appear() {
var e = document.getElementsByClassName('form_appear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="block";
}
}
dissapper()
appear()
</script>
thank you #nulldev for pointing it out.
var _target=document.querySelectorAll('.post .content');
var isYT = /youtube|youtu.be/gi;
for (i = 0; i < _target.length; i++) {
var _tar = _target[i].children;
for (var j = 0; j < _tar.length; j++) {
var vidID;
if (_tar[j].tagName == "A") {
if (isYt.test(_tar[j].href) == true) {
_eles.push(_tar[j]);
}
}
if (_tar[j].tagName == "EMBED") {
if (isYt.test(_tar[j].src) == true) {
_eles.push(_tar[j]);
}
}
} //end for loop j
} //end for loop i
console.log(_eles);
The HTML looks sort of like this:
<div>
Video 1
Video 2
<embed src="www.youtube.com/v/239324"></embed>
</div>
<div>
Video 1
Video 2
<embed src="www.youtube.com/v/239324"></embed>
</div>
Though the returning array Object with my console logging is only showing one a element and one embed element. I have to continuously invoke this myself to get all the links and embeds to be placed into the array Object. Any one see any errors I've written, just been working on this issue for about 3 hours now and it is tiring me. Any help is greatly appreciated.
thank you
I have changed your code this way:
var _target = document.querySelectorAll("div");
var _eles = [];
var isYt=new RegExp("\youtube.com");
for (var i = 0; i < _target.length; i++) {
var _tar = _target[i].childNodes;
for (var j = 0; j < _tar.length; j++) {
var vidID;
if(_tar[j].nodeType != 1) continue;
if (_tar[j].tagName.toLowerCase() == "a") {
if (isYt.test(_tar[j].href)) {
_eles.push(_tar[j]);
}
}
if (_tar[j].tagName.toLowerCase() == "embed") {
if (isYt.test(_tar[j].src)) {
_eles.push(_tar[j]);
}
}
} //end for loop j
} //end for loop i
console.log(_eles);
and it works, check this DEMO
but my favorite way to do this is like this:
var _target = document.querySelectorAll("div>a, div>embed");
var _eles = [];
var isYt=new RegExp("\youtube.com");
for (var j = 0; j < _target.length; j++) {
var vidID;
if (_target[j].tagName.toLowerCase() == "a") {
if (isYt.test(_target[j].href)) {
_eles.push(_target[j]);
}
}
if (_target[j].tagName.toLowerCase() == "embed") {
if (isYt.test(_target[j].src)) {
_eles.push(_target[j]);
}
}
} //end for loop j
console.log(_eles);
for this check this one DEMO
and if your isYT regexp is just as simple as I have used in my answer instead of all these lines of code you can simply do:
var _eles = document.querySelectorAll("div>a[href*='youtube.com/'],"+
"div>embed[src*='youtube.com/']");
I have a code that depends on an array of large images being loaded first, so I'm trying to do something like this:
var loading = 0;
var i = 0;
var imgs = [];
var background = [
'bg1-1', 'bg1-2', 'bg1-3', 'bg1-4',
'bg2-1', 'bg2-2', 'bg2-3', 'bg2-4',
'bg3-1', 'bg3-2', 'bg3-3', 'bg3-4',
'bg4-1', 'bg4-2', 'bg4-3', 'bg4-4'
];
for (i = 0; i < background.length; i++) {
imgs[i] = document.getElementById(background[i]);
imgs[i].onload = function() {
loading++;
}
}
while (loading < 16) { }
alert('images loaded!'); //I need to ensure images are fully loaded here.
So, it just hangs and never pulls out of the while loop.
Put the condition and the alert in the callback.
var loading = 0;
for (i = 0; i < background.length; i++) {
imgs[i] = document.getElementById(background[i]);
imgs[i].onload = function() {
loading++;
if (loading >= background.length)
alert("all done");
}
}
And really it would be better to reuse that function.
var loading = 0;
function imgHandler() {
loading++;
if (loading >= background.length)
alert("all done");
}
for (i = 0; i < background.length; i++) {
imgs[i] = document.getElementById(background[i]);
imgs[i].onload = imgHandler;
}
I need some help :). Im trying to build a Javascript that goes through a gridview on my page and for each row checks the hiddenvalue that is stored in a certain cell of that row. It should then check this against a filtervalue and if it doesnt match hide the row in question.
How can I do this?
While not the most elegant, this should get you started in the right direction:
<script type="text/javascript">
function HideEvenValueRows() {
var tGrid = document.getElementById('<%= GridView1.ClientID%>');
for (var i = 0; i < tGrid.rows.length; ++i) {
var inputs = tGrid.rows[i].getElementsByTagName("input");
for (var j = 0; j < inputs.length; ++j) {
if (inputs[j].type == "hidden") {
var k = inputs[j].value * 1;
if (k % 2 == 0) {
tGrid.rows[i].style.visibility = "collapse";
}
}
}
}
}
</script>
I'm newbie with JavaScript, so I decided to develop a little application which is supposed to show the schedule of the streetcar of the place I live, because of the lack of the information on the official webpage.
I have several arrays with the starting time of the line, and as the time to reach each station it's the same, I only have to add the total minutes to the first hour.
There's a form for the user to set a range of hours. So, my main problem is that the "adder();" function is supposed to iterate and print all the values from an array. Instead of doing that, it takes always the same index, 24, so if the array returned has less than 24 indexes, it does not work.
Here's the HTML:
< input type="button" class="submit" value="Enviar" onclick="caller()"/>
JavaScript:
function cropHours(i){
if (i.substr(0,2) >= hora1user_recortada && i.substr(0,2) <= hora2user_recortada) {
horas.push(i);
}
return horas;
}
function adder() {
minInicio1 = horas[i].substr(0,2);
minInicio2 = horas[i].substr(3,2);
document.getElementById("test4").innerHTML = "---" + minInicio1+"_"+minInicio2;
y = parseInt(total) + parseInt(minInicio2);
document.getElementById("test5").innerHTML = "total vale "+total+"minInicio1 vale "+minInicio1+"... minInicio2 vale "+minInicio2+"...Y vale "+y;
html += "<td>"+y+"</td>";
document.getElementById("horario").innerHTML = html;
}
This is a part of another function:
if (platform == 1) {
for (var j = 0; j <= indexorigen; j++) {
total += mins1[j];
}
for (var j = 0; j <= indexdestino; j++) {
total2 += mins1[j];
}
if (today !== "Sábado" || today !== "Domingo") {
for each (var i in horainiciolaboral1) {
cropHours(i);
//adder(horainiciolaboral1);
}
} else {
for each (var i in horainiciofinde1) {
cropHours(i);
}
}
} else {
for (var x = 0; x <= indexorigen; x++) {
total += mins2[x];
}
for (var x = 0; x <= indexdestino; x++) {
total2 += mins2[x];
}
if (today !== "Sábado" || today !== "Domingo") {
for each (var i in horainiciolaboral2) {
cropHours(i);
}
} else {
for each (var i in horainiciofinde2) {
cropHours(i);
}
}
}
/*for (var i = 0; i <= horainiciolaboral1.length; i++) {
adder(horainiciolaboral1);
}*/
//horario = horas.slice(11);
for each (var i in horas) {
adder();
}
document.getElementById("test6").innerHTML = horas;
document.getElementById("test3").innerHTML = total + "----" + total2;
// ******************************************
// ** FUNCTION WHICH CALLS EVERY FUNCTION **
// ******************************************
// STARTS
function caller() {
cleaner();
retrieve_origen();
retrieve_destino();
getIndex();
sumMinutes();
getHours();
}
This is the problem:
for each (var i in horas) {
adder();
}
Thank you in advance.
Pass i to adder() as an argument:
adder(i);
...and define it as a parameter in the function:
function adder( i ) {
//...