Menu
I have been looking around all day and cannot figure out why none of the code inside my $(document).ready wrapper works.
layout.jade
!!!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
landing.jade
extends layout
block content
p#message Landing page
#info Info area
block foot
a(href="https://localhost:8888/logout", title="logout") Logout
controller:
exports.landing = function(req, res) {
res.render('landing', {title: 'My Title'});
}
rendered html:
<!DOCTYPE html><html><head><title>Dashboard</title><link rel="stylesheet" href="/stylesheets/style.css"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){
$("#message").html("message set through jquery");
});
alert("working");</script></head><body><header><h1>Sample Web App</h1></header><div class="container"><div class="main-content"><p id="message">Landing page</p><div id="info">Info area</div></div><div class="sidebar"></div></div><footer><a href="https://localhost:8888/logout" title="logout">Logout</a></footer></body></html>
console error: I just checked the console on the page, not where I'm running my Express web server, and found an error:
Uncaught reference error: $ is not defined
https server issue:
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 https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js so that my https web server would use it, as recommended by @Frédéric Hamidi.
589
Your development environment appears to be quite peculiar :)
The jQuery script fails to load because it is served through HTTP, the main document is served through HTTPS, and both your browsers have been configured to silently drop HTTP requests made from a document served through HTTPS.
Fortunately, the Google CDN supports both HTTP and HTTPS, so you only have to switch protocols in the script source URL:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
