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); }); }) }
Advertisement
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; }); }
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, …: