Unresponsive AJAX code that is supposed to load content from a different webpage
Question
<!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. I want it to appear in my tab 2. But it just won't happen. Im not sure what I'm doing wrong.
p2.html: Ajax tab 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 answers
solution1
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 . See How do I make the Google Chrome flag "--allow-file-access-from-files" permanent? , --allow-file-access-from-files . See also chrome://flags
$("#tabs-2") not defined when .load() called as <script></script> containing $("#tabs-2").load("p2.html #content"); within <head></head> element ?
Try moving $("#tabs-2").load("p2.html #content"); within $(function() {})
$(function() {
$( "#tabs" ).tabs({
collapsible: true
});
$( "#datepicker" ).datepicker();
$("#tabs-2").load("p2.html #content");
});
solution2
0 2015-10-24 04:34:47
Place this $("#tabs-2").load("p2.html #content") inside $(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
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="content">
This is p2 page!!!
</div>
</body>
</html>
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.