Trouble with some openweathermap API example code - javascript

I am trying to run the following code:
var mainWeather = {
init: function() {
$("#submitWeather").click(function() {
return mainWeather.getWeather();
});
},
getWeather: function() {
$.get('http://api.openweathermap.org/data/2.5/weather?q=' + $("#cityInput").val() + "," + $("#countryInput").val() + "&APPID=myweatherkey_removed", function(data) {
var json = {
json: JSON.stringify(data),
delay: 1
};
echo(json);
});
},
// Prints result from the weatherapi, receiving as param an object
createWeatherWidg: function(data) {
return "<div class='pressure'> <p>Temperature: " + (data.main.temp - 273.15).toFixed(2) + " C</p></div>" +
"<div class='description'> <p>Title: " + data.weather[0].main + "</p></div>" +
"<div class='description'> <p>Description: " + data.weather[0].description + "</p></div>" +
"<div class='wind'> <p>Wind Speed: " + data.wind.speed + "</p></div>" +
"<div class='humidity'> <p>Humidity: " + data.main.humidity + "%</p></div>" +
"<div class='pressure'> <p>Pressure: " + data.main.pressure + " hpa</p></div>";
}
};
var echo = function(dataPass) {
$.ajax({
type: "POST",
url: "/echo/json/",
data: dataPass,
cache: false,
success: function(json) {
var wrapper = $("#weatherWrapper");
wrapper.empty();
wrapper.append("<div class='city'> <p>Place: " + json.name + ", " + json.sys.country + "</p></div>");
wrapper.append(mainWeather.createWeatherWidg(json));
}
});
};
mainWeather.init();
and
<!DOCTYPE html>
<html>
<head>
<title>Open Weather API</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="userArea" class="container">
<div id="stateWrapper">
<input type="text" id="cityInput" placeholder="Enter a State" />
</div>
<br/>
<div id="countryWrapper">
<input type="text" id="countryInput" placeholder="Enter a Country" />
</div>
<br/>
<div id="buttonArea">
<input type="submit" id="submitWeather" class="btn btn-primary"/>
<br/>
</div>
<!- USED TO SHOW RESULT -->
<div id="weatherWrapper">
</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.slim.js"></script>
<script type="text/javascript" src="mainWeather.js"></script>
</body>
</html>
but it just won't do anything when I hit submit.
The Chrome debugger is saying first that $.get is not a function in line 9, so after searching, I changed it to jquery.get. Now it says that is not a function. I have no idea what I'm doing. Can anybody figure this out?

The slim build of jQuery excludes Ajax. You can read more here.
Just change it out with the normal build and you'll be fine.

Related

Slider for Bootstrap add&remove jQuery

I'm using https://seiyria.com/bootstrap-slider/ in order to have slider, but I'm not able to understand where is my fault in this code:
<button type="button" onclick="ap()">ap!</button>
<button type="button" onclick="remove()">remove!</button>
<div id="id1"></div>
<script>
function ap() {
console.log("Append");
$("#id1").append(t);
}
function remove() {
console.log("Remove");
$("#x1").remove();
}
t = '<div id="x1"><span id="ex18-label-1" class="hidden">Example slider label</span> ' +
'<input id="ex19" type="text" ' +
'data-provide="slider" ' +
'data-slider-ticks="[1, 2, 3]" ' +
'data-slider-ticks-labels="["short", "medium", "long"]" ' +
'data-slider-min="1" ' +
'data-slider-max="3" ' +
'data-slider-step="1" ' +
'data-slider-value="3" ' +
'data-slider-tooltip="hide" /></div>'
</script>
I wish to press a button in order to show a slider and to remove with the other button.
<html>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.1/css/bootstrap-slider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.1/bootstrap-slider.min.js"></script>
<button type="button" onclick="ap()">ap!</button>
<button type="button" onclick="remove()">remove!</button>
<div id="id1">
</div>
<div id="x1"><span id="ex18-label-1" class="hidden">Example slider label</span> <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels="["short", "medium", "long"]" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" /></div>
</body>
</html>
<script>
$("#x1").hide();
function ap()
{
console.log("Append");
$("#x1").show();
}
function remove()
{
console.log("Remove");
$("#x1").hide();
}
</script>
Just hide and show the slider using javascript.
This should work,you forgot the t parameter in ap
function ap(t) {
console.log("Append");
$("#id1").append(t);
}
function remove() {
console.log("Remove");
$("#x1").remove();
}
t = '<div id="x1">' +
'<span id="ex18-label-1" class="hidden">Example slider label</span> ' +
'<input id="ex19" type="text" ' +
'data-provide="slider" ' +
'data-slider-ticks="[1, 2, 3]" ' +
'data-slider-ticks-labels="["short", "medium", "long"]" ' +
'data-slider-min="1" ' +
'data-slider-max="3" ' +
'data-slider-step="1" ' +
'data-slider-value="3" ' +
'data-slider-tooltip="hide" /></div>';
$("#show").click(function() {
ap(t);
});
$("#hide").click(function() {
remove();
});
function get_data(name) {
name.value = 'test';
}
<button id="show">show</button>
<button id="hide">hide</button>
<div id="id1"></div>

