JQuery not working on Tumblr?

Question

I'm kind of new to JQuery. I've been trying to use this Jquery http://jsfiddle.net/54pp2/2/ ,

<input id="click" type="button" value="click" />
<label id="test">Test</label>

$(document).ready(function () {
    var textArray = [];
    textArray[0] = 'test 1';    
    textArray[1] = 'test 2';    
    textArray[2] = 'test 3';    
    textArray[3] = 'test 4';    

    var idx = 0;
    $('input#click').on('click', function() {
        idx++;
        var newidx = idx % textArray.length;
        $('label#test').text(textArray[newidx]);
    });
});

But when i put it in my theme code, it won't work, even though the jsfiddle shows that it works just fine.

If you want to see: http://dialoguetest.tumblr.com/

(where when you click the pink button on the sidebar, the description text changes. But you can only click it once, unlike the jQuery code that enables the button to be clicked a few times for the text change.)

When i tried to use the jQuery, it won't work: http://dialoguetest2.tumblr.com/

Is there something i'm missing? I know that I have to add

<script type="text/javascript">

and end it with

</script>

in order to make it work. But is there something else i'm missing, like using the Google AJAX Libraries API?

If so, how is it possible?

Tumblr doesn't serve jQuery, you need to include it before your script. I would advise using Googles CDN: https://developers.google.com/speed/libraries/devguide#jquery — mikedidthis, May 16 '14 at 13:49
Are you getting any errors? Have you included the jQuery library in your project? — Jay Blanchard, May 16 '14 at 13:50
@cowls Oh I'm sorry! I edited my question to elaborate more on what is not working! — sha, May 16 '14 at 13:54

score 1 · Answer 1 · answered May 16 '14 at 13:49

1

To make this work in a HTML page you need to place a script reference to jQuery along with your JS code (in a DOM ready handler) in the head. Something like this:

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript>
            $(document).ready(function () {
                var textArray = [];
                textArray[0] = 'test 1';    
                textArray[1] = 'test 2';    
                textArray[2] = 'test 3';    
                textArray[3] = 'test 4';    

                var idx = 0;
                $('input#click').on('click', function() {
                    idx++;
                    var newidx = idx % textArray.length;
                    $('label#test').text(textArray[newidx]);
                });
            });
        </script>
    </head>

    <body>
        <input id="click" type="button" value="click" />
        <label id="test">Test</label>            
    </body>
</html>

answered May 16 '14 at 13:49

Rory McCrossan

331,213
40
305
339

2

Wouldn't it make more sense to put the script / code after the markup? – mikedidthis May 16 '14 at 13:52
oh i usually put the code right after the and before tag. Is it wrong? – sha May 16 '14 at 13:59
@mikedidthis it's certainly an option although it make no difference to page performance. – Rory McCrossan May 16 '14 at 14:01
@RoryMcCrossan Won't the browser have to download `jquery.min.js` before it can move on to rest of the document? – mikedidthis May 16 '14 at 14:07
@mikedidthis no. Browsers will have multiple connections open so they can download several things at once. Also, if you're using a CDN copy of jQuery, as in my example, chances are it's already cached so wouldn't need to be downloaded again anyway. – Rory McCrossan May 16 '14 at 14:09
As a general rule it's good practice to load javascript libraries (like jquery) in the head, but custom js towards the bottom. Quite alot has been written about this: http://stackoverflow.com/a/383071/1238244 – lharby May 16 '14 at 18:11

JQuery not working on Tumblr?

1 Answers1