CODEWITHSUNDEEP
javascriptjqueryoop
intelis
intelis

Reputation: 8068

jQuery and object literal function not working together


i was trying to organize my jquery code so i created an object literal, but now the focusTextArea is not working and my textarea value is not updating.

Thanks for your help.

html

<textarea id="test"></textarea>​

javascript

(function($,window,document,undefined){

    var TEX = {

        inputField: $("textarea#test"),

        /* Init all functions */
        init: function()
        {
            this.focusTextArea();
        },

        /* Function update textarea */
        focusTextArea:  function()
        {
            this.inputField.text('test');
        },
    }

    $(document).ready(function(){
        TEX.init();
    });

})(jQuery,window,document);​

jsfiddle http://jsfiddle.net/vBvZ8/1/

Upvotes: 1

Views: 589

Answers (2)

charlietfl
charlietfl

Reputation: 171690

Alternative syntax to avoid looking for an element before it exists is to return the element from a function:

(function($,window,document,undefined){

    var TEX = {
        /* function won't look for element until called*/
        inputField:function(){
            return $("textarea#test")
       }, 
        init: function()
        {
            this.focusTextArea();
        },
        focusTextArea:  function()
        {
            this.inputField().text('test');
        },
    }

    $(document).ready(function(){
        TEX.init();
    });

})(jQuery,window,document);

DEMO: http://jsfiddle.net/vBvZ8/5/

I realize this is a simplified example...but you are also very close to creating a jQuery plugin and that may also be of benefit. Following provides same functionality as example:

(function($, window, document, undefined) {    
    $.fn.focusTextArea = function() {
        return this.each(function(){
            $(this).text('test');
        })        
    };    
})(jQuery, window, document);

$(function() {
    $('textarea').focusTextArea()
});

DEMO: http://jsfiddle.net/vBvZ8/8/

Upvotes: 0

Andrew Whitaker
Andrew Whitaker

Reputation: 126072

First of all, you haven't included jQuery correctly in the fiddle. Also, I think you mean to place the code in the head of the document (because of the document.ready handler).

More importantly perhaps the selector $("textarea#test") is run before the document is ready and therefore won't actually find the element correctly. I would recommend assigning inputField in TEX.init:

(function($,window,document,undefined){

    var TEX = {

        /* Init all functions */
        init: function()
        {
            this.inputField = $("#test");
            this.focusTextArea();
        },

        /* Function update textarea */
        focusTextArea:  function()
        {
            this.inputField.text('test');
        },
    }

    $(document).ready(function(){
        TEX.init();
    });

})(jQuery,window,document);​

Updated example: http://jsfiddle.net/xntA2/1/

As a side note, textarea#test should be changed to just #test. The textarea bit is superfluous since there should be only one element on the page with id=test.

Upvotes: 2

Related Questions