Jquery Create Destroy() function within plugin
The software I am using uses a jquery plugin called wizard that they
created. I need to create a destroy function within it. The reason being
is that we are using jquery to post information to a database without the
destroy function it will create 2 items on the second entry and 3 on the
third and so on.
I have been trying to figure it out for days and I am at a complete loss.
Any help on this issue would be greatly appreciated.
(function($, window, document){
var PLUGIN_NAME = 'wizard',
instances = [];
$.fn[PLUGIN_NAME] = function(options){
options = $.extend({}, {
// Defaults:
onSubmit: function() {
// Alert! :)
alert('Wizard completed successfully! :)');
$(this).parent().fadeOut();
return false;
}
}, options);
return $(this).each(function(){
var $this = $(this);
var isForm = $this.is('form');
if (!_.contains(instances, $this[0])) {
instances.push($this[0]);
} else {
return;
}
// ! Set up frequently used elements
var $el = {
box: $this,
content: $this.find('.content'),
list: $this.find('.steps'),
a_list: $this.find('.steps').find('a'),
prev: $this.find('.actions').find('.left').find('a'),
next:
$this.find('.actions').find('.right').find('a').not('.finish'),
finish: $this.find('.actions').find('.right').find('a.finish')
};
// ! Change step
var goToIndex = function(newIndex){
// Old step
var $oldStepLink = $el.a_list.filter('.current'),
$oldStep = $($oldStepLink.attr('href'));
// Fetch new step
var $newStepLink = $el.a_list.eq(newIndex),
$newStep = $($newStepLink.attr('href'));
// ! Validate arguments
if (newIndex > length || newIndex < 0) {
return false;
}
// ! Do validation
if (isForm && $this.hasClass('validate')) {
// Do validation before going to new page
var valid = true,
validator = $this.validate();
$oldStep.find(':input:enabled').each(function(){
var fieldIsValid = validator.element($(this));
if (fieldIsValid === undefined) {
fieldIsValid = true;
}
valid &= fieldIsValid;
});
if (!valid) {
// Show error
$oldStepLink.addClass('error');
return false;
}
}
// ! Check for finish
if (newIndex == length) {
// Do finish
if (isForm) {
$this.submit(options.onSubmit).submit();
}
}
// ! Hide old step and mark is as successfull
$oldStepLink.removeClass('current').addClass('success');
$oldStep.hide();
// ! Show current step
$newStepLink.removeClass('error').removeClass('success').addClass('current');
$newStep.show();
// ! If we are at the first step, disable the 'back' button
if (newIndex == 0) {
$el.prev.addClass('disabled');
} else {
$el.prev.removeClass('disabled');
}
// ! If we are at the last step, show 'Finish' instead of 'Next'
if (newIndex == length - 1) {
$el.next.hide();
$el.finish.show().css('display', 'inline-block');
} else if (!$el.next.is(':visible')) {
$el.next.show();
}
// ! Possibly resize form
if (isForm && $$.utils.forms) {
$$.utils.forms.resize();
}
index = newIndex;
},
index = 0,
length = 0;
// ! Get number of steps
length = $el.list.children().length;
// ! Set up steps links
$el.a_list.click(function(e){
e.preventDefault();
goToIndex($(this).parent().index());
});
// ! Set up prev/next/finish-buttons
$el.prev.addClass('disabled'); // Initially disabled
$el.prev.click(function(e){
e.preventDefault();
goToIndex(index - 1);
});
$el.next.click(function(e){
e.preventDefault();
goToIndex(index + 1);
});
$el.finish.click(function(e){
e.preventDefault();
goToIndex(length); // Go to finish
});
}); // End of '$(this).each(...)'
} // End of '$.fn[PLUGIN_NAME] = ...'
})(jQuery, this, document);
No comments:
Post a Comment