0

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

Victoria Stuart
  • 4,610
  • 2
  • 44
  • 37
  • Your fiddle gives opening Google as an example, but in your question it sounds like local search results from your own system – so which is it? You will not be able to load just any arbitrary 3rd-party site via AJAX – they would have to be CORS-enabled for that to work. – CBroe Jan 19 '21 at 07:33
  • And if you are loading full HTML document, you technically would have to strip them of a lot of stuff - can’t just insert `html`, `head` and `body` a second time within a document. (I am saying technically, because with browser error correction, it might still work.) Having an iframe in the second tab, that you simply load the URL into, might be an easier alternative. Would only work for 3rd-party sites that allow loading in frames on different domains though, & modifying iframe height according to the content would only be possible for local resources, where you can inject script to measure. – CBroe Jan 19 '21 at 07:37
  • @CBroe: noted, thanks. I updated my question with some additional detail. – Victoria Stuart Jan 19 '21 at 18:12

3 Answers3

1

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.

centralhubb.com
  • 2,705
  • 19
  • 17
  • thank you very much for this answer. I was stuck, and managed to derive a solution that seems to work for me, based on your suggestions. I'll post the details in a separate answer, but will accept yours as the answer. :-) – Victoria Stuart Jan 19 '21 at 21:51
1

You can try using an iframe which is more reliable for external web pages

<div id="documents">
  <iframe id="iframe-documents" src="http://www.example.com/page1.php" style="width:400px;height:400px;">   
</div>

<div id="documents2">
  <iframe id="iframe-documents-2" src="http://www.example.com/page2.php" style="width:400px;height:400px;">   
</div>

<div id="graph">
  <iframe id="iframe-graph" src="http://www.example.com/page3.php" style="width:400px;height:400px;">   
</div>
centralhubb.com
  • 2,705
  • 19
  • 17
  • true; thank you for that suggestion, echoed elsewhere in StackOverflow, etc. I may opt for that approach as a fallback or "fail-safe" option, if needed. :-) – Victoria Stuart Jan 19 '21 at 21:46
1

For reference, here is the solution I derived based on the accepted answer. Clicking the test URLs opens them in the "Documents" tab, and activates / opens that tab.

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

      // This selects <a>-elements in the "id=search_tab" <div>:
      $('#search_tab a').on('click', function (event) {
        event.preventDefault();

        // SWITCH TO #documents_tab :
        $( "#tabs" ).tabs({ active: 1 });

        $.ajax({
          method: "GET",
          // url: "http://127.0.0.1:8080/test/d3.html",
          url: this.href,
          data: {}
        }).done(function( response ) {
          $("#documents_tab").html(response);
        });

        })
    }
  </script>
</head>

<body>

  <div id = "tabs">
    <ul>
      <li><a href="#search_tab">Search</a></li>
      <li><a href="#documents_tab">Documents</a></li>
    </ul>
  </div>

  <div id="search_tab">
    <!-- Test URLs: -->
    <p><a href="http://127.0.0.1:8080/test/d1.html">d1.html</a></p>
    <p><a href="http://127.0.0.1:8080/test/d2.html">d2.html</a></p>
    <p><a href="http://127.0.0.1:8080/test/d3.html">d3.html</a></p>
  </div>

  <div id="documents_tab">
  </div>

</body>
</html>

Update

The solution above worked well on hard-coded URLs / links present in the body of the web page.

However, I encountered a rather vexing impediment when I tried to apply the same approach to Ajax-generated hyperlinks, on that page.

That discussion, and my eventual solution are documented in this StackOverflow thread.

Trouble passing Ajax-generated URL to a JQuery tab in web page

Victoria Stuart
  • 4,610
  • 2
  • 44
  • 37