0

I'm a JS novice so be gentle.

I am working on a simple script that reads a value from another web page on my local Intranet.

Intranet Home Page (index.php):

<div id="username">my.username</div>

script.js:

$(document.body).load('http://intranet/index.php #username');

Now, I was wondering, instead of just displaying this value, how do I store it in a variable?

michaelmcgurk
  • 6,367
  • 23
  • 94
  • 190

1 Answers1

3

You want to query it with ajax, then parse that HTML, then find that element in the parsed HTML and extract its text:

$.ajax({
    url: 'http://intranet/index.php',
    success: function(html) {
        var nodes = $.parseHTML(html);
        var username = $("<div>").append(nodes).find("#username").text();
        console.log(username);
    }
});

Here's an example of the parsing/finding part using a static HTML string:

var html = '<html><body><div>foo<div id="username">my.username</div></div></body></html>';
var nodes = $.parseHTML(html);
var username = $("<div>").append(nodes).find("#username").text();
console.log(username);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Or without the wrapper div:

// Test finding it nested
test('<html><body><div>foo<div id="username">my.username</div></div></body></html>');

// Test finding it top-level
test('<div>foo</div><div id="username">my.username</div><div>bar</div>');

function test(html) {
  var username = null;
  $.parseHTML(html).some(function(node) {
    if (node.id === "username") {
      username = $(node).text();
      return true;
    }
    node = $(node).find("#username");
    if (node[0]) {
      username = node.text();
      return true;
    }
  });
  console.log(username);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can see why I used the wrapper div. :-)

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thanks for the edit - it now works and displays the value in the `console`. The only problem is when I try to associate it, it doesn't work. Here is my current code: `$.get('http://intranet/index.php', function(data){ $.ajax({ url: 'http://intranet/index.php', success: function(html) { var nodes = $.parseHTML(html); var username = $("
    ").append(nodes).find("#username").text(); } }); document.getElementById("username").value = username; });`
     – michaelmcgurk Sep 14 '16 at 10:03
  • With the above code, it sets `[object HTMLInputElement]` as the value of username instead of the username in my page. – michaelmcgurk Sep 14 '16 at 10:04
  • 2
    @michaelmcgurk: The variable in your `success` function is completely private to your `success` function. The `username` *outside* your `success` function is the automatic global the browser created because you have an element with `id="username"` in the current page as well as the one you're loading. Move the code using `username` **into** the `success` function, as demonstrated in the answer. Because A) Then you're using the right `username`, and B) `ajax` is *asynchronous* ([more](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call)). – T.J. Crowder Sep 14 '16 at 10:06
  • Thanks so much for the detailed comments and answers. It's really helpful for me to learn. I'm a little unclear what the final script should look like. Is there any chance you could show me how I include the `document.getElementById("username").value = username;` portion in your Answer. – michaelmcgurk Sep 14 '16 at 10:09
  • FTR: `var username = $("
    ").append(nodes).find("#username").text(); $('#username').val(username);`
     – michaelmcgurk Sep 14 '16 at 10:36
  • 1
    @michaelmcgurk: Put it where I've done `console.log(username)`. – T.J. Crowder Sep 14 '16 at 11:00
  • That's right - that's exactly where I added it - took me a little while but got there ;- ) Thank you – michaelmcgurk Sep 14 '16 at 11:04