How do I add a $( document ).ready() function to this script?

Question

I tried reading and inserting the document function in this code but I have no idea what im doing. Can someone tell where I should put the document initialization and why? this would be of great help. thanks.

Here's a fiddle of what the jquery is for

<script type="text/javascript">
$('.quantity, .drink').change(calculateTotal);
function calculateTotal() {
    var $form = $(this).closest('form'), total = 0;
    $form.find('.drink:checked').each(function() {
        total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
    });

    $('#totalDiv').text(total);
}
</script>

Just look into documentation: http://api.jquery.com/ready/ - In JS Fiddle, scripts are initialized on document ready or window.onload so you don't need to add this handler. But on normal page you need. — Johny, Mar 26 '16 at 15:20
If your script is executed in the `head` and not at the end of the body, then you would place at least `$('.quantity, .drink').change(calculateTotal);` in the document ready callback, but I would suggest to place all of the code in the ready callback so that you won't pollute the global scope. — t.niese, Mar 26 '16 at 15:23

score 3 · Accepted Answer · answered Mar 26 '16 at 15:22

You just wrap your whole code in the ready function like this:

$( document ).ready(function() {
$('.quantity, .drink').change(calculateTotal);
function calculateTotal() {
    var $form = $(this).closest('form'), total = 0;
    $form.find('.drink:checked').each(function() {
        total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
    });

    $('#totalDiv').text(total);
}
});

We are doing this because it prevents JQuery selectors from bugging out, by firing before the actual DOM elements loads... resulting in selecting nothing and binding no handlers to the event.

You solve this by adding the .ready() method to your document - allowing it to load before you set the handlers. Alternative way to fix this is delegating the handler to a parent element.

ALSO: Change method is for event hanlding or triggering the event on an element. You can NOT use it in a way you are in your script - here is the doc about the method: JQuery - Change Method

i tried this in a text document and it worked. but when I incorporate it with my [site](http://pizzarepublic.ph/2016/order-combo/) it shows this error in the console _(index):31 Uncaught ReferenceError: $ is not defined(anonymous function) @ (index):31_ any idea on why this is happening? — KevinG, Mar 26 '16 at 15:31
Dude you have two head AND HTML tags on that site... remove one, combine their content together and then see if it works. — Elvanos, Mar 26 '16 at 15:34
I found a way to make it work by changing .next('.quantity') into .siblings('quantity'). As for my my double heads and body, yeah there's work to be done. thanks! — KevinG, Mar 26 '16 at 17:00

score 0 · Answer 2 · edited May 23 '17 at 12:31

put it around $('.quantity, .drink').change(calculateTotal);

The function declaration does not need to be in the onReady block, in fact it makes sense to move it outside of it (you want to expose the function for later use/use by other libraries). Just the implementation need be in the block. The only thing that needs to be in on-document-ready is stuff you want to run on the ready dom, like changing the total in your example.

Revised code

<script type="text/javascript">
// Shorthand for $( document ).ready()
$(function() {
    $('.quantity, .drink').change(calculateTotal);
});

function calculateTotal() {
    var $form = $(this).closest('form'), total = 0;
    $form.find('.drink:checked').each(function() {
        total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
    });

    $('#totalDiv').text(total);
}
</script>

You could impart a degree of the meaning of private by moving it into the anonymous onready function, if that were important to you. unless you really want to prevent other/later code from using your own, its nice to have it public like that.

On the other hand, you are polluting the public namespace with a function that some other library could later overwrite. If you had many functions the chances of collision go up. It is good practice to then use a namespace.

The `()` right after the `$(...)` does not make sense. – t.niese Mar 26 '16 at 15:24 — t.niese, Mar 26 '16 at 15:24
oops.. it's fixed now – roberto tomás Mar 26 '16 at 15:30 — roberto tomás, Mar 26 '16 at 15:30

How do I add a $( document ).ready() function to this script?

2 Answers2

Revised code