Search jQuery

jQuery Forum

Using jQuery UI

giuseppe

repeat twice the same plugin

in Using jQuery UI • 9 years ago

Hello, I have a problem.

I downloaded the tabs widget is working very well.

I've created a one page website and if I try to use the same one twice tabs widget plugin, it works the first time and the second is not.

From what can be causing this problem?

thanks

I am attaching a sample file:

Replies(9)

Adam Bodu..

Re: repeat twice the same plugin

9 years ago

Where's the code?

kbwood.au

Re: repeat twice the same plugin

9 years ago

Do you have duplicate IDs in your page for the tab containers? IDs must be unique within the document.

giuseppe

Re: repeat twice the same plugin

9 years ago

Hi,

I changed the id. I am writing here the code used:

<head>
<link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#autocomplete" ).autocomplete({
source: availableTags
});
$( "#button" ).button();
$( "#radioset" ).buttonset();
$( "#tabs" ).tabs();
$( "#dialog" ).dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
$( "#dialog" ).dialog( "open" );
event.preventDefault();
});
$( "#datepicker" ).datepicker({
inline: true
});
$( "#slider" ).slider({
range: true,
values: [ 17, 67 ]
});
$( "#progressbar" ).progressbar({
value: 20
});
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});
</script>
</head>
<body>
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
<br>
<br>
<h2 class="demoHeaders">Tabs 2</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-10">First</a></li>
<li><a href="#tabs-20">Second</a></li>
<li><a href="#tabs-30">Third</a></li>
</ul>
<div id="tabs-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-20">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-30">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
</body>
</html>

The first works, the second not.

Thank you very much for the help

kbwood.au

Re: repeat twice the same plugin

9 years ago

As I said, IDs must be unique within the document, so only the first #tabs is found. Either change the ID of the second and target that as well, or add a common class to both tabs and use that instead.

giuseppe

Re: Re: repeat twice the same plugin

9 years ago

I need to change this id <div id="tabs">?

But if I change it to id = tabs2 I do not lose the formatting using css?

How can I fix? Excuse me but are not very practical

Thank you very much for the help

giuseppe

Re: repeat twice the same plugin

9 years ago

I need to change this id <div id="tabs">?

But if I change it to id = tabs2 I do not lose the formatting using css?

How can I fix? Excuse me but are not very practical

Thank you very much for the help

giuseppe

Re: repeat twice the same plugin

9 years ago

I need to change this id <div id="tabs">?

But if I change it to id = tabs2 I do not lose the formatting using css?

How can I fix? Excuse me but are not very practical

Thank you very much for the help

webbear10..

Re: repeat twice the same plugin

9 years ago

You won't lose the formatting if you're using a UI theme. If you aren't then just use a CSS class

giuseppe

Re: repeat twice the same plugin

9 years ago

<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
<br>
<br>
<h2 class="demoHeaders">Tabs 2</h2>
<div id="tabs2">
<ul>
<li><a href="#tabs2-10">First</a></li>
<li><a href="#tabs2-20">Second</a></li>
<li><a href="#tabs2-30">Third</a></li>
</ul>
<div id="tabs2-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs2-20">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs2-30">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>

How about trying it?

Thanks?

Top Reply

Response title

Attachments

jQuery Forum

repeat twice the same plugin

Replies(9)

Re: repeat twice the same plugin

Re: repeat twice the same plugin

Re: repeat twice the same plugin

Re: repeat twice the same plugin

Re: Re: repeat twice the same plugin

Re: repeat twice the same plugin

Re: repeat twice the same plugin

Re: repeat twice the same plugin

Re: repeat twice the same plugin

Statistics

Tags

Actions