CODEWITHSUNDEEP
jqueryjquery-plugins
Chris
Chris

Reputation: 2646

Detect if a selector has been specified

I am developing my first jQuery plugin but want it to work in a slightly different manner to usual. I'll start by explaining it's purpose:

Very simple, <input> fields with a title attribute specified will fill the input box with the value in the attribute, focusing on the input field will remove the value and allow the user to type in the box.

I know this isn't new stuff and probably done 100 times before but it's more the learning curve than the final outcome.

So, I've got it so far working in two ways, first method is the code is called onto a particular element:

$('input').fillForm();

The other method involves using a selector within the plugin (specified as an option) which will find all elements on the page with a particular class and run the function:

$().fillForm(); // Called from the document load

$('.fillForm').each(function () {... // Within the plugin

My question is, is there a way to detect whether or not the user as specified a selector: $('input').fillForm(); The bit highlighted in bold.

That way, if they haven't then I can tell it to use the default css selector.

Here is a fiddle of my code: http://jsfiddle.net/chricholson/HwkRw/

There are two versions there, swap the comments around to try out the other method.

Upvotes: 3

Views: 139

Answers (5)

vzwick
vzwick

Reputation: 11044

A perhaps better approach to what you are trying to do: Have a default setting and overwrite it when needed:

(function ($) {
    $.fillForm = function (args) {

        var options = {
            selector : '.fillForm'
        }

        $.extend(options, args);

        alert(options.selector);

        $(options.selector).each(function () {
            var input = $(this);

            input.val(input.attr('title'));

            input.focus(function () {
                if (input.val() == input.attr('title')) {
                    input.val('');
                } else {
                    setTimeout(function () { input.select(); }, 10);
                }
            });

            input.blur(function () {
                if (input.val() == "") {
                    input.val(input.attr('title'));
                }
            });
        });

    };
})(jQuery);

$(document).ready(function () {

    $.fillForm({'selector' : '.foo'});

});

Working example here: http://jsfiddle.net/82t3K/

Upvotes: 1

Rick
Rick

Reputation: 1391

Why not use the standard "placeholder" attribute and write a fallback that utilizes it? Or better yet, use one of the many fallbacks already written? Every answer posted so far has given varying degrees of really bad advice.

For your task, I recommend using the html placeholder fallback written by Mike Taylor (from Opera): jQuery-html5-placeholder . Or at very least, use his work to inspire your own.

Upvotes: 0

Alex Barrett
Alex Barrett

Reputation: 16455

Create a method on the root jQuery object (instead of in the fn namespace) which can be called without a selector.

(function($) {
    var defaultSelector = '.fillForm';

    // Use fillForm with your own selector.
    $.fn.fillForm = function() {
        // Blah blah blah.
    };

    // Use fillForm with the default selector.
    $.fillForm = function() {
        $(defaultSelector).fillForm();
    };
})(jQuery);

Now you can call your plugin with $.fillForm() which is a more common pattern.

Upvotes: 1

Akkuma
Akkuma

Reputation: 2265

The jQuery object has a .selector property that you can use. Here is an example, http://jsfiddle.net/Akkuma/CGFpC/

If you create an empty jQuery object $().selector; will equal an empty string. If you decided to turn this into a jQuery UI Widget you can't access it simply from this.element.selector.

Upvotes: -1

karim79
karim79

Reputation: 342625

I'm not sure exactly what it is you're after, but you can access the selector property of the constructed jQuery object like this:

console.log($("input").selector); // "input"

From within your plugin, you can do:

$.fn.myPlugin = function() {
    console.log(this.selector);
}

$("p").myPlugin(); // "p"

Upvotes: 3

Related Questions