I'm really new to working with jQuery and JSON, but I'm doing a simple weather retrieving practice project. I have got it to work except that I have to hit the Get Weather button twice in order for the Fahrenheit/Celsius button to work. I'm sure it is something small that I'm missing.
Here is all the code:
<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function gettingJSON(data){
var temp = data.main.temp;
var tempC = (temp - 32) * .5556;
var far = $(".temp").html("The temperature is " + Math.floor(temp) + "F");
var cel = $(".tempC").html("The temperature in C is " + Math.floor(tempC));
cel.hide();
far.show();
$(document).on("click", "#change", function(){
far.toggle();
cel.toggle();
});
}
$(document).ready(function(){
$(document).on("click", "#getIt", function(){
var location = $(".loc").val();
var state = $(".state").val();
var apiKey = "a6253b99c39a496597483fbf2ff308ff";
var url = "http://api.openweathermap.org/data/2.5/weather?q="+location+","+state+"&units=imperial&appid=" + apiKey;
$.getJSON(url, gettingJSON);
});
});
</script>
<style>
body,html{
width: 100%;
height: 100%;
background: honeydew;
}
.temp, .tempC{
font-size: 30px;
}
</style>
</head>
<body>
<div class="toggleMe">
<p class="temp"></p>
<p class="tempC"></p>
</div>
<input type="text" class="loc" placeholder="City">
<input type="text" class="state" placeholder="State">
<button id ="getIt"> Get Weather</button>
<button id="change">C/F</button>
</body>
</html>
I'd appreciate any help available!
Thanks!
You should move the $(document).on("click", "#change", out of the gettingJSON function, otherwise - every time you call the gettingJSON function - you attache a new event listener for the click event on the #change element.
Here is your updated code:
var far = $(".temp");
var cel = $(".tempC")
function gettingJSON(data){
var temp = data.main.temp;
var tempC = (temp - 32) * .5556;
far.html("The temperature is " + Math.floor(temp) + "F");
cel.html("The temperature in C is " + Math.floor(tempC));
cel.hide();
far.show();
}
$(document).ready(function(){
$(document).on("click", "#change", function(){
far.toggle();
cel.toggle();
});
$(document).on("click", "#getIt", function(){
var location = $(".loc").val();
var state = $(".state").val();
var apiKey = "a6253b99c39a496597483fbf2ff308ff";
var url = "http://api.openweathermap.org/data/2.5/weather?q="+location+","+state+"&units=imperial&appid=" + apiKey;
$.getJSON(url, gettingJSON);
});
});
body,html{
width: 100%;
height: 100%;
background: honeydew;
}
.temp, .tempC{
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="toggleMe">
<p class="temp"></p>
<p class="tempC"></p>
</div>
<input type="text" class="loc" placeholder="City">
<input type="text" class="state" placeholder="State">
<button id ="getIt"> Get Weather</button>
<button id="change">C/F</button>
Dekel's answer is the way to go! Additionally if you want to make it a little bit nicer you could hide the change button until the values are actually available.
To reach that set the button to be hidden by the loading of the page via CSS:
#change {
display:none;
}
and in your gettingJSON() you can then call
$('#change').show();
for displaying the button.
Related
I'm building a web app in which the user can type in any key word or statement and get in return twenty results from wikipedia using the wikipedia API. AJAX works just fine. When the web app pulls data from wikipedia it should display each result in a DIV created dynamically.
What happens is that, when the click event is fired, the twenty DIVs are created five times, so one hundred in total. I don't know why but, as you can see in the snippet below, the web app creates twenty DIVs for each DOM element that has been hidden (through .hide) when the click event is fired.
Here's is the code:
function main() {
function positive() {
var bar = document.getElementById("sb").childNodes[1];
var value = bar.value;
if (!value) {
window.alert("Type in anything to start the research");
} else {
var ex = /\s+/g;
var space_count = value.match(ex);
if (space_count == null) {
var new_text = value;
} else {
new_text = value.replace(ex, "%20");
//console.log(new_text);
}
url = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&continue=-%7C%7C&srsearch=" + new_text + "&srlimit=20&sroffset=20&srprop=snippet&origin=*";
var request = new XMLHttpRequest();
request.open("GET", url);
//request.setRequestHeader("Api-User-Agent", "Example/1.0");
request.onload = function() {
var data = JSON.parse(request.responseText);
render(data);
//console.log(data);
}
request.send();
}
}
function render(data) {
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
$("#sb input").css({
"float":"left",
"margin-left":"130px"
});
$("#first_btn").css({
"float":"left"
});
var title = data.query.search[0].title;
var new_text = document.createTextNode(title);
var new_window = document.createElement("div");
new_window.appendChild(new_text);
new_window.setAttribute("class", "window");
var position = document.getElementsByTagName("body")[0];
position.appendChild(new_window);
//}
});
}
var first_btn = document.getElementById("first_btn");
first_btn.addEventListener("click", positive, false);
}
$(document).ready(main);
html {
font-size: 16px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;รน
}
.align {
text-align: center;
}
#first_h1 {
margin-top: 30px;
}
#first_h3 {
margin-bottom: 30px;
}
#sb {
margin-bottom: 10px;
}
#second_h1 {
margin-top: 30px;
}
#second_h3 {
margin-bottom: 30px;
}
.window {
width: 70%;
height: 150px;
border: 3px solid black;
margin: 0 auto;
margin-top: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wikipedia Viewer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<h1 class="align" id="first_h1">Wikipedia Viewer</h1>
<h3 class="align" id="first_h3">Type in a key word about the topic you are after<br>and see what Wkipedia has for you..</h3>
<p class="align" id="sb">
<input type="text" name="search_box" placeholder="Write here">
<label for="search_box">Your search starts here...</label>
</p>
<p class="align" id="first_btn">
<input type="submit" value="SEND">
</p>
<h1 class="align" id="second_h1">...Or...</h1>
<h3 class="align" id="second_h3">If you just feel eager of random knowledge,<br>punch the button below and see what's next for you...</h3>
<p class="align" id="second_btn">
<input type="submit" value="Enjoy!">
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery-3.2.1.min.js"><\/script>')
</script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
I made the code easier to read by erasing the for loop. As you can see, even with just one result, it is displayed five times.
Do you know guys why it happens?
thanks
The line:
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {})
Says, for every element in this "list", hide the element and run this block of code after hidden.
This code is the culprit:
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow",
function() {...});
The callback function is called five times, one for each ID listed, not once for all of them, as you might expect.
A workaround is to create a class (say, "hideme"), apply it to each element you want to hide, and write:
$('.hideme').hide("slow", function() {...});
function render(data) {
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
$("#sb input").css({
"float":"left",
"margin-left":"130px"
});
$("#first_btn").css({
"float":"left"
});
}); // Finish it here..
var title = data.query.search[0].title;
var new_text = document.createTextNode(title);
var new_window = document.createElement("div");
new_window.appendChild(new_text);
new_window.setAttribute("class", "window");
var position = document.getElementsByTagName("body")[0];
position.appendChild(new_window);
//}
// }); Move this line..
}
As described in the docs:
complete: A function to call once the animation is complete, called once per matched element.
Which means this line will call the handle function 5 times with 5 matched elements.
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
The easiest solution is moving the render codes outside of the hide event handler
I created a prompt box with a question. After answering, you receive the answer in a div created with JavaScript called id2. Now I am trying to place my id2 in front of id1 which is the parentNode. So it will show the answer above the first div id1. Can someone explain to me why it's not working?
<!DOCTYPE html>
<html>
<head>
<title>lab7</title>
<meta charset="utf-8" lang="en" name="my page" />
<style>
.class1 {
width: 100%;
height: 60px;
background-color: #BCC6CC;
}
</style>
<script type="text/javascript">
function loadQ() {
var firstdiv = document.createElement("div");
firstdiv.setAttribute("class", "class1");
firstdiv.setAttribute("id", "id1");
var jw = prompt("Which movie is number 1 Box Office 2015?","Jurassic World");
document.getElementById("id2").innerHTML ="" + jw + " Made $652,198,011 Total Gross Sales";
document.getElementById("id2").style.backgroundColor = "#786D5F";
var id1 = document.getElementByTagName("div")[0];
var parent1 = id1.parentNode();
var beforeME = document.getElementByTagName("id2");
parent1.insertBefore(id1, beforeME);
};
</script>
</head>
<body onload="loadQ()">
<div id="id1" class="class1">
<br>
<b>Top 2 Box Office Movie for 2015</b>
</div>
<div class="class2" id="id2">
</div>
</body>
</html>
There are at least two issues in your code:
document.getElementsByTagName needs an s (it returns multiple elements).
To get an object by id, you need to use document.getElementById.
I rewrote my code and made it more clear. So, each div id and class are define.
<script type="text/javascript">
function loadQ() {
var firstdiv = document.createElement("div");
firstdiv.setAttribute("class", "class1");
firstdiv.setAttribute("id", "id1");
firstdiv.style.backgroundColor = "#BCC6CC;";
document.getElementById('id1').innerHTML ="<h2 style='padding:20px;'>Top Box Office Movie 2015</h2>","<br><br>";
var seconddiv = document.createElement("div");
seconddiv.setAttribute("class", "class2");
seconddiv.setAttribute("id", "id2");
seconddiv.style.backgroundColor = "#786D5F";
var reper = document.getElementById('id1');
var parinte = reper.parentNode;
parinte.insertBefore(seconddiv, reper);
</script>
I am having trouble with this code. I am trying to add an eliminate link at the end but I cant seem to eliminate all of the boxes within the set of 5 that appear when I press the add link. I want to be able to delete all the boxes that are within the set of five and nothing else. What I have tried to do is put this line of code at the end of the var box_html5 but it does not work. This is the function that deletes a box I want it to delete the boxes.
Remove
I have tried to make a loop within the statement but it is not coming out right.
I have also thought about making an if statement where the above piece of code would be inside it and state that if that link is pressed then remove box_html1, box_html2, box_html3... etc. For the set of 5 chosen. I have also tried to echo the code like this:
echo ('Remove');
and it still does not seem to work.
<?php
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Movie Night</h1>
<div class="my-form">
<form role="form" method="post">
<p class="text-box">
<label for="box1">Genre<span class="box-number">1</span></label>
<input type="text" name="boxes[]" value="" id="box1" />
<a class="add-box" href="#">Add More</a>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 15 < n ) {
alert('Too many. Not enought Time to watch');
return false;
}
var box_html1 = $('<p class="text-box">Movie<input name="mov1" type="text"></p>');
box_html1.hide();
$('.my-form p.text-box:last').after(box_html1);
box_html1.fadeIn('slow');
var box_html2 = $('<p class="text-box">Movie<input name="mov2" type="text"></p>');
box_html2.hide();
$('.my-form p.text-box:last').after(box_html2);
box_html2.fadeIn('slow');
var box_html3 = $('<p class="text-box">Movie<input name="mov3" type="text"></p>');
box_html3.hide();
$('.my-form p.text-box:last').after(box_html3);
box_html3.fadeIn('slow');
var box_html4 = $('<p class="text-box">Movie<input name="mov4" type="text">Remove</p>');
box_html4.hide();
$('.my-form p.text-box:last').after(box_html4);
box_html4.fadeIn('slow');
var box_html5 = $('<p class="text-box">Movie<input name="mov5" type="text"></p>');
box_html5.hide();
$('.my-form p.text-box:last').after(box_html5);
box_html5.fadeIn('slow');
<!--Remove-->
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
You need to explore index and slice jquery functions.
Remove action handler in this case:
$('.my-form').on('click', '.remove-box', function(event)
{
var index = $(this).parent().index();
$('.text-box').slice( index - 3, index + 2 ).remove();
event.preventDefault();
});
FIDDLE: http://jsfiddle.net/ejcXd/4/
It looks good, but it's not returning any values.
Any ideas?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
.out {
height: 22px;
width: 100px;
border:solid 1px;
margin: 4px;
padding: 3px;
line-height: 22px;
}
form input {
display: block;
}
</style>
</head>
<body>
<form>Number 1
<input type="text" id="firstNumber">Number 2
<input type="text" id="secondNumber">Number 3
<input type="text" id="thirdNumber">
<input type="button" value="Add Total" onclick="addIt()">
<div class="out" id="Total"></div>
<input type="button" value="Multiply Total" onclick="multiply()">
<div class="out" id="multiplyresult"></div>
<input type="button" value="Ave Total" onclick="averesult()">
<div class="out" id="averesult"></div>
</form>
</body>
</html>
<script type="text/javascript">
var result = getId('Total'),
multiplyresult = getId('multiplyresult'),
n1, n2, n3;
function getValues() {
n1 = getId('firstNumber').value, n2 = getId('secondNumber').value, n3 = getId('thirdNumber').value;
}
console.log((n1) * (n2) * (n3));
window.addIt = function() {
getValues();
result.innerText = (+n1) + (+n2) + (+n3);
};
window.multiply = function() {
getValues();
multiplyresult.innerText = (n1) * (n2) * (n3);
};
window.average = function() {
getValues();
averesult.innerText = (n1) + (n2) + (n3) / 3;
};
function getId(x) {
return document.getElementById(x);
}
</script>
I also was trying to figure out how to return and average value of the three numbers.
But as I am a total novice, I do not know how to do this.
The add and multiply functions are now working, but not the average.
Thanks in advance.
The average has to be calculated like so:
window.average = function() {
getValues();
averesult.innerText = ((n1) + (n2) + (n3)) / 3; //Note brackets around n1->n3
};
And your call to averesult() needs to be changed to average()
The problem is that you ran the script as soon as the page loaded, before all the elements had loaded. Because of that, you were trying to access elements that did not exist yet, and would not exist until the page had finished loading. This can be solved in one of two ways. The first way is wrapping it in a window.onload, and the second way is just moving the <script></script> tags to the end of the <body>
with the great help of a few guys on here I have managed to create a page that creates dynamic resizable/draggable textareas on the fly. I am now trying to intregrate nicedit into these textareas. Its working to a point. On double click the textarea becomes a nicedit area but unfortunately the draggable event is overriding the nicedit even and so am unable to edit the textarea.
my javascript is limited so I was hoping someone could point out the error of my ways
thanks in advance.
here is the jsfiddle link http://jsfiddle.net/JVhpJ/9/
heres the code
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script src = "http://js.nicedit.com/nicEdit-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
window.onload = function () {
var body = document.body;
// The magic
body.addEventListener ("dblclick", function (event) {
var target = event.target;
if (target.nodeName === "TEXTAREA") {
var area = new nicEditor ({fullPanel : true}).panelInstance (target);
area.addEvent ("blur", function () {
this.removeInstance (target);
});
}
}, false);
}
var i=0;
var p=25;
function creatediv1(id)
{
id=id+i;
var xp=xp+i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.setAttribute('class', 'dragbox');
newdiv.setAttribute('iterate',i);
newdiv.style.position = "relative";
newdiv.style.top = p;
newdiv.style.left = p;
newdiv.style.cursor='move';
newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea["+i +"]' class='textarea1' width='300' style='position:absolute; top:0px;left:0px;overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='300' name='width["+i+"]' id='width"+i+"'><br><input type='hidden' value='300' name='height["+i+"]' id='height"+i+"'>";
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='0' name='left["+i+"]' id='left"+i+"'><br><input type='hidden' value='0' name='top["+i+"]' id='top"+i+"'>";
document.getElementById("frmMain").appendChild(newdiv);
$(function()
{
$("#"+i).resizable(
{
stop: function(event, ui)
{
var width = ui.size.width;
var height = ui.size.height;
// alert("width="+width+"height="+height);
ValProportions(width,height,ui.element.context.id);
}
});
$( "#"+id ).draggable(
{
stop: function(event, ui)
{
Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
// alert("left="+Stoppos.left+"top="+Stoppos.top);
ValPostion(Stoppos.left,Stoppos.top,$(this).attr('iterate'));
}
});
$("#"+i).draggable({handle:"#handle"});
});
function ValProportions(defaultwidth, defaultheight,id) {
$('#width'+id).val(defaultwidth);
$('#height'+id).val(defaultheight);
}
function ValPostion(defaultleft,defaulttop,id) {
$('#left'+id).val(defaultleft);
$('#top'+id).val(defaulttop);
}
i++;
p=p+25;
}
</script>
<style>
textarea {
height: 100px;
margin-bottom: 20px;
width: 1000px;
}
</style>
</head>
<body>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="test.php" method="post">
<input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />
<input type="submit" value="Submit" >
</form>
</body>
I managed to fix this issue by use stoppropagation() on the mousedown event of the div, this allowed me to then edit the text without the draggable overriding the edit functions