Flickr API always returning the same data - javascript

I have a small weather app. I get the weather data via "POST" request and append it to the document, that works good.
The users can query the weather by City, now I wanted to load an image of that city with a separate jQuery $Ajax() request.
However, I always get the same result.
The app relevant app structure looks like this:
<input id="getIt" name="cityajax" type="text" class="ghost-input"
placeholder="Enter a City" required> // get user input, querying a city
<button id="submit">Submit</button>
<span class="humidLogo">Current humidity:</span> <i class="fas fa-temperature-low" ></i> <span class="apiHumidity"> % </span>
<div class="FlickResponse"></div> // flickrResposnse gets appended here
</div>
The CSS is not relevant, so I follow up with the relevant JS function right away:
var destination = $("#getIt").val(); // cache the user input, I am not sure I have to listen for a change event here and then update the state.
var flickerAPI =
"https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" +
destination; // the url to get access the api
$.ajax({
url: flickerAPI,
dataType: "jsonp", // jsonp
jsonpCallback: "jsonFlickrFeed", // add this property
success: function(result, status, xhr) {
$(".FlickResponse").html(""); // here I want to empty the contents of the target div, but this never happens
$.each(result.items, function(i, item) {
$("<img>")
.attr("src", item.media.m)
.addClass("oneSizeFitsAll")
.appendTo(".FlickResponse");
if (i === 1) {
return false;
}
});
},
error: function(xhr, status, error) {
console.log(xhr);
$(".FlickResponse").html(
"Result: " +
status +
" " +
error +
" " +
xhr.status +
" " +
xhr.statusText
);
}
});
That is all. So why do I always get the same response from the API? Do I have to listen to change events on the input field? Because the POSt request work without a change event listener.
Is it because I am querying 2 APIs and I am using the same input field for the value(stupid question, but you never know x).?
Here is a Codepen with the full code, just enter a city and click the submit button:
https://codepen.io/damPop/pen/qLgRvp?editors=1010

I would pull the image retrieval (and weather lookup) into another function as shown below, then you're good!
I've forked to another codepen: updated example
function loadDestinationImage() {
var destination = ($("#getIt").val());
var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" + destination;
$.ajax({
url: flickerAPI,
dataType: "jsonp", // jsonp
jsonpCallback: 'jsonFlickrFeed', // add this property
success: function (result, status, xhr) {
$(".FlickResponse").html("");
$.each(result.items, function (i, item) {
$("<img>").attr("src", item.media.m).addClass("oneSizeFitsAll").appendTo(".FlickResponse");
if (i === 1) {
return false;
}
});
},
error: function (xhr, status, error) {
console.log(xhr)
$(".FlickResponse").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
}
});
}
I'd do the same with the weather:
function loadWeather() {
var destination = ($("#getIt").val());
$.post("https://api.openweathermap.org/data/2.5/weather?q=" +
destination +
"&units=metric&appid=15c9456e587b8b790a9092494bdec5ff",
function (result, status, xhr) {
var APIresponded = result["main"]["temp"];
var APIweather = result["weather"][0]["description"];
var sunGoing = result["sys"]["sunset"];
var output = destination.capitalize();
var humidValue = result["main"]["humidity"];
var windy = result["wind"]["speed"];
var windDirection = result["wind"]["deg"];
if (windDirection <= 90) {
windDirection = "southwest"
}
if (windDirection <= 180) {
windDirection = "northwest"
}
if (windDirection <= 270) {
windDirection = "northeast"
}
if (windDirection <= 360) {
windDirection = "southeast"
}
if (APIweather.includes("snow")) {
$('#displaySky').addClass('far fa-snowflake');
}
if (APIweather.includes("rain")) {
$('#displaySky').addClass('fas fa-cloud-rain');
}
if (APIweather.includes("overcast")) {
$('#displaySky').addClass('fas fa-smog');
}
if (APIweather.includes("sun") || APIweather.includes("clear")) {
$('#displaySky').addClass('fas fa-sun');
}
if (APIweather.includes("scattered")) {
$('#displaySky').addClass('fas fa-cloud-sun');
}
$("#message").html("The temperature in " + output + " is : " + APIresponded + " degrees. The sky looks like this: ");
$(".apiHumidity").text(humidValue + " %");
$('.apiWind').html(windy + 'km per hour. The wind direction is ' + windDirection);
console.log(APIweather);
}
).fail(function (xhr, status, error) {
alert("Result: " + status + " " + error + " " +
xhr.status + " " + xhr.statusText);
});
}
And call from the submit function:
$("#submit").click(function (e) {
loadDestinationImage();
loadWeather();
});

