jQuery plugin method to get object properties

Question

I´m building a jQuery extension plugin with the following standard:

(function ($) {

    var version = "1.1.0";
    var active = false;

    $.fn.inputPicker = function (options) {

        return this.each(function () {

            if ($(this)[0].tagName !== 'DIV')
                throw new ReferenceError('mz.ui.dialog.dateTimePicker: Method works only on DIV types.');



            /// Label
            var labelObj = $("<label class='small'>Data Hora Inicial</label>");
            $(this).append(labelObj);


            /// Input
            var inputObj = $("<input type='datetime-local' class='form-control input-sm'></input>");
            $(this).append(inputObj);

             })
        });
    };

}(jQuery));

And here is how I call it:

<div id='test'></div>

$('#test').inputPicker();

Later in code I wanna get the data that was entered in the input field, something like:

$('test').inputPicker().getInputData();

What´s the best way to accomplish that ? I´ve tried something like:

this.getInputData = function () { 

return $(inputObj).val();
}

But got errors when calling the function.

Can someone help me with this ? Thanks in advance...

I recommend to read this tutorial about creating stateful plugins: http://learn.jquery.com/plugins/stateful-plugins-with-widget-factory/ — Felix Kling, Mar 24 '14 at 04:35
I´ve gone through this... So, you recommend changing the plugin method to use the widget style ? — Mendes, Mar 24 '14 at 04:56
I'd at least say give it a try. It looks like that's what you want to do. — Felix Kling, Mar 24 '14 at 05:00
As I can see, I would have to build 1 widget for every picker I have ( I have several different pickers on my library) ? — Mendes, Mar 24 '14 at 05:17
Also, I´ve gone thouugh this link http://stackoverflow.com/questions/6269051/jquery-plugins-vs-widgets. I´m using bootstrap. Will the widget conflict with bootstrap ? — Mendes, Mar 24 '14 at 05:21

score 2 · Accepted Answer · answered Mar 24 '14 at 05:10

2

You could just make another method to get the input data like this using the DOM structure and class names that you added:

$.fn.getInputData = function() {
    return this.eq(0).find("input.input-sm").val();
}

This would operate only on the first DOM element in the jQuery object (since it's returning only a single value).

So, after setting it up like you did:

$("#test").inputPicker();

You'd then retrieve the data like this:

var data = $("#test").getInputData();

answered Mar 24 '14 at 05:10

jfriend00

683,504
96
985
979

I would like to have something 'embedded' in inputPicker, not a simple function. This is because I have several different pickers in a 'dialog' module (I´ve post only a simple one). So that, I would need getInputDataForPickerA, getInputDataForPickerB, etc.. This is not desirable... – Mendes Mar 24 '14 at 05:16
@Mendez - I don't think you understand what I proposed. You just pass the root DOM object (whatever it is). There's only one method that finds the input element inside any inputPicker div and gets its value. You don't need multiple methods. You'd do `$("#test1").getInputData()` and `$("#other").getInputData()` to get different data from different parts of the page. This is the general jQuery model. I'm not sure what other model you're looking for. – jfriend00 Mar 24 '14 at 05:24
@Mendez - The `` tags are embedded in your parent `
`. The plugin method I've proposed finds the `` tag embedded in whatever parent div you pass it and returns the value from it. It works just fine with many different pickers in the same dialog or page. You just call it on whichever parent div you want the input value from.
– jfriend00 Mar 24 '14 at 05:28
My point is not the DOM object, but the plugin. I have a called Dialog plugin with several inputPickers functions there. Some of them has 2 or 3 data to vbe returned. So, I have inputDateTimePicker, inputRadioPicker, inputIntervalPicker and so forth. If I use a single function, I would need to have getInputDateTimePickerData, getInputRadioPickerData, inputIntervalPickerData and so forth. What I want is inputDateTimePicker.data (or value, or whatever). – Mendes Mar 24 '14 at 05:35
@Mendez - You haven't shown anything related to what `inputDateTimePicker` or `inputRadioPicker` are so I can't really help you there. I think I solved the problem you actually asked about. You asked to get the data that was entered in the input field. That's what my answer does. If you want something different, then you better modify your question to describe what you actually want. – jfriend00 Mar 24 '14 at 05:37

jQuery plugin method to get object properties

1 Answers1