Why doesn't jQuery document ready function run in my code?

Question

My first time to use jquery

I added this script into my code

Here is my test.aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="myProj.test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
    <link href="css/wordcloud.css" rel="stylesheet" />
    <script>
        $(document).ready(function () {

            var
                words = $('#tagi text'),
                l = words.length,
                current = null,
                delay = 2000;

            function clearBlink(o) {
                var
                    ca = o.getAttribute('class').split(' '),
                    i = ca.indexOf('blink');

                if (i !== -1) {
                    ca.splice(i, 1);
                    o.setAttribute('class', ca.join(' '));
                }
            }

            function addBlink(o) {
                var
                    ca = o.getAttribute('class').split(' ');
                ca.push('blink');
                o.setAttribute('class', ca.join(' '));
            }

            function wordblink() {

                var e;

                if (current !== null) {
                    clearBlink(words.eq(current)[0])
                }

                current = Math.floor(Math.random() * l);
                e = words.eq(current);
                addBlink(e[0]);

                setTimeout(wordblink, delay);
            }
            
            alert("Hello");
            wordblink();

        });

    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <svg id="tagi" x="0px" y="0px" width="920px" height="324px" viewBox="0 0 920 324">
                <text transform="matrix(1 0 0 1 497.4292 293.7129)" class="st17 st0">SALES</text>
                <text transform="matrix(1 0 0 1 727.8999 191.9316)" class="st17 st20">CPC</text>
                <text id="XMLID_2_" transform="matrix(1 0 0 1 433.0854 82.7407)" class="st17 st8">LEADS</text>
                <text transform="matrix(1 0 0 1 188.187 144.3555)" class="st5 st17 st22">CLICKS</text>
                <text transform="matrix(1 0 0 1 380.8301 145.1353)" class="st17 st29">ADWORDS</text>
                <text transform="matrix(1 0 0 1 378.8799 54.6626)" class="st5 st28 st6">BING</text>
                <text transform="matrix(1 0 0 1 247.0718 191.1514)" class="st5 st28 st18">YANDEX</text>
                <text transform="matrix(1 0 0 1 0 129.9268)" class="st5 st28 st30">vKONTAKTE</text>
                <text transform="matrix(1 0 0 1 250.9712 76.1118)" class="st5 st28 st14">REMARKETING</text>
                <text transform="matrix(1 0 0 1 229.9131 169.5225)" class="st5 st28 st25">MARKETING</text>
                <text transform="matrix(1 0 0 1 472.4722 105.3691)" class="st5 st28 st27">LOOKALIKE</text>
                <text transform="matrix(1 0 0 1 735.7007 163.4639)" class="st5 st28 st1">BIG DATA</text>
                <text transform="matrix(1 0 0 1 128.9111 264.4697)" class="st5 st28 st26">REKLAMA EFEKTYWNOŚšCIOWA</text>
                <text transform="matrix(1 0 0 1 191.3057 102.2393)" class="st5 st28 st24">PERFORMANCE</text>
                <text transform="matrix(1 0 0 1 318.4351 289.0342)" class="st5 st28 st1">AUTOMATION</text>
                <text transform="matrix(1 0 0 1 740.77 211.4307)" class="st5 st28 st21">ATTRIBUTION</text>
                <text transform="matrix(1 0 0 1 683.0542 230.5381)" class="st5 st28 st19">BEHAVIORAL</text>
                <text transform="matrix(0.9244 0 0 1 632.7485 97.0288)" class="st5 st28 st16">E-COMMERCE</text>
                <text transform="matrix(1 0 0 1 663.5552 139.2856)" class="st5 st28 st3">KONWERSJE</text>
                <text transform="matrix(1 0 0 1 251.3608 240.4502)" class="st5 st17 st31">SHOPPING CAMPAIGNS</text>
                <text transform="matrix(1 0 0 1 217.0439 54.2744)" class="st5 st28 st11">PRODUCT FEED</text>
                <text transform="matrix(1 0 0 1 119.9526 240.2871)" class="st5 st28 st13">TRACKING</text>
                <text transform="matrix(1 0 0 1 444.0044 34.7744)" class="st5 st17 st4">KEYWORDS</text>
                <text transform="matrix(1 0 0 1 125.4019 129.147)" class="st5 st28 st15">CTR</text>
                <text transform="matrix(1 0 0 1 350.8022 207.5303)" class="st17 st2">REVENUE</text>
                <text transform="matrix(1 0 0 1 81.5249 212.6006)" class="st17 st9">ROI</text>
                <text transform="matrix(1 0 0 1 545.0063 316.7061)" class="st5 st28 st23">COSTS</text>
                <text transform="matrix(1 0 0 1 638.2075 66.7529)" class="st5 st28 st12">AD GROUPS</text>
                <text transform="matrix(1 0 0 1 185.8467 282.4043)" class="st5 st28 st10">OPTIMIZATION</text>
                <text transform="matrix(1 0 0 1 34.1494 150.5947)" class="st5 st28 st7">TARGETING</text>
            </svg>

        </div>
    </form>
</body>
</html>

When I load the page it does not work.

I put alert but it never got executed

I wonder what I am doing wrong here?

I am not seeing jquery loaded in your code above. have you added jquery library in master page or anywhere? also, what console error are you getting in browser developers console? — KushalSeth, Jun 29 '20 at 22:59

score 2 · Answer 1 · answered Jun 29 '20 at 23:00

2

I cannot see where you imported the JQUERY library or linked to the JQUERY CDN, try to link to the CDN. you can find it here https://code.jquery.com/

answered Jun 29 '20 at 23:00

bobbylemm

42
4

score 2 · Answer 2 · answered Jun 29 '20 at 23:03

it seems you forgot to define the <script> for using jQuery. you might try to attach jQuery CDN

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

copy the CDN above link in the html you made. for reference: https://code.jquery.com/

score 1 · Accepted Answer · answered Jun 29 '20 at 23:06

It looks to me like nowhere in your code contains a <script> tag that includes the jQuery library into the page, so the browser doesn't understand what $(document).ready means. jQuery is an external library and not part of JavaScript by default, so you must include it manually.

You need a tag like the following (source) to include the jQuery library on the page:

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

Then your code should execute, as long as the library is being included before your script. A good place to put the above tag would be inside the <head> tag of your HTML, before your own <script> tag. This should ensure the library is loaded before your script runs.

Why doesn't jQuery document ready function run in my code?

3 Answers3