Link to home
Create AccountLog in
Avatar of error77
error77

asked on

Javascript code modification needed

Hi all,

I need some modification to the code attached.
The code works fine but what I basically need to to add an id="the id here"

So, each tab will have a different id in it. The id can be the tab index number.

Hope someone can help.

Thanks

p.s: code attached below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <title>Demo Page</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/smoothness/jquery-ui.css" />

 <meta charset="utf-8">
	
	<style>
	#dialog label, #dialog input { display:block; }
	#dialog label { margin-top: 0.5em; }
	#dialog input, #dialog textarea { width: 95%; }
	#tabs { margin-top: 1em; }
	#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
	#add_tab { cursor: pointer; }
	</style>
	<script>
	$(function() {
		var $tab_title_input = $( "#tab_title"),
			$tab_content_input = $( "#tab_content" );
		var tab_counter = 2;

		// tabs init with a custom tab template and an "add" callback filling in the content
		var $tabs = $( "#tabs").tabs({
			tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
			add: function( event, ui ) {
				var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
				$( ui.panel ).append( "<p>" + tab_content + "</p>" );
			}
		}).find( ".ui-tabs-nav" ).sortable({ axis: "x" }).end() ;

		// modal dialog init: custom buttons and a "close" callback reseting the form inside
		var $dialog = $( "#dialog" ).dialog({
			autoOpen: false,
			modal: true,
			buttons: {
				Add: function() {
					addTab();
					$( this ).dialog( "close" );
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			open: function() {
				$tab_title_input.focus();
			},
			close: function() {
				$form[ 0 ].reset();
			}
		});

		// addTab form: calls addTab function on submit and closes the dialog
		var $form = $( "form", $dialog ).submit(function() {
			addTab();
			$dialog.dialog( "close" );
			return false;
		});

		// actual addTab function: adds new tab using the title input from the form above
		function addTab() {
			var tab_title = $tab_title_input.val() || "Tab " + tab_counter;
			$tabs.tabs( "add", "#tabs-" + tab_counter, tab_title );
			tab_counter++;
		}

		// addTab button: just opens the dialog
		$( "#add_tab" )
			.button()
			.click(function() {
				$dialog.dialog( "open" );
			});

		// close icon: removing the tab on click
		// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
		$( "#tabs span.ui-icon-close" ).live( "click", function() {
			var index = $( "li", $tabs ).index( $( this ).parent() );
			$tabs.tabs( "remove", index );
		});
	});
	</script>

<body>

<div class="demo">

	<div id="dialog" title="Tab data">
		<form>
			<fieldset class="ui-helper-reset">
				<label for="tab_title">Title</label>
				<input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
				<label for="tab_content">Content</label>
				<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
			</fieldset>
		</form>
	</div>

	<button id="add_tab">Add Tab</button>

	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close">Remove Tab</span></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>

</div><!-- End demo -->



<div class="demo-description">
<p>Simple tabs adding and removing.</p>
</div><!-- End demo-description -->

</body>
</html>

Open in new window

Avatar of iGottZ
iGottZ
Flag of Germany image

1. id's cannot be numeric wich you can read within the html specs
2. why dont you just want a function wich let you select a tab by simply using the tab title / tabindex?
you dont need a id for that
Avatar of error77
error77

ASKER

Well, even if it's not a number and it's the same as the title etc...I still need to automatically assign and id to each tab what creating one.
I need to add -   id="something-here" to the tab div

Know what I mean?
Avatar of error77

ASKER

Or it could have a hardcoded letter and the index of the tab for example: id="T1" ... id="T2" etc
Avatar of error77

ASKER

Anyone please?
Sorry, it took me a while because I had to play around with this a bit to figure it out, because I've never used JQuery tabs before :-).  Anyway, just tested it out and seems to be working.

Add this line to your add function:

$(ui.tab).parent().attr('id', 'T' + tab_counter);

So that it now looks like this:
 
// tabs init with a custom tab template and an "add" callback filling in the content
var $tabs = $("#tabs").tabs({
	tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
	add: function (event, ui)
	{
	    $(ui.tab).parent().attr('id', 'T' + tab_counter);
	    var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
	    $(ui.panel).append("<p>" + tab_content + "</p>");
	}
}).find(".ui-tabs-nav").sortable({ axis: "x" }).end();

Open in new window


Also, you will want to add a hard coded id to the first tab which is hard coded on the page:

<li id="T1"><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
       ^^^
Note: My above solution is adding ID's to the <li> elements, which is what makes up the tabs.
The ID's have a hardcoded letter as you suggested, which will result in the tabs looking like this:

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all ui-sortable">
     <li id="T1" class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"></li>
     <li class="ui-state-default ui-corner-top" id="T2"></li>
     <li class="ui-state-default ui-corner-top" id="T3"></li>
</ul>
Avatar of error77

ASKER

It's perfect, just seems to have a bug? The add tab popup dialog is suddenly not opening in the center? Do you get the same issue?

THanks
ASKER CERTIFIED SOLUTION
Avatar of P1ST0LPETE
P1ST0LPETE
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of error77

ASKER

Perfect! Thanks very much for your help!