Jquery Ajax .load() not funtional

Question

<!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

OK. You're stating that your code doesn't work. However, you need to tell us what happens, what your console states, errors, network activity, etc. — Lee Taylor
– Lee Taylor, Commented Oct 26, 2015 at 0:18
It does not display any content from the 'something.html' file. its just blank tab2 (i.e"More about") — centrinok
– centrinok, Commented Oct 26, 2015 at 0:23
Where is something.html located, provide, what folder is it in on your website or is at the root of your website? — Brian Ogden
– Brian Ogden, Commented Oct 26, 2015 at 0:25
Is something.html hosted on the same server that's hosting the page requesting it? Use a complete url. — S McCrohan
– S McCrohan, Commented Oct 26, 2015 at 0:25
@SMcCrohan thanks for your help. I figured out that the something.html was supposed to be uploaded onto the server and could not be tested on a local computer. The people from the previous thread, told me to test it locally. Hence all the confusion. But thank you so much, you solved my 2 day's headache. — centrinok
– centrinok, Commented Oct 26, 2015 at 0:42

Hassane Fall · Accepted Answer · 2015-10-26 00:35:28Z

1

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.

answered Oct 26, 2015 at 0:35

Hassane Fall

1148 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

centrinok Over a year ago

yes that was the issue, im actually surprised at how many developers told me to just modify the code, but never spotted that could be the actual issue. Thank you!

ki9 · Accepted Answer · 2015-10-26 00:41:26Z

0

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.

answered Oct 26, 2015 at 0:41

ki9

5,7115 gold badges41 silver badges50 bronze badges

Comments

jherax · Accepted Answer · 2015-10-26 01:36:47Z

I have some notes about your question:

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.
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>
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 */ });

Collectives™ on Stack Overflow

Jquery Ajax .load() not funtional

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related