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);
});
})
}
Edit, per comment: for Ajax-generated links (URLs), this seems to be on the right track, but not completely there yet. (Ajax docs returned from Solr are dumped into a "#docs" <div>.)
$(init);
function init(){
$(function() {
$("#tabs").tabs();
});
$('#docs').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").load(response);
});
})
}
In this latter case, if I specify the document URL as follows,
$("#documents_tab_docs").load('http://127.0.0.1:8080/test/d1.html');
that document loads in the JQuery "Documents" tab, as desired.
If I GET the URL by either of
url: "http://127.0.0.1:8080/test/d1.html",
url: this.href,
the browser switches to that JQuery tab, but the page is blank.
For the former url: the response (console) is the complete HTML code of the document (d1.html):
XHR GET http://127.0.0.1:8081/programming/datasci/solr/test/d1.html
[HTTP/1.1 200 OK 1ms]
response:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us">
<!-- <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us"> -->
<head>
... [shortened, here]
</body>
</html>
For the latter url: the response is the complete HTML code for the index.html document (the webpage on which I am operating), despite clicking the URL for the same (d1.html) document (note the Solr query URL, instead):
XHR GET http://127.0.0.1:8081/apps/solr/ajax-solr-bt/examples/reuters/#fq=keywords%3Amice&q=*%3A*
[HTTP/1.1 200 OK 1ms]
response:
<!DOCTYPE html>
<!-- vim: set filetype=html : -->
<!-- /mnt/Vancouver/apps/solr/ajax-solr-bt/examples/reuters/index.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">
... [shortened, here]
</body>
</html>
Question: How do I get the HTML content, from Ajax and accessed via an Ajax-generated link (URL), redirected into the same-page, JQuery "Documents" tab?