Related

Want to populate datatable row one by one using asynchronous in JavaScript

I am facing a problem where I want to return all the rows one by one without interupting the current function. The issue is intermittent. Sometimes I can get all the datatables data but sometimes not.
Then I started investigating and realised after checking the developer tool in network section that it throws error after page 10. And the error is 429 too many requests. Also, realised that the script was synchronous json call.
429 too many requests
I tried using below code in my script but the spin is not working. Also, found that this is not recommended way.
Can someone help me with solution? Thank you
// Set the global configs to synchronous
$.ajaxSetup({
async: false
});
My Script
function getMed(sDate, eDate) {
var pData;
var firstURL = mUrl + "?sDate=" + moment(sDate).format(dateFormat) + "&eDate=" + moment(eDate).add(1, 'day').format(dateFormat) + "&pNum=1";
....
}).done(function (data) {
if (pData.Number > 0) {
var counter = 0;
// Set the global configs to synchronous
$.ajaxSetup({
async: false
});
var requestsProcessed = 0;
for (var i = 1; i <= pData.Number; i++) {
$("#iconSpin").css('display', 'block');
var pURL = mUrl + "?sDate=" + moment(sDate).format(dateFormat) + "&eDate=" + moment(eDate).add(1, 'day').format(dateFormat) + "&pNum=" + i;
console.log("calling: " + pURL);
var pageRequest = $.getJSON(pURL, function (data) {
requestsProcessed++;
$("#progress").innerHTML = "Fetching batch " + requestsProcessed + " of " + pData.Number + " batches.";
....
}).fail(function () {
$("#iconSpin").css('display', 'none');
console.log("fail for " + pURL + " in " + new Date());
});
console.log("completed for " + pURL + " in " + new Date());
}
} else {
alert("There is no data.");
}
}).fail(function () {
$("#iconSpin").css('display', 'none');
});
}

Ajax callback from two functions

Hello i have a problem with ajax and two callbacks code look like that
loadTasks(function(tasks) {
taskhtml = whatStatus(tasks);
loadSupportList(function(tasks) {
supporthtml = support(tasks);
$("#devtask-table").html(
titleDraw() + "<tbody>" + supporthtml + taskhtml
+ "</tbody>");
hideCurtain();
});
});
And it's work fine when loadSupportList or loadTasks have records. But when one of them don't i get Error, status = parsererror, error thrown: SyntaxError: Unexpected end of input. And it jump off function and leave me with nothing. My ajax function looks that way :
function loadSupportList(callback) {
$.ajax({
type : "POST",
url : url,
data : {
userId : userId,
sessionId : sessionId
},
success : function(data) {
callback(data['tasks']);
},
error : function(jqXHR, textStatus, errorThrown) {
console.log("Error, status = " + textStatus + ", " + "error thrown: "
+ errorThrown);
}
});
}
And i dont know what to change, to ignore(?) or made some json with ('success')? Is there a way? Thanks for your time.
I make something silly, but its work so it's not silly
loadTasks(function(tasks) {
taskhtml = whatStatus(tasks);
$("#devtask-table").html(
titleDraw() + "<tbody>" + supporthtml + taskhtml
+ "</tbody>");
loadSupportList(function(tasks) {
supporthtml = support(tasks);
$("#devtask-table").html(
titleDraw() + "<tbody>" + supporthtml + taskhtml
+ "</tbody>");
hideCurtain();
});
});
assuming tasks returns an array... update your loadSupportList function like this..
success : function(data) {
var ret = [];
if(
'object' == typeof data &&
'undefined' != typeof data.tasks
) ret = data.tasks;
callback(ret);
}

