CODEWITHSUNDEEP
jqueryjquery-uijquery-tabs
user2675443
user2675443

Reputation:

possible to use 'load()' to insert content into jquery tab content?

I'm using jquery tab, it's easy to insert even dynamic content, but due to massive amount of data, I try to think of to use load() to get elements from other page to be inserted..

Tried few syntax, but they are not working.. 

//tabContent !important
        appendTabContent = "<div id='tab" + num_tabs + "' class='tabContent'></div>"
        yolo = $(appendTabContent).load("tasks.php");
        $('#col1').append(yolo);

Upvotes: 0

Views: 735

Answers (1)

Ra&#250;l Ju&#225;rez
Ra&#250;l Ju&#225;rez

Reputation: 2159

Have you tried the ajax functionality already present in Tabs plugin? You can put the webpage that is to be inserted in href attribute of the a tag, the content of that page will be loaded automatically when you select the tab.

Here is example code provided in the website:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Content via Ajax</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>


</body>
</html>

Upvotes: 1

Related Questions