ASP.Net barcode reader show data

I am working on a WCF service application that required to get the Barcode reader characters and show data of it on UI for user. My problem is that when I write data on textbox with keyboard is OK but when read from barcode reader overwrite it and show 3 times data in UI.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>سرویس و بارکد خوان</title>
<script src="Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function setFocusToTextBox() {
$(document).ready(function () {
document.getElementById('txtFirst').focus();
});
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtFirst").keydown(function (e) {
if (e.which == 17 || e.which == 74) {
e.preventDefault();
} else {
console.log(e.which);
}
})
});
</script>
<script type="text/javascript" language="javascript">
function JqueryAjaxCall(val) {
$("#contentHolder").empty();
$(".form-errors").empty();
if (val != null && val.length === 20) {
document.getElementById("txtFirst").select();
var pageUrl = '<%= ResolveUrl("~/Default.aspx/jqueryAjaxCall") %>';
var parameter = { "myVal": val}
$.ajax({
type: 'POST',
url: pageUrl,
data: JSON.stringify(parameter),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
dateFormat: 'dd/mm/yy',
success: function (data) {
onSuccess(data);
},
error: function (data, success, error) {
var myitems = jQuery.parseJSON(data.responseText);
$(".form-errors").text(myitems.Message).show();
}
});
return false;
}
function onSuccess(data) {
var items = data.d;
var fragment = "<ul>"
var BLNumber = items.BLNumber;
var ContainerNumber = items.ContainerNumber;
var Destination = items.Destination;
var SerialNumberVerification = items.SerialNumberVerification;
var TempPermission = items.TempPermission;
var VehicleNumber = items.VehicleNumber;
var VehicleType = items.VehicleType;
var VoyageID = items.VoyageID;
var value = new Date(parseInt(items.ExitDate.substr(6)));
var ExitDate = value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear();
var ExitPermissionNumber = items.ExitPermissionNumber;
var myvalue = new Date(parseInt(items.SpecialZoneOrCustomPermissionDate.substr(6)));
var SpecialZoneOrCustomPermissionDate = myvalue.getMonth() + 1 + "/" + myvalue.getDate() + "/" + myvalue.getFullYear();
var SpecialZoneOrCustomPermissionNumber = items.SpecialZoneOrCustomPermissionNumber;
fragment += "<li> " + " شماره بارنامه : " + BLNumber + " <br> "
+ " شماره کانتینر : " + ContainerNumber + " <br> "
+ " مسافت : " + Destination + " <br/> "
+ " شماره تائیدیه : " + SerialNumberVerification + " <br/> "
+ " شماره مجوز موقت : " + TempPermission + " <br/> "
+ " شماره وسیله نقلیه : " + VehicleNumber + " <br/> "
+ " نوع وسیله نقلیه : " + VehicleType + " <br/> "
+ " VoyageID : " + VoyageID + " <br/> "
+ " تاریخ خروج : " + ExitDate + " <br/> "
+ " شماره خروج : " + ExitPermissionNumber + " <br/> "
+ " تاریخ مجوز : " + SpecialZoneOrCustomPermissionDate + " <br/> "
+ " شماره مجوز : " + SpecialZoneOrCustomPermissionNumber + " <br/> "
+ "</li>";
$("#contentHolder").append(fragment);
}
}
</script>
</head>
<body onload="setFocusToTextBox();" bgcolor="#E6E6FA">
<form id="myForm" runat="server" dir="rtl" >
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<div>
<table cellpadding="1" cellspacing="0" style="width: 80%;">
<tr>
<td>
</td>
<td>
<asp:Label ID="lblFirst" runat="server" Text="لطفا شماره سند را وارد نمائید : " Font-Bold="True"></asp:Label>
<input type="text" id="txtFirst" onfocus="setFocusToTextBox" onkeyup="return JqueryAjaxCall(this.value);" class="col-xs-4" style="background-color:#ede0dd"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="contentHolder" >
<asp:Label ID="lblError" runat="server" Text=""></asp:Label>
</div>
</td>
<td>
<div class="form-errors" style="margin-right:-175%;font-style:oblique" dir="rtl" align="right"></div>
</td>
</tr>
</table>
</div>
</form>
<br />
<br />
<br />
<br />
<br />
<hr />
</body>
</html>
on this line code you call your ajax on every key click
onkeyup="return JqueryAjaxCall(this.value);"
and so on each click you have data output, 3 times and maybe more, on each key press. Redesign your code so only when you are finish typing you make the render.
I Understand it just now. problem was for this line of code
$("#contentHolder").append(fragment);
I add .empty() to that.
$("#contentHolder").empty().append(fragment);
I find it from this link
https://www.joezimjs.com/javascript/jquery-html-youre-doing-it-wrong/

