Note that there are some explanatory texts on larger screens.

plurals
  1. PONothing inside my $(document).ready works
    text
    copied!<p>I have been looking around all day and cannot figure out why none of the code inside my <code>$(document).ready</code> wrapper works.</p> <p>layout.jade</p> <pre><code>!!!5 html head title #{title} link(rel='stylesheet', href='/stylesheets/style.css') script(src='http://code.jquery.com/jquery-1.js') script. $(document).ready(function(){ alert("working"); $("#message").html("message set through jquery"); }); body header h1 Sample message here .container .main-content block content .sidebar block sidebar footer block foot </code></pre> <p>landing.jade</p> <pre><code>extends layout block content p#message Landing page #info Info area block foot a(href="https://localhost:8888/logout", title="logout") Logout </code></pre> <p>controller:</p> <pre><code>exports.landing = function(req, res) { res.render('landing', {title: 'My Title'}); } </code></pre> <p>rendered html:</p> <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Dashboard&lt;/title&gt;&lt;link rel="stylesheet" href="/stylesheets/style.css"&gt;&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;&lt;script&gt;$(document).ready(function(){ $("#message").html("message set through jquery"); }); alert("working");&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;header&gt;&lt;h1&gt;Sample Web App&lt;/h1&gt;&lt;/header&gt;&lt;div class="container"&gt;&lt;div class="main-content"&gt;&lt;p id="message"&gt;Landing page&lt;/p&gt;&lt;div id="info"&gt;Info area&lt;/div&gt;&lt;/div&gt;&lt;div class="sidebar"&gt;&lt;/div&gt;&lt;/div&gt;&lt;footer&gt;&lt;a href="https://localhost:8888/logout" title="logout"&gt;Logout&lt;/a&gt;&lt;/footer&gt;&lt;/body&gt;&lt;/html&gt; </code></pre> <p>console error: I just checked the console on the page, not where I'm running my Express web server, and found an error:</p> <pre><code>Uncaught reference error: $ is not defined </code></pre> <p>https server issue:</p> <p>The primary problem was two fold: 1) I was using the wrong url as recognized by @Joe. 2) Since my web server was created in Express as https, not http, it was refusing to use the url with the non-secure http address listed in @Joe's answer. Instead, I needed to modify it to <a href="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" rel="nofollow">https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js</a> so that my https web server would use it, as recommended by @Frédéric Hamidi.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload