Well i am new to jQuery and I was going through Bob tabor's video present in http://www.learnvisualstudio.net/free/javascript-and-jquery-training/ describing how to install and utilize jQuery plugins..
In that he teaches about tab and adding a tab through the source code present at jqueryui.com.. But the source code for jquery doesn't work..
JSfiddle added:
http://jsfiddle.net/shettyrahul8june/mf5dm/
these are the two jQuery codes i am stuck up with.. $( "#tabs" ).tabs().tabs("add","1. Title changed.html","Click-a-Rahul");
$("<li><a href='10.jQuery events.html'>Click-a-Rahul</a></li>").appendTo( "#tabs ul");
$("#tabs").tabs().tabs("refresh");
As you can see i tried with both deprecated method add as well as the newer one refresh.. Both din't work.. A new tab was added and the styling was perfect.. But there was no content inside the new tab though link was provided..
Any help would be appreciated..
Also i found that when i use the add method, it works for the id such as #tabs-3 but it doesnt work for links...
I got this error in javascript error console..
Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. file:///E:/My%20Codes/Web%20Designing%20and%20Developing/Javascript/Javascript%20Fundamentals%20Microsoft/1.%20Title%20changed.html
XMLHttpRequest cannot load file:///E:/My%20Codes/Web%20Designing%20and%20Developing/Javascript/Javascript%20Fundamentals%20Microsoft/1.%20Title%20changed.html.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 11.Installing%20and%20Utilising%20jQuery%20plugins.html:1
Failed to load resource: the server responded with a status of 404 (Not Found) http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_diagonals-thick_15_0b3e6f_40x40.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_dots-small_20_333333_2x2.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_flat_40_292929_40x100.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_dots-small_40_00498f_2x2.png
Problem resolved.. It was due to cross domain request.. Also i was not using a local server to test my page.. I used wamp and it worked.. Working code is present in http://jsfiddle.net/shettyrahul8june/mf5dm/
use the below code and customize as your need , please give localfile url , while working in localhost, live site url not supported , i had mentioned info.php in href ,change it to filename
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Function</title>
<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" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/jquery-ui.css" />
</head>
<body>
<h1 id="title">Installing and Utilising the plugins</h1>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</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 id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida
ante, ut pharetra massa metus id nunc. Duis scelerisque molestie
turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie
lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem.
Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros
vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare
consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam
erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque
pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel
felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti.
Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat,
eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque.
Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper
at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo
vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti.
Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros,
id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero
sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat
porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu
tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit.
Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</div>
<p><a href="http://asp.net/ajaxlibrary/CDNjQueryUI1817.ashx">Check out the themes
on this page</a></p>
</body>
</html>
<script type="text/javascript">
$("#tabs").tabs();
$("<li><a href='info.php'>Click-a-Rahul</a></li>").appendTo( "#tabs ul");
$("#tabs").tabs().tabs("refresh");
</script>