onerror event show picture - javascript

I have a javascript code that gives a link to a page, if the page does not answer it gives error and try again. I want to receive the error display a message on the screen
I found some questions about it here but could not apply them in my code. This is my code where I can insert the code so that if there is error, show an image on the screen using document.write
window.setInterval(function() {
requestURL = "https://api.spark.io/v1/devices/" + deviceID1 + "/" + getFunc + "/?access_token=" + accessToken;
$.getJSON(requestURL, function(json) {
var vdadosdospark=json.result;//coloca resultado do json na variavel
var vdadosdospark=vdadosdospark.replace("-", '')//exclui caractere -
var resultadoA = vdadosdospark.substr(9, 6);//seleciona os caracteres referentes a amperagem
var resultadoB = vdadosdospark.substr(24, 1);
if (resultadoB==1){
document.write("<IMG ALIGN='center' "+
"style='position:absolute; left: 400; top: 100' " +
"SRC='http://www.uairobotics.com/tomada/Images/farol.png'> " +
"<BR><BR>")
}else
{
document.write("<IMG ALIGN='center' "+
"style='position:absolute; left: 400; top: 100' " +
"SRC='http://www.uairobotics.com/tomada/Images/f.png'> " +
"<BR><BR>");
}
});
}, 5000);
use the .done()/.fail() methods of
jQuery.getJSON().
//first call
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON(flickerAPI, {
tags: "mount rainier",
tagmode: "any",
format: "json"
})
.done(function(data) {
$('#log').append('got data in first call<br>');
})
.fail(function(jqxhr, textStatus, error) {
$('#log').append('got error in first call<br>');
});
//second call
$.getJSON("willFail.js", {
name: "John",
time: "2pm"
})
.done(function(json) {
$('#log').append('got data in second call<br>');
})
.fail(function(jqxhr, textStatus, error) {
$('#log').append('got error in second call<br>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="log"></p>

JSON returned in AJAX call not working

I am trying to detect wither a database entry has been successfully input by sending the new inserted ID and a JSON variable to an AJAX call but it is not working in phonegAP, however it is fine in all browsers and I can see that the data is being inserted in the db successfully. All comments/ help appreciated, thanks.
AJAX code -
function InsertQnA() {
$.ajax({
url: Domain + '/Result/Create',
cache: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: '{"Q1":"' + Q1 + '","Q2":"' + Q2 + '","Q3":"' + Q3 + '","Q4":"' + Q4 + '","Q5":"' + Q5 + '","Q6":"' + Q6 + '","Q7":"' + Q7 + '","Q8":"' + Q8 + '","Q9":"' + Q9 + '","Q10":"' + Q10 + '","Total":"' + localStorage.getItem("Total", Total) + '","CaseStudy":"' + localStorage.getItem("CaseStudy") + '","UserId":"' + localStorage.getItem("UserId") + '","Attempts":"' + QnANumAttempts + '"}',
success: function (data) {
alert('this alert is invoked successfully');
if (data.Success == true) {
alert('this alert is not being invoked successfully');
//result id used for feedback insertion > update result entity
localStorage.setItem("ResultId", data.ResultId);
viewModel.UserId("You have successfully completed case study " + localStorage.getItem("CaseStudy") + ", please fill out the <a href='evaluation.html' target='_self'>evaluation.</a>");
}
else if (data.Success==false)
{
alert('this alert is not being invoked either');
viewModel.UserId("Your entry has not been saved, please try again.");
}
},
}).fail(
function (xhr, textStatus, err) {
console.log(xhr.statusText);
console.log(textStatus);
console.log(err);
});
}
mvc function
//
// POST: /Result/Create
[HttpPost]
public ActionResult Create(Result result)
{
if (ModelState.IsValid)
{
result.ResultDate = DateTime.Now;
repository.InsertResult(result);
repository.Save();
if (Request.IsAjaxRequest())
{
int ResultId = result.ResultId;
try
{ //valid database entry..send back new ResultId
return Json(new { Success = true, ResultId, JsonRequestBehavior.AllowGet });
}
catch
{ // no database entry
return Json(new { Success = false, Message = "Error", JsonRequestBehavior.AllowGet });
}
}
return RedirectToAction("Index");
}
return View(result);
}
Found two issues with the code:
1.localStorage.getItem("Total", Total) should be localStorage.getItem("Total")
2.dataType : "json" not explicitly mentioned.
I have posted with the relevant corrections.Try this if it helps and also share if if you get any errors.
function InsertQnA() {
$.ajax({
url: Domain + '/Result/Create',
cache: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: '{"Q1":"' + Q1 + '","Q2":"' + Q2 + '","Q3":"' + Q3 + '","Q4":"' + Q4 + '","Q5":"' + Q5 + '","Q6":"' + Q6 + '","Q7":"' + Q7 + '","Q8":"' + Q8 + '","Q9":"' + Q9 + '","Q10":"' + Q10 + '","Total":"' + localStorage.getItem("Total") + '","CaseStudy":"' + localStorage.getItem("CaseStudy") + '","UserId":"' + localStorage.getItem("UserId") + '","Attempts":"' + QnANumAttempts + '"}',
dataType : "json",
success: function (data) {
alert('this alert is invoked successfully');
try {
if (data.Success == true) {
alert('this alert is not being invoked successfully');
//result id used for feedback insertion > update result entity
localStorage.setItem("ResultId", data.ResultId);
viewModel.UserId("You have successfully completed case study " + localStorage.getItem("CaseStudy") + ", please fill out the <a href='evaluation.html' target='_self'>evaluation.</a>");
}
else if (data.Success==false)
{
alert('this alert is not being invoked either');
viewModel.UserId("Your entry has not been saved, please try again.");
}
}catch(error) {
alert("This is the error which might be: "+error.message);
}
},
}).fail(
function (xhr, textStatus, err) {
console.log(xhr.statusText);
console.log(textStatus);
console.log(err);
});
}
Make these changes in your server side code.
var json = "";
try
{ //valid database entry..send back new ResultId
json = Json.Encode(new { Success = true, ResultId, JsonRequestBehavior.AllowGet });
}
catch
{ // no database entry
json = Json.Encode(new { Success = false, Message = "Error", JsonRequestBehavior.AllowGet });
}
Response.Write(json);
From what I have gathered (over the past two days) an MVC ActionResult does not seem to easily serve a webapp with data. I got round this by duplicating the ActionResult with a string method and it works fine now. Probably not the best solution but I have heard that its better to create two action methods instead of having one when serving a web view and a web app. Many thanks to everyone who posted.
MVC Action -
[HttpPost]
public string CreateResult(Result result)
{
result.ResultDate = DateTime.Now;
repository.InsertResult(result);
repository.Save();
if (result == null)
{
// User entity does not exist in db, return 0
return JsonConvert.SerializeObject(0);
}
else
{
// Success return user
return JsonConvert.SerializeObject(result, Formatting.Indented, new JsonSerializerSettings { PreserveReferencesHandling = PreserveReferencesHandling.Objects });
}
}
AJAX -
$.ajax({
url: Domain + '/Result/CreateResult',
cache: false,
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: '{"Q1":"' + Q1 + '","Q2":"' + Q2 + '","Q3":"' + Q3 + '","Q4":"' + Q4 + '","Q5":"' + Q5 + '","Q6":"' + Q6 + '","Q7":"' + Q7 + '","Q8":"' + Q8 + '","Q9":"' + Q9 + '","Q10":"' + Q10 + '","Total":"' + localStorage.getItem("Total") + '","CaseStudy":"' + localStorage.getItem("CaseStudy") + '","UserId":"' + localStorage.getItem("UserId") + '","Attempts":"' + QnANumAttempts + '"}',
success: function (data) {
try {
if (data != 0) {
//result id used for feedback insertion > update result entity
localStorage.setItem("ResultId", data.ResultId);
viewModel.UserId("You have successfully completed case study " + localStorage.getItem("CaseStudy") + ", please fill out the <a href=evaluation.html target=_self>evaluation.<a/>");
//reset locals
ResetLocalStorage();
//count number of entities for User
CountUserEntitiesInResults();
}
else
{
viewModel.UserId("Your entry has not been saved, please try again.");
}
}catch(error) {
alert("This is the error which might be: "+error.message);
}
},
}).fail(
function (xhr, textStatus, err) {
console.log(xhr.statusText);
console.log(textStatus);
console.log(err);
});​

Synchronous AJAX...I know that sounds crazy

I have web methods that are called via AJAX in a .Net 4.0 web app. In many cases, the AJAX calls are made repeatedly in a for loop. My problem is, the information the web method is syncing to my server is time stamped and therefore must be synced in the order in which I am sending it to AJAX. Unfortunately, it seems whatever finishes first, simply finishes first and the time stamps are all out of order. I need to basically queue up my AJAX requests so that they execute in order rather than Asynchronously, which I know is the A in AJAX so this might be a totally dumb question.
How do I force the order of execution for AJAX calls done in a for loop?
Edit: Some code
for (var i = 0; i < itemCnt - 1; i++) {
try {
key = items[i];
item = localStorage.getItem(key);
vals = item.split(",");
type = getType(key);
if (type == "Status") {
var Call = key.substring(7, 17);
var OldStat = vals[0];
var NewStat = vals[1];
var Date1 = vals[2];
var Time1 = vals[3];
var miles = vals[4];
try {
stat(Call, OldStat, NewStat, Date1, Time1, miles, key);
}
catch (e) {
alert("Status " + e);
return;
}
}
else if (type == "Notes") {
var Call = key.substring(6, 16);
var Notes = item;
try {
addNotes(Call, Notes);
}
catch (e) {
alert("Notes " + e);
return;
}
}
else if (key == "StartNCTime" || key == "EndNCTime") {
var TechID = vals[0];
var Date = vals[1];
var Time = vals[2];
var Activity = vals[3];
var Location = vals[4];
var Type = vals[5];
try {
logTime(TechID, Date, Time, Activity, Location, Type,
}
catch (e) {
alert(key + ' ' + e);
return;
}
}
}
catch (e) {
alert(key + ' ' + e);
return;
}
}
function stat(Call, OldStat, NewStat, Date1, Time1, miles, key) {
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: "Service.asmx/update_Stat",
data: '{ CallNumber:"' + Call + '", OldStat:"' + OldStat + '", NewStat:"' + NewStat + '", Date1:"' + Date1 + '", Time1:"' + Time1 + '", Miles: "' + miles + '"}',
success: function (data) { },
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert("Sync Update Stat: " + err.Message);
location = location;
}
});
}
function logTime(TechID, Date, Time, Activity, Location, Type, key) {
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: "Service.asmx/nonCallTime",
data: '{ TechID:"' + TechID + '", Date1:"' + Date + '", Time1:"' + Time + '", Activity:"' + Activity + '", Location:"' + Location + '", Type: "' + Type + '"}',
success: function (data) { },
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert("Sync Non Call Time: " + err.Message);
location = location;
}
});
}
function addNotes(Call, Notes) {
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: "Service.asmx/addNote",
data: '{ Call:"' + Call + '", Notes:"' + Notes + '"}',
success: function (data) { },
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert("Sync Notes: " + err.Message);
location = location;
}
});
}
You have to use callbacks.
function ajax1(){
//..some code
//on ajax success:
ajax2();
}
//etcetera...
Or might I suggest using a javascript library like jQuery to synchronize your ajax requests for you.
set the third parameter in xmlhttp object's open method to false to make it synchronous.
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
A general pattern for making actions serial would be such:
function doAjax(data, cb) {
...
// when ready call cb
}
(function (next) {
var xhr = doAjax(data, next);
})(function (next) {
var xhr = doAjax(data, next);
})(function (next) {
doAjax(data);
});
Doing so in a for loop would require recursion.
(function next() {
if ( i < n ) {
doAjax(data[i++], next);
}
})();

Categories

Resources