Opening a document hyperlink present in one JQuery tab, in another JQuery tab?
Question
Sorry: I know this is a FAQ but I've looked and experimented without success.
What I am trying to accomplish is generate Apache Solr results in the "Search" tab (done; working; screenshot appended), and open those results (returned document titles are hyperlinks to the source documents) in the "Documents" tab (and later, links among entities and documents in the "Graph" tab).
Presently I am working "offline" (localhost), but eventually I'd like to push this work online (virtual private server).
Here is example code and a JS Fiddle, https://jsfiddle.net/pfjtgLs6/
... In this example I am using Google as an example of a link in the "Results" tab, that I would like to open in the "Documents" tab. In practice, those links (plural) would be the titles of the documents (which are Solr search results), or other links within that tab.
I have been having trouble coding an Ajax solution that generically addresses those links (again, plural), rather than hardcoding a URL into the Ajax method.
<!DOCTYPE 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">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script type = "text/javascript">
$(init);
function init(){
$("#tabs").tabs();
}
</script>
</head>
<body>
<div id = "tabs">
<ul>
<li><a href="#search">Search</a></li>
<li><a href="#documents">Documents</a></li>
<li><a id="documents2_id" href="#documents2">Documents2</a></li>
<li><a href="#graph">Graph</a></li>
</ul>
<div id="search">
<ul>
<li>search item 1</li>
<li>search item 2</li>
</ul>
<p>How can I open <a href="https://www.google.com/">this link</a> (Google, for example), in the 'Documents' tab? ... Ajax solutions preferred.</p>
<p>Please note that in my project, I am presently working with local files on a localhost webserver; however, I am also interested in comments and suggestions on CORS issues.]</p>
<p><button type="button" onclick='$("#documents2_id").trigger("click");'>
Go to 'Documents2' tab
</button> </p>
</div>
<div id="documents">
<ul>
<li>documents item 1</li>
<li>documents item 2</li>
</ul>
</div>
<div id="documents2">
<ul>
<li>documents2 item 1</li>
<li>documents2 item 2</li>
</ul>
</div>
<div id="graph">
<ul>
<li>graph item 1</li>
<li>graph item 2</li>
</ul>
</div>
</body>
</html>
3 answers
solution1
1 ACCPTED 2021-01-19 08:35:09
When ever using tabs with remote content its best to use jquery ajax to load the data. This will call the external web page and then inside the.done() function this will append the webpage response to the tab/div.
$.ajax({
method: "GET",
url: "http://www.example.com/path/to/url",
data: {}
}).done(function( response ) {
$("#documents").html(response);
});
If you need to debug the web page html response use this below. This way you will be able to see what is returns from the web page url
$.ajax({
method: "GET",
url: "http://www.example.com/path/to/url",
data: {}
}).done(function( response ) {
console.log(response);
});
Note most developers would ensure the external website page is written in json format and then loop over an array of results, yet this is not always possible especially if you do not own the external web page.
solution2
1 2021-01-19 08:49:03
You can try using an iframe which is more reliable for external web pages
<div id="documents">
<iframe id="iframe-documents" src="http://www.example.com/page1.php" style="width:400px;height:400px;">
</div>
<div id="documents2">
<iframe id="iframe-documents-2" src="http://www.example.com/page2.php" style="width:400px;height:400px;">
</div>
<div id="graph">
<iframe id="iframe-graph" src="http://www.example.com/page3.php" style="width:400px;height:400px;">
</div>
solution3
1 2021-01-19 22:17:43
For reference, here is the solution I derived based on the accepted answer. Clicking the test URLs opens them in the "Documents" tab, and activates / opens that tab.
<html>
<head>
<script type = "text/javascript">
$(init);
function init(){
$("#tabs").tabs();
// This selects <a>-elements in the "id=search_tab" <div>:
$('#search_tab a').on('click', function (event) {
event.preventDefault();
// SWITCH TO #documents_tab :
$( "#tabs" ).tabs({ active: 1 });
$.ajax({
method: "GET",
// url: "http://127.0.0.1:8080/test/d3.html",
url: this.href,
data: {}
}).done(function( response ) {
$("#documents_tab").html(response);
});
})
}
</script>
</head>
<body>
<div id = "tabs">
<ul>
<li><a href="#search_tab">Search</a></li>
<li><a href="#documents_tab">Documents</a></li>
</ul>
</div>
<div id="search_tab">
<!-- Test URLs: -->
<p><a href="http://127.0.0.1:8080/test/d1.html">d1.html</a></p>
<p><a href="http://127.0.0.1:8080/test/d2.html">d2.html</a></p>
<p><a href="http://127.0.0.1:8080/test/d3.html">d3.html</a></p>
</div>
<div id="documents_tab">
</div>
</body>
</html>
Update
The solution above worked well on hard-coded URLs / links present in the body of the web page.
However, I encountered a rather vexing impediment when I tried to apply the same approach to Ajax-generated hyperlinks, on that page.
That discussion, and my eventual solution are documented in this StackOverflow thread.
Trouble passing Ajax-generated URL to a JQuery tab in web page
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.