Javascript How to open a new tab?-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

$('button').on('click', function(e) {
    window.open($(e.currentTarget).attr('href'));
}

CodePudding user response：

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>

CodePudding user response：

Create a page for viewing the detailed information and passing data to the page through GET.

window.open('example.com/detail?avatarUrl='   user.avatar_url   "&htmlUrl="   user.html_url)