jQuery Forum

I am stumped. I was under the impression that when using methods for plugin development the init method could be set to set and merge options for other method objects.

1. (function($){
   
    $.fn.demo = function(method){
   
     var methods = {
   
      init: function(options){
   
       return this.each(function(options){
        var defaults = {
         x:  true,
        };
        options = $.extend({}, defaults, options);
       });
      },
   
      first: function(options){
2.     // errors with options?
       return this.each(function(){
        __do(options);
       });
      },
   
3.    second: function(options){
4.     // errors with options?
       return this.each(function(){
        __do(options);
       });
      }
   
5.   };
   
     var __do = function(options){
   
6.    // where is options.x?
   
7.   }
   
     /* robot, do something */
     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 {
      console.log('Method '+method+' does not exist');
     }
    };
   })(jQuery);
   
   

I am stumped on this.. any help or pointers is appreciated.

This bit of code works great by itself.

1. $('#formID').live('submit', function(e){
2.  // do something
3. });

However if I try to include something similar in a plugin like so:

1. (function($){
2.  /* jQuery.handleStorage plugin */
3.  $.fn.tester = function(method) {
4.   /* defined methods */
5.   methods = {
6.    /* primary method of usage */
7.    init: function(options){
8.     /* default options */
9.     var defaults = {
10.      wtf: ''
11.     };
12.     var opts = $.extend({}, defaults, options);
13.     $('#'+$(this).attr('id')).live('submit', function(e){
14.      // do something
15.     });
16.    }
17.   };
18.   if (methods[method]){
19.    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
20.   } else if (typeof method==='object' || ! method){
21.    return methods.init.apply(this, arguments);
22.   } else {
23.    $.error('Method '+method+' does not exist on '+opts.name);
24.   }
25.  };
26. })(jQuery);

I have used the .live() function in other plugins so this is baffling the bejeebus out of me. I am using the latest jquery 1.6.

Not being a super proficient plugin developer has led me here...

I am having a problem with a bit of code which should bind to the forms submit event and process accordingly. Any help is appreciated. Thanks in advance.

1. (function($){
2.  $.fn.test = function(options) {
   
     /* default options */
     var defaults = {
      appid:   'jQuery.test', // Plugin name (unique ID for local, session or cookie storage id)
      storage: 'localStorage',         // localStorage || sessionStorage || cookie (cookie storage requires jQuery cookie plugin)
      dowhat:  '',                     // set || get storage items
      form:    $(this).attr('id'),     // form element (used for processing entire form)
      k:       $(this).k,              // name to use for index
      v:       $(this).v,              // value to use for indexed storage item
      aes:     false,                  // Use encrypted storage?
      key:     '',                     // key for encrypted storage
      display: $(this).display         // div element used to display contents of storage
     };
   
     /* return */
     var ret = '';
   
     /* merge specified options with defaults */
     options = $.extend(defaults, options);
   
     /* perform key setting/getting */
     $.handleKey(options);
   
     /* public functions
     this.get = function(){
      return $.getItem(options.storage, options.k);
     }
   
     this.set = function(){
      return $.setItem(options.storage, options.k, options.v);
     } */
   
     /* what are we doing? */
     switch(options.dowhat){
      case 'get':
       ret = $.getItem(options.storage, options.k);
       break;
      case 'set':
       ret = $.setItem(options.storage, options.k, options.v);
       break;
      default:
       $('.'+options.form).live('submit', function(e){
   
3.      ret = $.handleAll(options.form, $.getForm(options));
       });
       break;
     }
   
     /* set the display item */
     $('#'+options.display).html(ret);
     return true;
   
    };
   })(jQuery);
   

And here is the HTML form which is to be processed.

1.  <!-- localStorage default unencrypted examples -->
    <script>
     var $j = jQuery.noConflict();
     $j(document).ready(function(){
      $j('#defaultset').test();
     });
    </script>
    <fieldset>
     <legend><strong>Default setAll to localStorage</strong></legend>
     <form id="defaultset" class="defaultset" method="post" action="tests.html">
      <div>
       <label for="name">Name</label>
       <input type="text" name="name" id="name" value="joe whatzitzname" />
      </div>
      <div>
       <label for="name">Address</label>
       <input type="text" name="address" id="address" value="over the hill" />
      </div>
      <div>
       <label for="name">Phone</label>
       <input type="text" name="phone" id="phone" value="123-456-7890" />
      </div>
      <div>
       <label for="name">Email</label>
       <input type="text" name="email" id="email" value="joe@rocks.com" />
      </div>
      <input type="button" value="submit" />
     </form>
     <div id="defaultsetdiv"></div>
    </fieldset>
   

