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

53 thoughts on “Passing an Ajax-generated URL to a JQuery tab in web page”

Leave a Comment