jquery plugin: what is wrong with $.fn. in my plugin?
What is wrong with my jquery plugin when I make the function inside the plugin with $.fn.
You can see it what I mean here. I have two forms and they share the same plugin,
$(document).ready(function(){
$("#search-title").post_form_public();
$("#subscribe-email").post_form_public();
});
The first form won't be working again when the second form is triggered.
It works fine if I attach plugin to one form only.
Below are some more details inside the plugin code,
post_form_public: function(options) {
// Set the default values, use comma to separate the settings, example:
var defaults = {
top: 250, // The top of the proceesing popup and the result popup.
width: 400 // The width of the proceesing popup and the result popup.
}
var options = $.extend(defaults, options);
var o = options;
var $cm = this.submit(function(e){
var object = $(this);
// Get the path from attribute of action in the form.
var target_postpath = object.attr('action');
var top = o.top;
var width = o.width;
// Keep the lines below for checking.
alert($cm.selector);
// Disable the submit button so that you won't click it twice while the ajax is processing the form.
// Must use true or false for jquery > 1.6.
$('input[type=submit]',$($cm.selector)).attr('disabled', true).css({opacity:0.4});
开发者_StackOverflow中文版 // Post the form .
$.post(target_postpath,object.serialize(),function(xml){
//process_posted(xml); // two forms work fine with this!
$.fn.post_form_public.process_posted(xml); // but not with this!
});
return false;
});
// Callback function for proccesing the deleted item.
//function process_posted(xml)
$.fn.post_form_public.process_posted = function(xml)
{
// Enable the submit button again after processing the xml output.
// Must use true or false for jquery > 1.6.
$('input[type=submit]',$($cm.selector)).attr('disabled', false).css({opacity:1});
}
}
But if I just make the function without $.fn.
, then these two forms will work fine. How can I use $.fn.
and make the multiple forms worked!?
or you can see the code here.
Thanks.
The variable
$.fn.post_form_public.process_posted
...can only store one function. The second time you call your plugin, this will be overwritten. In the form that works, you have a function that forms a closure over the value of the $cm
variable - and you have one of these functions created for each call to post_form_public
.
What's the matter with the form of the function that worked?
One method to store it in your post_form_public
object might be something like:
if(!$.fn.post_form_public.process_posted) $.fn.post_form_public.process_posted = {};
$.fn.post_form_public.process_posted[$cm.selector] = function(xml) {
//...
};
...and call it within your post
callback with:
$.fn.post_form_public.process_posted[$cm.selector](xml);
That code looks pretty weired. Have reordered some stuff, this should do the trick.
http://jsfiddle.net/trgpa/
Can't test it myself on jsfiddle as the ajax post request 'search_title_xml.php' on jsfiddle throws an 404.
精彩评论