I have been googling around about this for quite awhile without any definite answer.

Here is the code I am having a problem with:

1.     var $m = {'id1':'page1.html','id2':'page2.html'};
       /* load modules */
       $j.each($m, function($key, $value){
        $j('#'+$key).html($loading);
        $j.ajax({
         url:'proxy.php',
         type:'post',
         data:'module='+$value,
         context:$j('#'+$key),
         dataType:'html',
         success: function($response){
          $j('#'+$key).html($response);
         }
        });
       });

The problem is that the second XMLHttpRequest response does not get displayed. If using firebug for debugging you can see that two separate responses are returned from the server both with the correct HTML data. The first item gets displayed on the page however the second item never gets displayed.

Some of the things I have read when searching for similar problems indicate a problem with the div id changing prior to the success callback.

Can anyone shed some light on this?

I realize this has been posted and I should read the documentation but I have done these things.

I am trying to disabled ajax form processing with jquery mobile so I can use another plugin to handle form processing but now everything is double posted and I am receiving errors when jquery mobile tries redirections

Here is the code I am working with.

1. var $j = jQuery.noConflict();
    $j(document).ready(function() {
     $j(document).live('mobileinit',function() {
      $j.extend($j.mobile, {ajaxFormsEnabled:false, ajaxLinksEnabled:false});
     });
     $j(document).bind('mobileinit',function() {
      $j.extend($j.mobile, {ajaxFormsEnabled:false, ajaxLinksEnabled:false});
     });
     $j('#theAsymmetricalForm').pidCrypt();
    });
   <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.js"></script>

The error occurs here:

to.data("page")._trigger("beforeshow", {prevPage: from});

Is there a review process for new plugins?

This is my first plugin for jQuery but feel its pretty solid and should be beneficial to others.
http://plugins.jquery.com/project/jQuery-Gibberish-AES

Thanks     

I am stumped. First plug-in project and have hit a snag.

Declaring a function which utilizes the .ajax() call will not return the data retrieved during the 'success' function.

Here is the code if anyone could tell me what I am doing wrong... thanks in advance.

1. (function($){
   $.rsaKey = function(proxy) {
     $.ajax({
      data: 'ssl-key=true',
      type: 'post',
      url: proxy,
      success: function(response) {
       return response;
      }
     });
    }
    $.fn.gibberish = function(options) {
2.   var options = $.extend(defaults, options);
3.   return this.each(function() {
4.    var data = $.rsaKey(options.proxy);
5.    alert(data);
   
6.   });
7.  });
8. })(jQuery);
   

I am stumped here, when using a selector's name attribute, perform a x.replace() on the variable, then attempting to get the new name of the attribute I am getting the original selector's name.

1. $j('input[name*=\\[txtProductQuantity\\]]').bind('blur', function() {
2.  if ($j(this).val()) {
3.   var x = $j(this).attr('id').replace('txtProductQuantity','txtProductPrice');
4.   alert(x+' => '+$j('input[name^='+x+']').attr('name'));
5.  }
6. });  

I am experiencing a problem that I have not been able to resolve with research.

Using a group of nested form elements (IE. <input id="txt[0][amount]">, <input id="txt[1][amount]">).

I am not able to come up with a method of selecting and assigning a bind event to anything matching the specified group of input elements

1. $j('input[name*=txt\\[*\\]\\[amount\\]]').bind('blur', function() {
2.  // operations
3. });

Is this possible? Any help is definitely appreciated.

I am stumped and would like some insight into a problem I am encountering when attempting to utilize the ui.tabs functionality of jquery.

I currently have a master template file which looks like the following:

1. <script type="text/javascript">
      var $j = jQuery.noConflict();
      $j(document).ready(function(){
       var loading = '<img src="{$templates}/images/loading.gif" width="20" height="20" alt="Loading content..." title="Loading content..." />';
       var tabID=$j.cookie("tabID")||0;
       $j("#tabs").tabs({
        cache: false,
        fxAutoHeight: true,
        fxSlide: true,
        fxFade: true,
        fxSpeed: 'fast',
        selected: tabID,
        show: function(junk,ui){
         $j.cookie("tabID",ui.index);
        },
        spinner: loading
       });
       $j('.auth-form').live('submit', function() {
        $j('.ui-tabs-panel:visible').html(loading);
        $j.ajax({
         data: $j(this).serialize(),
         type: $j(this).attr('method'),
         url: $j(this).attr('action'),
         success: function(response) {
          $j('.ui-tabs-panel:visible').html(response);
         }
        });
        return false;
       })
      });
     </script>
