Response title
This is preview!
Problem making plugin work on multiple objects
in Developing jQuery Plugins
•
10 years ago
Hello,
i finished a plugin which allows me to show input's belonging to a selectbox option.
What I'm doing in stepts
1- Read out all the options
2- Take the html, signed with the options value, and remove it from the dom (but keep it in memory)
3- According to the selectedIndex, insert the html back in again.
It works perfectly when i assign the plugin to ONE(1) object, but it gets confused when doing it twice.
Also, when not setting the options when calling the function results in options being undefined in function init :S
i add the source code, it would be really helpfull if someone knows what im doing wrong!
p.s. sorry for not having any tabs, im forced to work on notepad for weeks and it seems it doesnt want to add tabs when i copy it :(
- (function( $ ) {
var categories = [];
var methods = {
init : function( options ) {
tempCats = this.attr('options');
$.each(tempCats, function(index) {
var switchTarget = $('table[id*="'+$(this).val()+'"]');
if(index != 0)$(switchTarget).remove();
categories[index] = $(switchTarget);
});
return this.each(function(){
$(this).bind('change.ss_form_selectbox_category',
function() {
var tdf = $('td:first', options['target']);
tdf.html(categories[$(this).attr('selectedIndex')]);
}
);
});
},
destroy : function( ) {
return this.each(function(){
$(window).unbind('.ss_form_selectbox_category');
});
}
};
$.fn.ss_selectbox_category = function( method, options ) {
var settings = { 'target': '#category-target', 'default': '0'};
if( options ) { $.extend(settings, options); }
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else { $.error( 'Method ' + method + ' does not exist on jQuery.tooltip' ); }
};
})( jQuery );
html parts :
- <!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>
<title>ss_form_Selectbox_category</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ss_form_selectbox_categorie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#category-switch').ss_selectbox_category('init', ({ 'target' : '#category-target'}));
});
$(document).ready(function() {
$('#category-switch2').ss_selectbox_category('init', ({ 'target' : '#category-target2'}));
});
</script>
</head>
<body>
<form action="#" name="strontformulier">
<fieldset>
<legend>basic info</legend>
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" class="form_text" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="name" class="form_text" /></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>product info</legend>
<table>
<tr>
<td>Type op product</td>
<td>
<select id="category-switch">
<option value="website">Website</option>
<option value="logo">Logo</option>
<option value="corporate">Corporate identity</option>
</select>
</td>
</tr>
<tr id="category-target">
<td colspan="2">
<table id="category-website">
<tr><td>website price</td><td><input type="text" name="website-price" /></td></tr>
<tr><td>website cms</td><td><input type="text" name="website-cms" /></td></tr>
</table>
<table id="category-logo">
<tr><td>logo price</td><td><input type="text" name="logo-price" /></td></tr>
<tr><td>logo design</td><td><input type="text" name="logo-design" /></td></tr>
</table>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
1