CODEWITHSUNDEEP
javascriptjqueryhtml
Josh
Josh

Reputation: 23

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

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

Upvotes: 1

Views: 2491

Answers (2)

cнŝdk
cнŝdk

Reputation: 32145

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());

Upvotes: 1

l.varga
l.varga

Reputation: 871

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);

Upvotes: 0

Related Questions