jQuery plugin with multiple functions

Question

I currently have a web based application which strictly relies on a 3rd party soap server to supply the site with information. This application has little to no javascript, a few elements pulled from jQuery UI and a few jQuery things (more for simplicity than any other reason).

This application is coming back around for feature enhancements and my thoughts are based on the soap server we rely on for data and each soap request requires a round trip we really want to reduce making multiple round trips on a single http request. Therefore, my thought was to make the application ajax based and only update content areas where the user wishes to see.

So we have this server side library, php based, which uses soap to get information, generate HTML and send that data to the user. Now the fun begins, we want to take this server side code and make it modular and build a jQuery plugin to interact with server side. The part I am having trouble gathering is how to have multiple functions in a plugin (perhaps this is the wrong approach, please correct me) where I can call each one at will.

The basic idea is the following:

The soap server allows access to all of its underlying tables, each table has a specific WSDL and defines a set of functions available for each table. These functions are the same for all tables.

We have for example:

• get
• getRecords
• insert
• update

• delete

  (function( $ ){
  var methods = {
      init: function( options){
          //initialize the plugin 
          return this.each(function(){
              var $this = $(this),
                  data = $this.data();
          });
      },
      get : function(id){
          var getQuery = 'sys_id='+id;
          $.ajax({
              type: "POST",
              url: "get.php",
              data: getQuery,
              cache: false,
              success: function(result){
                  if(result.error){
                      //error notify user error occured... 
                  }else{
                      //success, update user ... 
                  }
              }
          });
          return false;
      },
      getRecords : function( ){
  
      },        
  };
  
  $.fn.myPlugin = function ( method ){
      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.ServiceNow');
      }
  };
  })( jQuery );
  

So a get call to soap server would require a ID to identify which record in the table, a getRecords call accepts a query and returns multiple records, insert inserts a record, update updates a record etc.

To perform a get call I wanted to do something such as:

 $("#div").myPlugin.get(arguments); 

The result would be that the div with id="div" would be updated with the return of whatever the get Function in the plugin myPlugin defined to do with that element.

Is this the right approach, is there a better approach, am I all wet? This is my first jQuery plugin and I feel I am coming from the object oriented world where I am used to constructed things and then calling functions/methods of them and/or using fields. And maybe this is the problem that my mentality is off.

Appreciate comments/feedback!

My thoughts were to construct something similar in a jQuery plugin to be able to pass these calls to the server and the php on the server would determine the WSDL location based on what resource you want.

Answer 1

This is a simple and valid approach, though with the code you've shown, you'd call .get like this instead:

$('#div').myPlugin('get', arguments);

This is the approach that jQuery UI uses. As such you may want to look into how their Widget Factory works, or even incorporate it into your own code.

---

An alternative approach to get a similar syntax to your example:

var methods = {/* Methods same as above */};

$.fn.myPlugin = function() {
    var Obj = function () {},
        obj;

    Obj.prototype = methods;
    obj = new Obj();
    obj.els = this;

    return obj;
};

And call it like this:

$('#div').myPlugin().get(arguments);

And if you need to reference this within your methods to refer to the selected jQuery object (e.g. $('#div')), use this.els instead.