CODEWITHSUNDEEP
javascriptjqueryajaxhtml
centrinok
centrinok

Reputation: 298

Jquery Ajax .load() not funtional

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Collapse content</title> 
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs({
  collapsible: true
});
   $("#tabs-2").load("something.html");**
});
$(function() {
$( "#datepicker" ).datepicker({maxDate: new Date(1997,11,31)});
});

</script>
</head>
<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>blah blah</p>
</div>
<div id="tabs-2">

</div>
<div id="tabs-3">

</div>
</div> <br>
<div id="mini">
 <p><span class="italics">Please complete the form</span></p>
 <fieldset>
<form id="appForm" action="submit.php" method="post">
 **Some form details here (avoided to make the post more readable)
 </form>

</div>
</body>
</html>

here is my something.html code:

<html>
<head>
<title>Ajax tab 2 </title>
<meta charset="utf-8">
</head>

<body>
   <p>This is p2!!</p>
 </body>
</html>

I've already had a thread about this, but none of the suggestions were useful. So Im making another one. .load method does not produce any results at all. Intially i thought this was some sort of browser issue, hence i tried all possible browsers and even tried it on different OS's just to be sure. But it still doesn't work. There is no error displayed. In fact there is nothing from 'something.html' displayed on tab2(i.e "More about") at all. In brief, the .load method does not really load anything from 'something.html'

UPDATE: SOLUTION: this does not work locally, it works just fine when both the index file and 'something.html' are uploaded onto a server

Upvotes: 0

Views: 47

Answers (3)

jherax
jherax

Reputation: 5267

I have some notes about your question:

  1. If you are testing, running your files with file protocol (opening your files with the browser) AJAX (XMLHttpRequest) will not work in some browsers, such as Chrome. But if you start your local server on localhost for example, your AJAX requests will work properly.
  2. When loading partial content, you should not include it as a full HTML document, so get rid of the <html> and <body> wrappers for your partial content. something.html only should contain: <p>This is p2!!</p>
  3. If you are including scripts that depends on DOM elements at <HEAD> then you should add the defer attribute to your <script> tags, OR move your <script> tags at the end of <BODY> OR you should wrap your code to run when the DOM is ready:
$(document).on("ready", function() { /* CODE HERE */ });
// Shorthand for $(document).ready()
$(function() { /* CODE HERE */ });

Upvotes: 0

ki9
ki9

Reputation: 5575

Surely somebody mentioned this in your other post... but you probably have to enclose it in a $(document).ready(. Otherwise, the javascript could execute before the #tabs-2 element loads. 

$(document).ready(function(){
    $("#tabs-2").load("something.html");
});

Check out the documentation for more info.

Upvotes: 0

Hassane Fall
Hassane Fall

Reputation: 114

If "something.html" is a file you've created yourself, maybe try to include that file as a link <link href="something.html"> in the header. Not sure if it's going to work but try. When dealing with jQuery Ajax usually the url is where the server access the data. Get it? You probably have an external file so you try as mentioned above.

Upvotes: 1

Related Questions