understanding jquery's $(document).ready, jquery's append not working

Question

I'm basically wondering if I can inter-mix JavaScript and jQuery any way I want, or are these more like two different worlds and I have to be careful when crossing boundaries. I strongly suspect it's the latter case but don't know how or where to respect boundaries. For example, in the following code of mine doesn't work. (I suspect it stems from a lack of understanding why and where $(document).ready is necessary.) I read a bit about the .on method, but it doesn't really answer my question.

When I run this code in Chrome it flashes stuff briefly and I don't know why.

<html>
    <head>
        <title>prototype Day 1</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            jQuery.fn.center = function () {
                this.css("position","absolute");
                this.css("top", (($(window).outerHeight() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
                this.css("left", (($(window).outerWidth() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
                return this;
            }

            $(document).ready(function() { 
                $("div#main").center(true);             
            });

            function stubMethod () {
                $("div#main").append("<p>stuff</p>");
            }

        </script>
    </head>
    <body>
        <div id="main">
            <div id="search">
                <form method="get">
                    <label>Define:</label>
                    <input type="text" id=""></input>
                    <button onclick="stubMethod()">Go</button>
                </form>
            </div>
        </div>
    </body>
</html>

I also tried moving the stubMethod function to be inside $(document).ready(function() { ... here ... }); but instead of flashing stuff briefly it just doesn't do anything. — Ian Nastajus, Mar 19 '12 at 01:54
Why are you doing `center(true)`? That is probably throwing an error and halting your script. — Blender, Mar 19 '12 at 01:54
so... do you mean I just delete div in front of my div#main? Uh, no, no difference, as I expected. I think my misunderstanding runs deeper than that. — Ian Nastajus, Mar 19 '12 at 01:57
jQuery is a JavaScript library. It is written in JavaScript, and any code that uses jQuery is JavaScript. They are not "two different worlds." That is like saying English and Shakespeare are two different worlds. — Jamison Dance, Mar 19 '12 at 01:58
because I want to center with jquery, on the assumption it's abstracting away the minutia of dealing with centering in multiple browsers. I want both, centering and appending, I don't necessarily care how, but the simpler the happier I am. — Ian Nastajus, Mar 19 '12 at 01:58
Jergason, then why is jQuery the only place I've seen $(...).method syntax, and not in any regular JavaScript? I accept I'm not terribly familiar with all this stuff, but I still consider them different in some way, despite that strong affinity, that I'm trying to grasp right now. — Ian Nastajus, Mar 19 '12 at 02:01
Blender, I took away the true parameter, no difference. Those lines of code should be valid per my source: http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen — Ian Nastajus, Mar 19 '12 at 02:07

Joseph · Accepted Answer · 2012-03-19T02:16:52.357

you should add event handlers via JS rather than use it on the elements themselves:

DEMO HERE

<script>
    jQuery.fn.center = function() {
        this.css("position", "absolute");
        this.css("top", (($(window).outerHeight() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
        this.css("left", (($(window).outerWidth() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
        return this;
    };

    $(document).ready(function() {
        $("div#main").center(true);

        //add onClick to the button
        $('form button').on('click', function() {
            $("div#main").append("<p>stuff</p>");

            //prevent form from submitting (and changing page)
            return false;
        });
    });

</script>

<div id="main">
    <div id="search">
        <form method="get">
            <label>Define:</label>
            <input type="text" id=""></input>
            <button>Go</button>
        </form>
    </div>
</div>

what was happening in your code was that when the button was called, the form is submitted, thus, your page moved away. even if the append took effect, you would not see it because the form was submitted.

also, if you placed stubMethod() inside .ready(), it means that your function isn't in the global scope anymore, and onClick="stubMethod()" won't work anymore.

This definitely works, but I will have to research more to understand why, or will wait a while for any additional answers. — Ian Nastajus, Mar 19 '12 at 02:51

understanding jquery's $(document).ready, jquery's append not working

1 Answers1