Question

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

        // 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.

Answer 1

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);