jQuery .text() returning empty string and .html() returning "undefined" using whateverorigin

Question

A friend and I are trying to learn jQuery, and we've come across a problem we just can't figure out. We're trying to use WhateverOrigin to scrape some data from a forum (we have permission to do so from the owner, he set up a test post for us to practice scraping on). The HTML we're working on is this:

<div>
  <span id="msg_68" class="subject_title">
    <a href="[insert link here]">TEST: SCRAPE THE URL</a>
  </span>
</div>

Using WhateverOrigin, we can successfully pull the complete HTML of the site using

$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('[INSERT URL HERE]') + '&callback=?', function(data){
    alert(data.contents);
});

However, when we tried to pull that specific element's HTML or text (to check we were pulling the correct data) we either got "undefined" with html or "" with text.

The code we were using to pull it was this:

$(document).ready(function(){
  $.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('[INSERT URL HERE]') + '&callback=?', function(data){
      alert($("#msg_68 a").text());
      alert($("#msg_68 a").html());
  });
});

any ideas?

Thanks

cнŝdk · Accepted Answer · 2017-06-12 11:52:47Z

1

When you write $("#msg_68 a"), you are trying to access this element from the DOM in your current page and not from the loaded data.

You need to select #msg_68 a elements, within the data.contents, you can either :

Parse this data into a DOM element then fetch it to get the required element:

$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('[INSERT URL HERE]') + '&callback=?', function(data){
    var div = $("<div><div/>");
    div.html(data.contents);
    alert($("#msg_68 a", div).text());
});

Or just refer to it directly with data.contents as the content is a valid HTML:

alert($("#msg_68 a", data.contents).text());

edited Jun 12, 2017 at 11:52

answered Jun 12, 2017 at 9:58

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

l.varga · Accepted Answer · 2017-06-12 10:06:14Z

0

By using $("#msg_68 a") you are selecting an element from the DOM. That element is not in the DOM yet, it is stored in a variable at that moment after you get the data from ajax. To select it like that, you'd have to first insert data from ajax to your DOM. Your alternative is the "filter" function or searching within the 'data' variable context (depending on your jquery version)

Option 1:

$(data.contents).filter('#msg_68 a');

Option 2:

$("#msg_68 a", data.contents);

edited Jun 12, 2017 at 10:06

answered Jun 12, 2017 at 9:48

l.varga

8716 silver badges14 bronze badges

4 Comments

Josh Over a year ago

I still get back an empty string and undefined, even after putting that in. Any other ideas?

l.varga Over a year ago

@Josh, what exactly do you get in data output?

Josh Over a year ago

I get an empty alert for the .text() call and "undefined" from the .html() call

l.varga Over a year ago

Sorry, my bad. Change the data to data.contents and it should work ;)

Collectives™ on Stack Overflow

jQuery .text() returning empty string and .html() returning "undefined" using whateverorigin

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related