document.getElementById - Uncaught ReferenceError: $ is not defined - javascript

Please excuse this extremely trivial question but I just started to experiment a little with Javascript but can't seem to figure out where I went wrong with this.
Uncaught ReferenceError: temperature is not defined
Every little tip is greatly appreciated!
$.ajax({
url: 'https://api.weather.gov/gridpoints/EWX/92,61/forecast/hourly' }).done(function(res) {
var temp = res.properties.periods[0].temperature;
});
function test () {
document.getElementById('temperature').innerHTML = temp;
}

Use an external script tag in your head like <head><script type='text/javascript' src='folder/file.js'></script></head>. On file.js it would be like $(function(){ /* put all your code in here */ });. Of course, if you want to do something after an asynchronous activity, it must happen then. See the following:
//<![CDATA[
/* js/external.js */
$(function(){ // jQuery load
$.get('https://api.weather.gov/gridpoints/EWX/92,61/forecast/hourly', function(resultObj){
$('#out').html(resultObj.properties.periods[0].temperature+'° F');
});
}); // jQuery load end
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
#content{
padding:7px 5px;
}
#out{
margin-top:10px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div id='content'>
Look in the <head> above then at the jQuery below
<div id='out'></div>
</div>
</body>
</html>

AJAX is an asynchronous call. temp will always be undefined every time function test is called. You can achieve what you wanted by doing the following:
function test() {
$.ajax({
url: 'https://api.weather.gov/gridpoints/EWX/92,61/forecast/hourly'
})
.done(function(res) {
var temp = res.properties.periods[0].temperature;
document.getElementById('temperature').innerHTML = temp;
});
}

Related

How to call a function from html file to js type module file?

First of all, give thanks for reading my question and try to help me and apologize for my English.
I have the following problem ...
I would like from the html to execute a function of a js file that I have created, to which you pass two parameters: the name of the map and the id where the map should be loaded. But being a module type tells me it is not defined. However, if that file js is not a module type and does not have any import if it recognizes and executes it.
My code is the following ...
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Map Generator</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script type="module" src='./js/index.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; height:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
customMap.addMap("icgc", "map");
</script>
</body>
</html>
index.js file
import MapFunctions from './class/MapFunctions.js'
// new MapFunctions().createMap("openstreetmaps", "map");
var customMap = {
addMap: function name(base, target) {
new MapFunctions().createMap(base, target);
}
}
With the constructor it works, but the purpose is that from the index.html you only have to make the call to the function customMap.addMap () and only importing the file index.js
Here you have the repository in case you see it there more clearly
Thank you

What is a node id in facebook graph api and how can I find it?

Hello and thank you in advance, I'm currently looking through the documentation for facebook graph api and I am trying to understand it.
/* make the API call */
FB.api(
"/{photo-id}",
function (response) {
if (response && !response.error) {
/* handle the result */
}
}
);
The graph api has a convention of using the id(as seen above) of the node you want to get data from. I'm not sure where to get the id for each of the nodes. If someone could explain it or point me in the right direction I would really appreciate it. Thank you again.
Here is a Facebook example to get your pictures:
// myapp.js
function fbAsyncInit(){
FB.init({
appId: 'your-app-id',
xfbml: true,
version: 'v2.8'
});
FB.getLoginStatus(function(r){
if(r.status === 'connected'){
// all the magic must happen here
FB.api('me/photos?type=uploaded', function(u){
var d = u.data; // array of photo info
for(var i=0,l=d.length; i<l; i++){
// individual photo data
FB.api(d[i].id, function(p){
// p is photo
});
}
});
}
else{
location = 'https://www.facebook.com/dialog/oauth?client_id=yourClientIdHere&redirect_uri=yourWebPageToRedirectToWhenLoggedIn';
}
});
// remove comments to see errors
//FB.AppEvents.logPageView();
}
/* external.css */
html,body{
margin:0; padding:0;
}
.main{
width:980px; margin:0 auto;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='myapp.js'></script>
<script type='text/javascript' src='//connect.facebook.net/en_US/sdk.js'></script>
</head>
<body>
<div class='main'>
Nothing to See But the JavaScript and HTML <script> tag order
</div>
</body>
</html>

javascript error 'cannot read property of undefined'

The javascript, html and css work in this jsfiddle
but when entered into an html file like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var target = $(".mypara").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
alert("made it!");
clearInterval(interval);
}
}, 250);
</script>
<style>
body {
background-color: linen;
height: 1000px;
}
p {
color: blue;
margin-top: 500px;
}
</style>
</head>
<body>
<p class="mypara">asdfasdfasf</p>
</body>
</html>
chrome console gives this error
Uncaught TypeError: Cannot read property 'top' of undefined(anonymous function) # index - Copy.html:8
This error refers to line 8:
var target = $(".mypara").offset().top;
Can someone help me understand why?
Wrap your code in
$(document).ready (function (){
// code here
});
You're trying to access an element in the DOM before it exists so when your trying to access the class the item doesnt exist yet. Or move your script below the elements in the html
Works in fiddle cause thet wrap you're code depending on your setting which defaults to domready I believe
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<style>
body {
background-color: linen;
height: 1000px;
}
p {
color: blue;
margin-top: 500px;
}
</style>
</head>
<body>
<p class="mypara">asdfasdfasf</p>
<p class="mypara">Include js files to be at the bottom so that it would be the one to be loaded accordingly</p>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
// if document is ready then
// its the only time to execute
// process withing the block
$(document).ready(function() {
var target = $(".mypara").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
alert("made it!");
clearInterval(interval);
}
}, 250);
});
</script>
</body>
</html>

