CODEWITHSUNDEEP
javascriptjquery
Daniel Pereira
Daniel Pereira

Reputation: 11

jQuery load function inside jQuery load function

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

Upvotes: 0

Views: 61

Answers (2)

Daniel Pereira
Daniel Pereira

Reputation: 11

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.

Upvotes: 0

James
James

Reputation: 688

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.

Upvotes: 1

Related Questions