打开一个JQuery选项卡中另一个JQuery选项卡中存在的文档超链接? [英] Opening a document hyperlink present in one JQuery tab, in another JQuery tab?
问题描述
对不起:我知道这是一个常见问题解答，但我经过尝试并没有成功.
Sorry: I know this is a FAQ but I've looked and experimented without success.
我要完成的工作是在搜索"目录中生成Apache Solr结果.标签(已完成；正在工作；已添加屏幕截图)，然后在文档"窗口中打开这些结果(返回的文档标题是到源文档的超链接).标签(以及后来的图形"标签中的实体和文档之间的链接).
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).
以下是示例代码和JS小提琴， https://jsfiddle.net/pfjtgLs6/
Here is example code and a JS Fiddle, https://jsfiddle.net/pfjtgLs6/
...在此示例中，我使用Google作为结果"链接中链接的示例.标签，我想在文档"标签.实际上，这些链接(复数)将是文档的标题(即Solr搜索结果)，或者该选项卡中的其他链接.
... 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.
我一直难以编写一个Ajax解决方案的代码，该解决方案通常解决这些链接(再次是复数)，而不是将URL硬编码到Ajax方法中.
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>
推荐答案
使用带有远程内容的选项卡时，最好使用jquery ajax加载数据.这将调用外部网页，然后在.done()函数内部，这会将网页响应附加到tab/div.
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);
});
如果您需要调试网页html响应，请在下面使用它.这样，您将可以查看网页网址返回的信息
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);
});
请注意，大多数开发人员会确保外部网站页面以json格式编写，然后循环搜索结果数组，但这并不总是可能的，尤其是如果您不拥有外部网页.
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.
这篇关于打开一个JQuery选项卡中另一个JQuery选项卡中存在的文档超链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
