Hi,
I made my first jquery plugin attempt, but I have this problem/ bug which I don’t know how to work around it in a plugin.
Here is the link to see the problem - my first plugin
Here is how you can get the bug out:
-
Click on the the first ‘DELETE’ link, then you see a popup, click ‘OK’, then you see a form is loaded, then click ‘No’.
-
You can repeat the process no.1 as many times as you want.
-
Then you see the bug when you click on the second ‘DELETE’ - you will get a repeated popups depends on how many times you repeated the process no.1
So multiple occurrence happens when I hit the ‘No’ button on the loaded form.
But I don’t know how to get rid of this multiple occurrence - it should only occurs once (the popup should only happens once when you click the second ‘DELETE’).
Here is the entire html and jquey code,
$(document).ready(function(){
$('.delete-uploaded').pluginname({
deleteItem: '.item-uploaded',
deleteParent: '.items-uploaded',
wrapperParent: '.upload'
});
});
// You need an anonymous function to wrap around your function to avoid conflict
(function($){
// Attach this new method to jQuery
$.fn.extend({
// This is where you write your plugin's name
pluginname: function(options) {
//Set the default values, use comma to separate the settings, example:
var defaults = {
deleteItem: '.item-listed',
deleteParent: '.items-listed',
wrapperParent: '.upload',
}
var options = $.extend(defaults, options);
// return this.click(function(){ // original
// "this" is already a jQuery object:
// When you create the click function you can assign that element to a variable and reference it within:
var $cm = this.click(function(e){
var o = options;
var target_delete = $(this).parents(o.deleteItem); // The item for deletion, such as item held in li
var parent_delete = $(this).parents(o.deleteParent); // The parent that hold delete item, such as ul > li
var wrapper_parent = $(this).parents(o.wrapperParent); // The wrapper that hold the parent, such as div > ul > li
var target_loadin = $(this).parent();
var target_html = $(this).parent().html();
var path_load = $(this).attr('href');
var class_name = $(this).attr('class');
//alert(class_name);
alert($cm.selector);
// Load the delete form.
target_loadin.load( path_load, function(){
// When the yes button is triggered.
$("input[type=submit][name=yes]").click(function(){
// Get the path from attribute of action in the form.
var path_post = $(this).parent('form').attr('action');
//alert(path_post);
// Post the form.
$.post(path_post, $(this).serialize(), function(xml){
// Procees the form output.
//process_delete_uploaded(xml);
});
// Slide up the deleted target.
target_delete.slideUp('fast', function() {
// Remove its divs completely
target_delete.remove();
//alert($('li',parent_delete).length);
// Count how many items are left behind
if($('li',parent_delete).length == 0)
{
$('.binder-row',wrapper_parent).css({
borderBottom: '0px solid #999',
padding: '0px 0px 0px 0px'
});
}
});
return false;
});
// When the no/cancel button is triggered.
$("input[type=button][name=no]").click(function(){
// Return the html
target_loadin.html(target_html);
// Reload the delete function
$($cm.selector).pluginname({
deleteItem: o.deleteItem,
deleteParent: o.deleteParent,
wrapperParent: o.wrapperParent
});
return false;
});
});
return false;
});
}
});
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )
})(jQuery);
Here is the html,
<!-- upload c1-->
<div class="upload upload-image">
<!-- binder-background -->
<div class="binder-background target-toggler">
<!-- binder-row -->
<div class="binder-row">
<a href="#" class="btn-upload btn-upload-image" name="image" rel="#" >Upload</a>
<div class="status-upload status-upload-image"></div>
</div>
<!-- binder-row -->
<!-- binder-row -->
<div class="binder-row">
<!-- items-uploaded -->
<ul class="sort items-uploaded items-uploaded-image">
<!-- item-uploaded -->
<li id="item_29" class="item-uploaded">
<!-- item-uploaded-info -->
<div class="item-uploaded-info">
<span><a href="form_image_delete.php?img_id=29" class="delete-uploaded">DELETE</a></span>
<h4>9419_169881528011_783228011_3657915_407804_n_20110330221805.jpg</h4>
</div>
<!-- item-uploaded-info -->
</li>
<!-- item-uploaded -->
<!-- item-uploaded -->
<li id="item_30" class="item-uploaded">
<!-- item-uploaded-info -->
<div class="item-uploaded-info">
<span><a href="form_image_delete.php?img_id=30" class="delete-uploaded">DELETE</a></span>
<h4>69285_4159_1_06789134_webphotoscopy2_20110330221817.jpg</h4>
</div>
<!-- item-uploaded-info -->
</li>
<!-- item-uploaded -->
</ul>
<!-- items-uploaded -->
</div>
<!-- binder-row -->
</div>
<!-- binder-background -->
</div>
<!-- upload c1-->
How can I fix it?
Thanks.