Click here to Skip to main content
15,885,365 members
Articles / Programming Languages / Javascript

jQuery UI: Samples have redundant code

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
15 Mar 2011CPOL1 min read 9.4K   1  
Watch out for redundant code in jQuery code samples.

I have messed around a lot with .NET MVC, jQuery, and jQuery UI for some time now. I just discovered that one of the examples includes redundant code. I don't know if all of them do, but you need to watch yourself. I have seen a few sites that run jQuery examples straight up and they may have problems with this. It's really not that big of a deal, but redundant code can become a compatibility issue and it's always bad practice. You also send more data to each client and you waste bandwidth.

The example I found was the tabs control with the ability to add and remove tabs. This is the code they published:

JavaScript
#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>" );
}
});
// 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>
<div>
<div id="dialog" title="Tab data">
<form>
<fieldset>
<label for="tab_title">Title</label>
<input type="text" name="tab_title" id="tab_title" value="" />
<label for="tab_content">Content</label>
<textarea name="tab_content" id="tab_content"></textarea>
</fieldset>
</form>
</div>
<button id="add_tab">Add Tab</button>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a> <span>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 -->

The problem is that it registers the submit action for the form twice. This code initializes the model popup including the form. I have highlighted the piece of code that is interesting here.

JavaScript
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();
}
});

That piece of code does the exact same thing as this piece of code:

JavaScript
var $form = $( "form", $dialog ).submit(function() {
addTab();
$dialog.dialog( "close" );
return false;
});

The first one is a must to initialize the module popup; this is just redundant. I have played around a lot with this and I can't find any impact in functionality. If you know any or find anything, please give me a comment back, but I can't see that there would be any issues. Then in the end, I'm rather corrected and admitting that I'm wrong than running code that isn't OK.

This article was originally posted at http://www.hackviking.com?p=136

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Sweden Sweden
I develop in C# on .Net platforms like MVC. Like to use jQuery to build rich interfaces. I also blog about development and snags I got and the solutions I found for them.

I also a full time CIO at a Swedish energy company. When there is time I do some part time consulting on cloud issues.

Comments and Discussions

 
-- There are no messages in this forum --