I've created a function using getJson that allows a user to search for a specific user and display all their data.
<body>
<input id="search" type="text">
<button>Search</button>
<div id="results"></div>
<script>
$('button').on('click', function() {
var user = $('#search').val();
$.getJSON("https://api.github.com/users/" + user)
.done(function(user) {
var br = "<br>";
var p = $("<p id='users'></p>");
var name = "Username: " + user.login + br;
var pic = "Avatar Picture:" + br + "<img src='" + user.avatar_url + "'/>" + br;
var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "'>" + user.html_url + "</a>" + br;
var location = "Location: " + "Null" + br;
var admin = "Admin: " + user.site_admin;
p.append("<p>" + name + pic + homeURl + location + admin + "</p>");
$("#results").empty().append(p);
})
.fail(function(jqXHR) {
console.log("Error: " + jqXHR.status);
})
.always(function() {
console.log("Random Users Request finished");
});
});
</script>
</body>
For example if the user types in "mojombo" then all the information relevant to the user "mojombo" is displayed.
I am currently wishing to modify this function such this data is accessed through clicking on the user name rather than searching. For example, if the user name "mojombo" is displayed and the user clicks the name then a new tab should open displaying all the information relevant to the user mojombo.
How would I be able to accomplish this?
Edit: Based on your question specifically. You just need to add the target attribute to the a tag you already have.
var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "' target='_blank'>" + user.html_url + "</a>" + br;
Here's a snippet.
$('button').on('click', function () {
var user = $('#search').val();
$.getJSON("https://api.github.com/users/" + user)
.done(function (user) {
var br = "<br>";
var p = $("<p id='users'></p>");
var name = "Username: " + user.login + br;
var pic = "Avatar Picture:" + br + "<img src='" + user.avatar_url + "'/>" + br;
var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "' target='_blank'>" + user.html_url + "</a>" + br;
var location = "Location: " + "Null" + br;
var admin = "Admin: " + user.site_admin;
p.append("<p>" + name + pic + homeURl + location + admin + "</p>");
$("#results").empty().append(p);
})
.fail(function (jqXHR) {
console.log("Error: " + jqXHR.status);
})
.always(function () {
console.log("Random Users Request finished");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search" type="text">
<button>Search</button>
<div id="results"></div>$('button').on('click', function(e) {
window.open($(e.currentTarget).attr('href'));
}
As far as I could understand your question
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<input id="search" type="text">
<button>Search</button>
<div id="results"></div>
<script>
const html = $("<html></html>");
$('button').on('click', function() {
var user = $('#search').val();
$.getJSON("https://api.github.com/users/" + user)
.done(function(user) {
var br = "<br>";
var p = $("<p id='users'></p>");
var name = "Username: " + user.login + br;
var pic = "Avatar Picture:" + br + "<img src='" + user.avatar_url + "'/>" + br;
var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "'>" + user.html_url + "</a>" + br;
var location = "Location: " + "Null" + br;
var admin = "Admin: " + user.site_admin;
p.append("<p>" + name + pic + homeURl + location + admin + "</p>");
html.append($('<body>').append(p));
var w = window.open("");
w.document.write(html.html())
})
.fail(function(jqXHR) {
console.log("Error: " + jqXHR.status);
})
.always(function() {
console.log("Random Users Request finished");
});
});
</script>
</body>
</html>