javascriptjqueryajaxjquery-ui-tabs

Opening a document hyperlink present in one JQuery tab, in another JQuery tab?

Sorry: I know this is a FAQ but I've looked and experimented without success.

What I am trying to accomplish is generate Apache Solr results in the "Search" tab (done; working; screenshot appended), and open those results (returned document titles are hyperlinks to the source documents) in the "Documents" tab (and later, links among entities and documents in the "Graph" tab).

Presently I am working "offline" (localhost), but eventually I'd like to push this work online (virtual private server).

Here is example code and a JS Fiddle, https://jsfiddle.net/pfjtgLs6/

... In this example I am using Google as an example of a link in the "Results" tab, that I would like to open in the "Documents" tab. In practice, those links (plural) would be the titles of the documents (which are Solr search results), or other links within that tab.

I have been having trouble coding an Ajax solution that generically addresses those links (again, plural), rather than hardcoding a URL into the Ajax method.

<!DOCTYPE html>

<html encoding="UTF-8" charset="UTF-8" lang="en-US" language="English" xmlns="https://www.w3.org/1999/xhtml/" itemtype="http://schema.org/WebPage">

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

  <script type = "text/javascript">
    $(init);
    function init(){
      $("#tabs").tabs();
    }
  </script>
</head>

<body>
  <div id = "tabs">
    <ul>
      <li><a href="#search">Search</a></li>
      <li><a href="#documents">Documents</a></li>
      <li><a id="documents2_id" href="#documents2">Documents2</a></li>
      <li><a href="#graph">Graph</a></li>
    </ul>

    <div id="search">
      <ul>
        <li>search item 1</li>
        <li>search item 2</li>
      </ul>

        <p>How can I open <a href="https://www.google.com/">this link</a> (Google, for example), in the 'Documents' tab? ... Ajax solutions preferred.</p> 

        <p>Please note that in my project, I am presently working with local files on a localhost webserver; however, I am also interested in comments and suggestions on CORS issues.]</p>

      <p><button type="button" onclick='$("#documents2_id").trigger("click");'>
        Go to 'Documents2' tab
      </button> </p>
    </div>

    <div id="documents">
      <ul>
        <li>documents item 1</li>
        <li>documents item 2</li>
      </ul>
    </div>

    <div id="documents2">
      <ul>
        <li>documents2 item 1</li>
        <li>documents2 item 2</li>
      </ul>
    </div>

    <div id="graph">
      <ul>
        <li>graph item 1</li>
        <li>graph item 2</li>
      </ul>
    </div>
</body>
</html>

enter image description here

Solution

  • When ever using tabs with remote content its best to use jquery ajax to load the data. This will call the external web page and then inside the .done() function this will append the webpage response to the tab/div.

    $.ajax({
  method: "GET",
  url: "http://www.example.com/path/to/url",
  data: {}
}).done(function( response ) {
  $("#documents").html(response);
});

    If you need to debug the web page html response use this below. This way you will be able to see what is returns from the web page url

    $.ajax({
  method: "GET",
  url: "http://www.example.com/path/to/url",
  data: {}
}).done(function( response ) {
  console.log(response);
});

    Note most developers would ensure the external website page is written in json format and then loop over an array of results, yet this is not always possible especially if you do not own the external web page.