Accessing jQuery objects in the module pattern

Question

Really getting in to javascript and looking around at some patterns. One I have come accross is the module pattern. Its seems like a nice way to think of chucks of functionality so I went ahead and tried to implement it with jQuery. I ran in to a snag though. Consider the following code

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>index</title>        
        <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){

                var TestClass2 = (function(){
                    var someDiv;            
                    return {
                        thisTest: function ()
                        {
                               someDiv = document.createElement("div");
                                   $(someDiv).append("#index");
                                   $(someDiv).html("hello");
                                   $(someDiv).addClass("test_class");
                        }
                    }
                })();

                TestClass2.thisTest();          

            });
        </script>

    </head>

    <body id="index" onload="">

        <div id="name">
            this is content
        </div>

    </body>
</html>

The above code alerts the html content of the div and then adds a class. These both use jQuery methods. The problem is that the .html() method works fine however i can not add the class. No errors result and the class does not get added. What is happening here? Why is the class not getting added to the div?

How do you know the class is not added? Did you give it some visual style? If you're testing the result by looking at View Source in your browser, you won't see the result. You'll need to use developer tools that shows updates to the DOM. — user113716
– user113716, Commented Jan 16, 2011 at 23:36
With what browser(s), and what platform(s), does this occur? — David Thomas
– David Thomas, Commented Jan 16, 2011 at 23:59
I am using firebug in firefox and the inspector that comes with chrome. In firefox it seems to work however in chrome it does not. Here is the code i should have posted in the first place. jsfiddle.net/p3fDX/4 What I am trying to do is create an element and then append it to the dom while doing operations on it. However I am running in to probelms when trying to add a class — Stewart
– Stewart, Commented Jan 17, 2011 at 0:42

Lance · Accepted Answer · 2011-01-17 00:52:10Z

2

Ah, now that you've updated your question I can better answer your question. You should change the append to appendTo considering you're wanting to move the newly created element inside of the already present #index.

$(document).ready(function() {

var TestClass2 = (function() {
    var someDiv = $("#name");
    return {
        thisTest: function() {
            someDiv = document.createElement("div");
            $(someDiv)
                .html("hello")
                .addClass("test_class")
                .appendTo("#index");
        }
    }
})();

TestClass2.thisTest();

});

Hope this helps!

answered Jan 17, 2011 at 0:52

Lance

1,89714 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stewart Over a year ago

It does. Thanks for your help Lance!

Pat O'Neill · Accepted Answer · 2011-01-16 23:36:41Z

0

I copied and pasted your code and it works for me.

Make sure you're not simply viewing source to see if the class is applied because doing so simply shows you the HTML that was sent from the server - any DOM updates that occur through JavaScript will not be reflected.

To view the live DOM, use a tool like Firebug or WebKit's Inspector (comes built-in to Safari and Chrome).

answered Jan 16, 2011 at 23:36

Pat O'Neill

1

2 Comments

Stewart Over a year ago

Your not using firefox your self by any chance are you?

Stewart Over a year ago

PS: I am using the tool for chrome and Firefox. The code works in firefox but not chrome. :(

Lance · Accepted Answer · 2011-01-16 23:55:22Z

0

Your code works great! http://jsfiddle.net/lmcculley/p3fDX/

answered Jan 16, 2011 at 23:55

Lance

1,89714 silver badges13 bronze badges

1 Comment

Stewart Over a year ago

Sorry the code I posted is not the best example. jsfiddle.net/p3fDX/2 is really my problem.

Collectives™ on Stack Overflow

Accessing jQuery objects in the module pattern

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related