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

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);
        });
  })
}

JavaScript
​x
 
$(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);
        });
  })
}
​

Answer

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;
  });
}

JavaScript
 
// ...
// 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>
<!-- ... -->

JavaScript
 
<!-- ... -->
<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;
}

JavaScript
 
#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, …:

Advertisement

Answer