应该从其他网页加载内容的无响应AJAX代码
[英]Unresponsive AJAX code that is supposed to load content from a different webpage
问题描述
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Collapse content</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="main.css">
<script>
$(function() {
$( "#tabs" ).tabs({
collapsible: true
});
});
$(function() {
$( "#datepicker" ).datepicker();
});
$("#tabs-2").load("p2.html #content");
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Alienware and Alpha</a></li>
<li><a href="#tabs-2">More About</a></li>
<li><a href="#tabs-3">Contact Us</a></li>
</ul>
<div id="tabs-1">
<p><strong>Click this tab again to close the content pane.</strong> </p>
<p>Alienware is an American computer hardware subsidiary of Dell, Inc. Their products are designed for gaming purposes and are best known for their science-fiction-themed designs. Alienware was founded in 1996 by Nelson Gonzalez and Alex Aguila. Alienware Alpha is a line of PC-console hybrids introduced in 2014. It contains a custom-built Nvidia GeForce GTX 860M; a Core i3, i5, or i7 Intel Processor, depending on what model is purchased, up to 8 gigabytes of RAM; and between 500 gigabytes and 2 terabytes of hard drive space..</p>
</div>
<div id="tabs-2">
</div>
.....(other ending tags, etc.)
I am trying to load content from a very basic webpage which has nothing but body with a div tag #content. 
我正在尝试从一个非常基本的网页加载内容，该网页只包含带有div标签#content的正文。 I want it to appear in my tab 2. But it just won't happen. 我希望它显示在我的选项卡2中。但这不会发生。 Im not sure what I'm doing wrong. 我不确定我在做什么错。
p2.html: Ajax tab 2 p2.html：Ajax标签2
<body>
<div id="content">
<p>Established in 1996 by Nelson Gonzalez and Alex Aguila, Alienware assembles desktops, notebooks, workstations, and PC gaming consoles. According to employees, the name "Alienware" was chosen because of the founders' fondness for the hit television series The X-Files, with names such as Area-51, Hangar 18, and Aurora.</p>
</div>
</body>
</html>
2 个解决方案
解决方案1
0 2015-10-24 03:50:20
Edit, Updated 编辑，更新
yes on chrome browser!
Try closing chrome , adjusting launcher , or launching from terminal with /path/to/chrome --allow-file-access-from-files flag . 尝试使用/path/to/chrome --allow-file-access-from-files标志关闭chrome ，调整启动器或从终端启动。 See How do I make the Google Chrome flag "--allow-file-access-from-files" permanent? 请参阅如何使Google Chrome浏览器标志“ --allow-file-access-from-files”永久存在？ , --allow-file-access-from-files . ，-- allow-file-access-from-files 。 See also chrome://flags 另请参阅chrome://flags
$("#tabs-2") not defined when .load() called as <script></script> containing $("#tabs-2").load("p2.html #content"); $("#tabs-2")没有定义时.load()称为<script></script>含有$("#tabs-2").load("p2.html #content"); within <head></head> element ? 在<head></head>元素内？
Try moving $("#tabs-2").load("p2.html #content"); 尝试移动$("#tabs-2").load("p2.html #content"); within $(function() {}) 在$(function() {})
$(function() {
$( "#tabs" ).tabs({
collapsible: true
});
$( "#datepicker" ).datepicker();
$("#tabs-2").load("p2.html #content");
});
解决方案2
0 2015-10-24 04:34:47
Place this $("#tabs-2").load("p2.html #content") inside $(function () {} 将此$（“＃tabs-2”）。load（“ p2.html #content”）放入$（function（）{}
$(function () {
$("#tabs-2").load("p2.html #content")
});
Complete code: 完整的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Collapse content</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("#tabs").tabs();
$("#tabs-2").load("p2.html #content");
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Alienware and Alpha</a></li>
<li><a href="#tabs-2">More About</a></li>
<li><a href="#tabs-3">Contact Us</a></li>
</ul>
<div id="tabs-1">
Your Text!!!
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
p2.html p2.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="content">
This is p2 page!!!
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.