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?
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. :-)
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 = $("<div>").append(nodes).find("#username").text(); } }); document.getElementById("username").value = username; });[object HTMLInputElement] as the value of username instead of the username in my page.
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).document.getElementById("username").value = username; portion in your Answer.console.log(username).
.get()should help you. Also, Javascript != jQueryusernameto avariablevar username = $("#username").text();