2.   <div id="tabs" class="tabs ui-corners-all">
      <ul id="tabID">
       <li><a href="content.php?do=0x00e0"><span><img src="images/icons/icon-tools.png"/></span>&nbsp;<strong>Options</strong></a></li>
3.    </ul>
     </div>
   

The file 'content.php' loads a secondary template with a set of tabs and looks like the following:

1. <script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function(){
     var loading = '<img src="{$templates}/images/loading.gif" width="20" height="20" alt="Loading content..." title="Loading content..." />';
     var tabIDConfig=$j.cookie("tabIDConfig")||0;
     $j("#tabsConfig").tabs({
      cache: false,
      fxAutoHeight: true,
      fxSlide: true,
      fxFade: true,
      fxSpeed: 'fast',
      selected: tabIDConfig,
      load: function(junk,ui){
       //$j('a', ui.panel).click(function() {
        $j(ui.panel).load($j(this).href);
        return false;
       //});
      },
      show: function(junk,ui){
       $j.cookie("tabIDConfig",ui.index);
      },
      spinner: loading
     });
     $j('.auth-form').live('submit', function() {
      $j('.ui-tabs-panel:visible').html(loading);
      $j.ajax({
       data: $j(this).serialize(),
       type: $j(this).attr('method'),
       url: $j(this).attr('action'),
       success: function(response) {
        $j('.ui-tabs-panel:visible').html(response);
       }
      });
      return false;
     })
    });
   </script>
   <div id="tabsConfig" class="tabs ui-corners-all">
    <ul id="tabIDConfig" class="tabID">
     <li><a href="content.php?do=0x00ea"><span><img src="/images/icons/icon-users.png" /></span>&nbsp;<strong>Groups</strong></a></li>
   </ul>
   </div>

As you can see the nested tabs should perform the same functionality in regards to loading the content but I am very unaware as to why I cannot get the template generated on the second set of tabs to load within the nested tab 'visible' container.

Any help or pointers is appreciated. Oh yeah the ajax stuff is used to hijack the submit of forms within either the primary tab or the nested tab. Thanks in advance.

I am not sure if this is a bug or a behavior or my code causing the problem.

Because of limitations with tabs in the UI the following bit of code essentially hijacks the forms submit button and dynamically serializes and submits data while ensuring the response goes to the correct or active tab.

1.     $j('.auth-form').live('submit', function() {
        $j('.ui-tabs-panel:visible').html(loading);
        $j.ajax({
         data: $j(this).serialize(),
         type: $j(this).attr('method'),
         url: $j(this).attr('action'),
         success: function(response) {
          $j('.ui-tabs-panel:visible').html(response);
         }
        });
        return false;
       })
   

The reason I am asking about this behavior is because on the server side I am attempting to utilize various form submit button name values within a conditional statement.

Any help or insight is appreciated.

In regards to the 'autocomplete' plugin available from Jörn Zaefferer. I needed some added functionality to query a server after a user selected an item from your autopopulate list to then populate an existing form. Here is my solution...

Added functionality of a callBack option Add the following three lines on or near line 235

1. $input.trigger("result", [selected.data, selected.value]);
   
2. +if(options.callBack){
   + options.callBack(selected.value);
   +}

Now just add your callBack option with your custom function like so:

1. $j("#autoOrders").autocomplete(orders, {
     callBack: queryOrders
   });

Of course your custom callBack function may be different but here is an example of formating a query string then calls a secondary helper function to auto populate the form.

1. function queryOrders(data)
   {
    var x = data.split(" ");
    var y = '?date='+x[0]+'&number='+x[1]+'&account='+x[2]+'&eta='+x[3];
    return mySearches(y);
   }
   
   function mySearches(data)
   {
    $j.ajax({
     data: data,
     type: 'post',
     url: 'ajaxSearch.php',
     success: function(response) {
      var myObj = JSON.parse(response, function(key, value) {
      $j('#'+key).val(value);
     });
    }
   });

Hope this helps someone else.

Just in case I didn't explain it right.

By adding an option for a post selected autocomplete function you can auto-populate a form based on your own custom callback.