将 Ajax 生成的 URL 传递到网页中的 JQuery 选项卡
Passing an Ajax-generated URL to a JQuery tab in web page
我在处理 Ajax 编码的 URL 时遇到问题。
我正在通过 Ajax 脚本查询数据库 (Solr),将输出发送到网页(仅在我家用计算机上的本地主机网络服务器上提供本地服务)。
当我单击 Ajax 生成的链接 (URL) 时,它们会在另一个浏览器选项卡中打开,而不是源网页。
对于原型制作,手动添加到我的网页的硬编码 URL 显示正确,在同一网页的 JQuery“文档”选项卡中打开:
$(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);
});
})
}
我设法设计了一个解决方案。对于那些感兴趣的人,这里是代码的重要部分。
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. -->
<!-- -->
<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 */
/* */
/* */
height: 100vh;
background: #f8f9f9;
}
这是该实现的视频(注意:虚拟数据;原始开发代码):
https://www.youtube.com/watch?v=sLL9ooqi_xU
相关背景在这里(我的),回复:JQuery 标签,...:[=16=]
- JQuery tabs with hoverIntent
我在处理 Ajax 编码的 URL 时遇到问题。
我正在通过 Ajax 脚本查询数据库 (Solr),将输出发送到网页(仅在我家用计算机上的本地主机网络服务器上提供本地服务)。
当我单击 Ajax 生成的链接 (URL) 时,它们会在另一个浏览器选项卡中打开,而不是源网页。
对于原型制作,手动添加到我的网页的硬编码 URL 显示正确,在同一网页的 JQuery“文档”选项卡中打开:
$(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);
});
})
}
我设法设计了一个解决方案。对于那些感兴趣的人,这里是代码的重要部分。
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. -->
<!-- -->
<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 */
/* */
/* */
height: 100vh;
background: #f8f9f9;
}
这是该实现的视频(注意:虚拟数据;原始开发代码):
https://www.youtube.com/watch?v=sLL9ooqi_xU
相关背景在这里(我的),回复:JQuery 标签,...:[=16=]
- JQuery tabs with hoverIntent