CODEWITHSUNDEEP
javascriptjquery
user1032531
user1032531

Reputation: 26281

Accessing and evaluating configuration values within jQuery plugin

I am trying to create a jQuery plugin. When configuring the plugin, I wish to define an object which will be posted via Ajax. One of the properties in the object value2 is based on the element which the plugin was applied to (a.myClass), and I thought I would try something like the following:

post:{value1:1,value2:function(t){return $(t).data('id');},value3:3}

But, within the plugin, the object is equal to { value1=1, value3=3, value2=function()}, and if posted, value2 is sent as undefined. I've found that I could access the value using settings.post.value2(this), however, I don't know how this helps me. I suppose I could loop through the object and evaluate each property, but this just doesn't seem right.

What is the proper way of doing this? Thank you

http://jsbin.com/sedoqeluni/1/

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>editSelect</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            (function($){
                var methods = {
                    init : function (settings) {
                        return this.each(function () {
                            $(this).click(function(e) {
                                console.log(settings.post);
                                console.log(settings.post.value2(this));
                                $.post('testing.php',settings.post);
                            });
                        });
                    }
                };
                $.fn.testit = 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.testit');
                    }    
                };
                }(jQuery)
            );
            $(function(){
                $('.myClass').testit({
                    foo:'bar',
                    post:{value1:1,value2:function(t){return $(t).data('id');},value3:3}
                });
            });
        </script>
    </head>

    <body>
        <a class="myClass" href="javascript:void(0)" data-id="2">hello</a>
        <a class="myClass" href="javascript:void(0)" data-id="222">hello</a>
    </body>
</html>

Upvotes: 0

Views: 61

Answers (1)

phts
phts

Reputation: 3925

Your inline function should be called to return a value:

post:{value1:1, value2: (function(t){return $(t).data('id');})(t), value3:3}

Or using not inline function to be more readable:

var getValue2 = function(t) {
    return $(t).data('id');
};
....
post:{value1:1, value2: getValue2(t), value3:3}

UPDATE

Guess t should be the same element .myClass. So the code will be

 $(function(){
   $('.myClass').each(function() {
     $(this).testit({
       foo:'bar',
       post:{
         value1:1,
         value2: (function(t){return $(t).data('id');})(this),
         value3:3
       }
     });
   });
 });

UPDATE#2

But code from UPDATE may be simplified to read data-id directly without any inline functions:

 $(function(){
   $('.myClass').each(function() {
     var $this = $(this);
     var id = $this.data('id');
     $this.testit({
       foo:'bar',
       post:{
         value1: 1,
         value2: id,
         value3: 3
       }
     });
   });
 });

UPDATE#3

I've found that I could access the value using settings.post.value2(this), however, I don't know how this helps me. I suppose I could loop through the object and evaluate each property, but this just doesn't seem right.

Well it's quite normal approach if your plugin should accept functions as parameters. So it's up to you how to handle parameters.

There may be some enchantment to be made to improve function determination. Refer How can I check if a javascript variable is function type?.

$(this).click(function(e) {
  console.log(settings.post);
  console.log(settings.post.value2(this)); // <--- here you can add a check if value2 is a simple parameter or function
  // and replace value
  // something like this
  if (isFunction(settings.post.value2)) {
    settings.post.value2 = settings.post.value2(this)
  }
  $.post('testing.php',settings.post);
});

Upvotes: 1

Related Questions