.slideDown Not Working For ME

So I've managed to link my index.html to jquery but for some reason my .slideDown code is not working. Is there something wrong with it or did I not attach jquery correctly?
Here is my html code (containing the code for .slideDown):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<link rel="shortcut icon" href="../Pictures/Logo.png" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<script>
$("#teamalpha").mouseover(
function(){
$("#teamalpha > div").slideDown(400);
});
</script>
<div id="teamalpha">
<div>
<p>AlphaGuardian</p>
<p>Owner</p>
</div>
</div>
</div>
</body>
</html>
And Here is my CSS code (stylesheet linked correctly):
#teamalpha{
font-family:Optimus;
font-size:24px;
text-align:center;
border:solid;
border-color:#000;
width:250px;
height:250px;
position:relative;
top:100px;
left:200px;
cursor:pointer;
z-index:5;
}
#teamalpha div{
position:relative;
top:-50px;
height:100px;
display:none;
width:250;
background-color:#f7931e;
z-index:6;
}
Your <script> needs to be surrounded by
// Fire on document ready event
$(document).ready(function(){
// some code here
});
OR
// Fire on window load event
$(window).load(function() {
// some code here
});
So it should look like this:
<script>
// Fire on document ready event
$(document).ready(function() {
$("#teamalpha", this).on("mouseover", function() {
$(this).children("div").slideDown(400);
});
});
</script>
OR
// Fire on document ready event
$(window).load(function() {
$("#teamalpha", this).on("mouseover", function() {
$(this).children("div").slideDown(400);
});
});
Your script was running before the page was fully loaded. Now, it'll wait till the document or the window finish loading.
I made a pen with code that worked: http://codepen.io/KK4OXJ/pen/Eagjax/
Basically, you can't fade something in that's hidden with CSS, so we need this:
$('#teamalpha div').hide();
to hide it, instead of using CSS to hide it. It needs to go right before the mousover thing, and we also need to remove the display: none; line in the CSS.
I hope this helps :)

How do I make my jquery loading spinner automatic?

I used a JQuery waiting spinner demo from Github and modified it to my liking. I want the spinner to initiate automatically as soon as the page appears (giving time for the larger images on the page to load), however at the moment one has to click 'start waiting' for the spinner to appear.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="waiting.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 50px;
}
.content {
margin-bottom: 50px;
max-width: 500px;
}
button.waiting-done {
display: none;
}
</style>
<!--script src="../libs/jquery/jquery.js"></script-->
<script src="jquery-2.0.2.min.js"></script>
<script src=" jquery.waiting.min.js"></script>
<script type="text/javascript">
$(function () {
var content = $('.content').first().html();
$('button').on('click', function () {
$(this).toggle().siblings('button').toggle();
if ($(this).hasClass('waiting-done')) {
$(this).siblings('.content').waiting('done')
.html(content.substring(0,Math.random() * content.length) + '...');
}
});
});
</script>
</head>
<body>
<div id="demo-fixed">
><button type="button" class="waiting">► start waiting</button>
><button type="button" class="waiting-done">■ waiting done</button>
<div class="content">
</div>
</div>
<script type="text/javascript">
$('#demo-fixed button.waiting').on('click', function () {
var that = this;
$(this).siblings('.content').waiting({ fixed: true });
setTimeout(function() {
$(that).siblings('button').click();
}, 3000);
});
</script>
</body>
</html>
This is my first post so I hope I've given enough info for people to understand. I could copy the JQuery but there's too much and i'm not sure on the relevant part.
Thanks in advance for any help.
jQuery has a nice tool built in for that -- you'll want to read the documentation
$(document).ajaxStart(function() {
//start spinner
});
$(document).ajaxStop(function() {
//stop spinner
});
$(document).ajaxError(function(event, jqXhr, ajaxSettings, thrownError) {
// handle the error
});

Categories

Resources