Passing an Ajax-generated URL to a JQuery tab in web page

Question

I am encountering an issue in processing Ajax-encoded URLs.

I am querying a database (Solr) via an Ajax script, sending the output to a web page (served locally only on a localhost webserver on my home computer).

When I click Ajax-generated links (URLs), they open in another browser tab, not the source web page.

For prototyping, hard-coded URLs manually added to my web page display properly, opening in the same web page in a JQuery "Documents" tab:

$(init);
function init(){
  $(function() {
    $("#tabs").tabs();
  });

  $('#testURLs a').on('click', function (event) {
    event.preventDefault();

    // My JQuery tabs: 0: Search; 1: Documents 
    $( "#tabs" ).tabs({ active: 1 });
    $.ajax({
      method: "GET",
      // url: "http://127.0.0.1:8080/test/d1.html",
      url: this.href,
      data: {}
      }).done(function(response) {
          $("#documents_tab_docs").html(response);
        });
  })
}

This is a rather lengthy description for what is probably a simple problem. Can you reduce your code (and explanation) to a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) so it's easier for us to understand exactly where the problem is? — kmoser, Jan 23 '21 at 04:02
Hi so you need to get entire html page ? why not use [.load()](https://api.jquery.com/load/) method . — Swati, Jan 23 '21 at 04:39
Is the problem with the links in `response`? Please show us an example of `console.log(response)` so we can see what the links consist of. — kmoser, Jan 23 '21 at 06:06
You really shouldn't be inserting a fully-formed HTML document inside another. At best it will produce an invalid HTML document. At worst it will break the page (e.g. if the newly-inserted document contains IDs that are already in the parent document). It would be helpful if you were to show us the complete contents of one of these documents you are attempting to insert. — kmoser, Jan 23 '21 at 07:08

Victoria Stuart · Accepted Answer · 2021-01-27T21:26:28.370

I managed to engineer a solution. For those interested, here are the salient portions of the code.

Ajax

// ...
// Localserver: http-server --cors /mnt/Vancouver/
//...
var output = '<div id="title"><h3>
    <a class="docTitle" href="http://127.0.0.1:8081/programming/datasci/solr/test/'
    + doc.filename + '"><b>' + doc.title + '</b></a></h3>';
// ...
return output;
//...
//----------------------------------------
//...
init: function () {
  $(document).on('click', 'a.docTitle', function () {
      var $this = $(this);
      var url = this.href;

      $.ajax({
      method: "GET"
      }).done(function(response) {
          // Use numbered (not named) tabs: 
          $( "#tabs" ).tabs({ active: 1 });
          $("#iframe_docs").attr("src", url);
          });

      return false;
  });
}

HTML

<!-- ... -->
<div id="documents_tab" class="tab">
  <!-- <h2>Documents</h2> -->
  <ul>
    <!-- Documents, etc. from the Search tab will appear here. -->
    <!-- https://stackoverflow.com/questions/40903065/how-to-embed-iframe-with-external-website -->
    <div id="documents_tab_docs"></div>
      <iframe id="iframe_docs" src="">
      </iframe>
  </ul>
</div>
<!-- ... -->

CSS

#iframe_docs {
  border-style: none;
  width: 100%;
  /* height: 100%; */
  /* vh : viewport height */
  /*   https://stackoverflow.com/questions/5272519/how-do-you-give-iframe-100-height */
  /*   https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100 */
  height: 100vh;
  background: #f8f9f9;
}

Here is a video of that implementation (note: dummy data; raw, development code):

https://www.youtube.com/watch?v=sLL9ooqi_xU

Relevant background here (mine), re: JQuery tabs, ...:

Passing an Ajax-generated URL to a JQuery tab in web page

1 Answers1

Linked