CODEWITHSUNDEEP
javascriptjqueryhtml
user2615490
user2615490

Reputation: 119

How to load a html file into jquery tabs

Using jquery load seems easy enough when used to load the file into a div like so

$('#div1').load('ajax/test.html');

But I have divs that I created into tabs. I have something like

<div id="tabs">
<ul>
<li><a href="#tabs-1">one</a></li>
<li><a href="#tabs-2">two</a></li>
</ul>
<div id="tabs-1">
this is tab 1
</div>
<div id="tabs-2">
this is tab 2
</div>
</div>

and my js looks like 

    $(document).ready(function() {
$("#tabs").tabs();
    $('#tabs-1').load('testing.html');
});

However nothing displays in tab-1 and I've searched and haven't found anything on loading tabs with html file Edit: Image of the directory structure: !(http://s11.postimg.org/hwj34tlir/snapshot1.png)

testing.html is the content i want to load into the tab. projectscript is my javascript file htmlPageWithTabs is my html page

I changed the path to ../files/testing.html and it still doesn't seem to work. what am i missing?

Upvotes: 0

Views: 2940

Answers (4)

user2587132
user2587132

Reputation:

try this

$('#tabs-1').append("<div id='content1'></div>");
$('#tabs-1').find('#content1').load("test.html");

Upvotes: 0

Jejekeny
Jejekeny

Reputation: 21

Can you give more information about the actual path of the files you want to load ?

I think there are 2 options :

  • you're trying to load a content from an external URL which won't work because of the same origin policy

  • you're trying to load a file from your server but you're not calling the right path (missing "/" at the begining)

Upvotes: 2

Hirshy
Hirshy

Reputation: 367

You can use the following callback to see what the error is.

$(document).ready(function() {
  $("#tabs").tabs();

  $("#tabs-1").load("testing.html", function(response, status, xhr) {
    if (status == "error") {
      alert(xhr.status + " " + xhr.statusText);
    }
  });
});

Upvotes: 1

user2232273
user2232273

Reputation: 4974

try this:

<div id="tabs">
<ul>
<li><a href="#tabs-1">one</a></li>
<li><a href="#tabs-2">two</a></li>
</ul>
<div id="tabs-1">
<iframe src="http://www.google.com"></iframe> 
</div>
<div id="tabs-2">
<iframe src="http://www.youtube.com"></iframe> 
</div>
</div>

without javascript.

let me know something

Upvotes: 0

Related Questions