.val() JQuery. Passing text fields to jQuery

Basically my code is perfectly fine it is I just cant seem to be able to get the extra added tags when I create them to have any functionality with the api search. I want to pass them into the tags field aswell as $("#textbox1").val(). Any tips/help is appreciated. Thanks
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#images").empty();
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags:$("#textbox1").val(),
tagmode: "any",
format: "json"
}, function(data){
console.log(data);
$.each(data.items, function(i,item){
$('<img/>').attr("src", item.media.m).appendTo('#images');
if(i==2) return false;
});
});
});
$('#images').on('click', 'img', function(){
});
});
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label></label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
<button type="button" id="button">Find image</button>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<input type='textbox' id='textbox1' >
<input type='button' value='Add tag' id='addButton'/>
</div>
</div>
<div id="images" /> </div>
</body>
</html>
please format your code
Please have only one ready
use a class
$(document).ready(function() {
$("#button").click(function() {
$("#images").empty();
var tags = [];
$(".textbox").each(function() {
tags.push(this.value);
});
console.log(tags)
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
tags: tags.join(" "),
tagmode: "any",
format: "json"
}, function(data) {
console.log(data);
$.each(data.items, function(i, item) {
$('<img/>').attr("src", item.media.m).appendTo('#images');
if (i == 2) return false;
});
});
});
$('#images').on('click', 'img', function() {
});
var counter = 2;
$("#addButton").click(function() {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label></label>' +
'<input type="text" class="textbox" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#getButtonValue").click(function() {
var msg = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="button">Find image</button>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<input type='textbox' class="textbox" id='textbox1'>
<input type='button' value='Add tag' id='addButton' />
</div>
</div>
<div id="images" /></div>

How do I create a search against JSON data with input and radio buttons?

So far I am able to display the data in an HTML page. However I am stuck when it comes to searching against the Description field and also filtering this data according to Location radio buttons selected.
HTML:
<form>
<input id="searchterm" type="search" name="query" placeholder="Search">
<input type="radio" name="location" value="houston">
<label for="houston">Houston</label>
<input type="radio" name="location" value="austin">
<label for="austin">Austin</label>
<input type="button" name="searchbutton" value="search" onclick=search();>
</form>
JSON data:
[
{
Description: A bunch of text from which I need to search against
Location: This will be selected by a radio button
}
]
Here is what I have tried:
JS CODE:
function search() {
var $searchField = $('#searchterm');
var query = $searchField.val();
$.getJSON("API LINK HERE", function(data) {
var output="<ul>";
$.each( data, function (i, item) {
output+="<li class='results'><div class='title'><div class='mainCat'>" + data[i].MainCategoryName + "</div>";
output+="<div class='AdID'>" + data[i].AdID + "</div></div>";
if(data[i].PhotoUrl !== null){
output+="<img class='image' src=" + " ' " + data[i].PhotoUrl + " ' " + "></img>";
}
output+="<div class='description'>" + data[i].Description + "</div>";
output+="<button type='submit' class='goToAd' formaction=" + data[i].AdUrl + ">Go To Ad </button> </li>" ;
});
output+="</ul>";
$("#content").html(output);
});
}

jquery children attach remove edit input

to get more than what you expect may be nice on your birthday - but this in script drives you crazy... :(
i've got the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="id1" class="fragenMainDiv" style="width: 80%; margin: 0px;">
<input type="button" id="id1_edit" class="editIcon" value="change">
<span id="id1_Label" class="fragenLabel">
<p>
<span style="margin-left:5px;">
<b>something</b>
</span>
</p>
</span>
</div>
</div>
</form>
</body>
<script type="text/javascript">
$(document).ready(function () {
showMain();
});
function showMain() {
$('.editIcon').css("cursor", "pointer").click(function () {
edit($(this).attr("id"));
});
$('.editfinish').css("cursor", "pointer").click(function () {
editFinish($(this).attr("id"));
});
}
function edit(idTemp) {
//alert(fragenidTemp);
var IdArray = idTemp.split("_");
var Id = IdArray[0]
var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
$('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />");
$('input[id|="input' + Id + '"]').val(inputValue);
$('.editIcon').hide();
showMain();
}
function editFinish(Id) {
var inhaltFrage = $('input[id|="input' + Id + '"]').val();
$('.editIcon').show();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>");
showMain();
}
</script>
</html>
what I want is an input field that reacts like a normal input field - but after the first (correct) change of value the form shows three times the input field...
Does someone have an idea? As it is a condensed script of a larger script so I need the structure of functions. Thanks for your help :)
Argghhh I finally found it. Dude you cannot use show main after every edit and editFinish. Becuse you are stacking several same event to one click ! The code shoul look like this :
function edit(idTemp) {
//alert(fragenidTemp);
var IdArray = idTemp.split("_");
var Id = IdArray[0]
var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
$('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />");
$('input[id|="input' + Id + '"]').val(inputValue);
$('.editIcon').hide();
$('.editfinish').css("cursor", "pointer").click(function () {
editFinish($(this).attr("id"));
});
}
function editFinish(Id) {
var inhaltFrage = $('input[id|="input' + Id + '"]').val();
$('.editIcon').show();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>"); }
Hope that you see the error now, if not i can explain in detail.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn_change" value="Change" />
<span id="id1_Label" class="fragenLabel">
</span>
<span id="id1_Input">
<input type="text" id="content1_edit" value="default-value" />
</span>
</div>
</form>
</body>
</html>
JAVASCRIPT
$(document).ready(function(){
// Mostly this should be coming from database on page-load;
updateVal();
$("#btn_change").click(function(){
if( $(this).val() == "Change" )
{
editVal();
}
else
{
updateVal();
}
})
});
function editVal()
{
$("#id1_Label").hide();
$("#id1_Input").show();
$("#btn_change").val("Update");
}
function updateVal()
{
$("#id1_Label").html( $("#content1_edit").val()).show();
$("#id1_Input").hide();
$("#btn_change").val("Change");
}
Fiddle for demo: http://jsfiddle.net/dharmavir/5yMZk/

Categories

Resources