I'm trying to get a list of nearby streets given a LatLng value using the geonames web service. I can get nearby wikopedia articles but am unable to get a list of street names using their findNearbyStreetsOSM method. This is what i have:
I'm blind and using a screenreader. Hopefully the code is indented correctly.
//geonames API function
//feed in the geonames method i.e. findNearbyWikipedia, findNearbyStreetsOSM + the long and lat values + the name of the div you want the results to be displayed in
function FetchDataFromGeoNames(geonamesMethod, latitude, longitude, divToOutputResultsTo) {
var geonamesAPIKey = "my_API_key);
var apiUrl = "http://api.geonames.org/";
var radius = 1;
var request = apiUrl + geonamesMethod + "JSON?lat=" + latitude + "&lng=" + longitude + "&username=" + geonamesAPIKey;
if (geonamesMethod == 'findNearbyWikipedia') {
request += "&radius=" + radius + "&maxRows=5&country=UK";
}
request += '&callback=?';
//alert(request);
//pass the request onto geonames API
$.getJSON(request, {}, function(res) {
if (res.hasOwnProperty("status")) {
$("#divToOutputResultsTo").html("Sorry, I failed to work because: " + res.status.message);
return;
}
var s = "";
//loop through the results
for (var i = 0; i < res.geonames.length; i++) {
//alert(JSON.stringify(res));
//if find wikopedia request then
if (geonamesMethod == 'findNearbyWikipedia') {
s += "<p><h2>" + res.geonames[i].title;
} else if (geonamesMethod == 'findNearbyStreetsOSM') {
s += "<p><h2>" + res.geonames[i].name;
}
if (geonamesMethod == 'findNearbyWikipedia') {
if(res.geonames[i].hasOwnProperty("thumbnailImg")) s += "<img src='"+res.geonames[i].thumbnailImg+"' align='left'>";
if (!!res.geonames[i].feature && res.geonames[i].feature != "undefined") s += '<br />Feature: ' + res.geonames[i].feature;
s += '<br />' + res.geonames[i].summary;
s += "<br clear='left'><a href='http://"+res.geonames[i].wikipediaUrl+"'>[Read More]</a></p>";
} else if (geonamesMethod == 'findNearbyStreetsOSM') {
s += '<br />Highway: ' + res.geonames[i].highway;
}
}
//concatonate the results
if (s != "") {
if (geonamesMethod == 'findNearbyWikipedia') {
s = "<h2>Nearby Wikopedia</h2>" + s;
} else if (geonamesMethod == 'findNearbyStreetsOSM') {
s = "<h2>Nearby streets (OSM)</h2>" + s;
}
//display the results on screen
$(divToOutputResultsTo).html(s);
}
});
}
Thanks,
Related
I have a Javascript function that is meant to end with passing an array back into my c# code
I have got it to reach the c# code, but it never passes a parameter
My Javascript is as follows
var errorsubmits = [];
var filelists = [];
var nameselect = document.getElementById("username");
var nameselected = nameselect.options[nameselect.selectedIndex].text;
if (nameselected.includes("User"))
errorsubmits.push("User Name");
var prioritylevel = document.getElementById("priority");
var priorityselected = prioritylevel.options[prioritylevel.selectedIndex].text;
if (priorityselected.includes("Priority"))
errorsubmits.push("Priority");
var table = document.getElementById("FileTable");
var counter = 0;
var filename = "";
var images = "";
var envs = "";
var printmethod = "";
var encmethod = "";
var colour = "";
var commentsforprint = "";
var commentsforenclose = "";
for (var i = 1, row; row = table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
if (counter == 0) {
if (j == 0)
filename = table.rows[i].cells[j].children[0].value;
if (j == 1)
images = table.rows[i].cells[j].children[0].value;
if (j == 2)
envs = table.rows[i].cells[j].children[0].value;
if (j == 3)
printmethod = table.rows[i].cells[j].children[0].value;
if (j == 4)
encmethod = table.rows[i].cells[j].children[0].value;
if (j == 5)
colour = table.rows[i].cells[j].children[0].value;
}
else {
if (j == 1) {
if (table.rows[i].cells[j - 1].innerHTML.includes("Print"))
commentsforprint = table.rows[i].cells[j].children[0].value;
else
commentsforenclose = table.rows[i].cells[j].children[0].value;
}
}
}
if (i % 3 == 0) {
if (filename == "")
errorsubmits.push("Filename (row:" + i + ")");
if (images == "")
errorsubmits.push("Images (row:" + i + ")");
if (envs == "")
errorsubmits.push("Envs (row:" + i + ")");
if (printmethod.includes("Method"))
errorsubmits.push("Print Method (row:" + i + ")");
if (encmethod.includes("Method"))
errorsubmits.push("Enc Method (row:" + i + ")");
if (colour.includes("?"))
errorsubmits.push("Colour (row:" + i + ")");
// alert(filename + "\n" + images + "\n" + envs + "\n" + printmethod + "\n" + encmethod + "\n" + colour + "\n" + commentsforprint + "\n" + commentsforenclose);
filelists.push(nameselected + "\t" + priorityselected + "\t" + document.getElementById('Email').textContent + "\t" + filename + "\t" + images + "\t" + envs + "\t" + printmethod + "\t" + encmethod + "\t" + colour + "\t" + commentsforprint + "\t" + commentsforenclose)
filename = "";
images = "";
envs = "";
printmethod = "";
encmethod = "";
colour = "";
commentsforprint = "";
commentsforenclose = "";
counter = 0;
}
else {
counter++;
}
}
if (errorsubmits.length != 0) {
alert("Cannot submit!\nThe following lines need filling:\n" + errorsubmits.join("\n"));
}
else {
$.ajax({
url: '?handler=Test',
contentType: 'application/json',
data: JSON.stringify(filelists)
});
}
My C# code which is currently functionless as i cant get the data is this
public JsonResult OnGetTest(IEnumerable<object>x)
{
return new JsonResult("TEST");
}
I have done an alert(JSON.stringify(filelists)) so i know that this works
(If possible i'd like to pass the raw array rather than stringifying it but i was following another SO suggestion)
The url '?handler=Test' send request like https://localhost:44389/?handler=Test&filelists=%5B%22nameselected%22%2C%22nameselected1%22%5D, because it's a HttpGet request not a POST.
Edit as per comment
1 - Function JS :
Push any string in the array filelists, and change your data to { "filelists": JSON.stringify(filelists) }
var filelists = [];
// push strings here
$.ajax({
url: '?handler=Test',
contentType: 'application/json',
data: { "filelists": JSON.stringify(filelists) }
});
2 - In the server side
public JsonResult OnGetTest(string filelists)
{
IEnumerable<string> files = JsonConvert.DeserializeObject<IEnumerable<string>>(filelists);
return new JsonResult("TEST");
}
Note that, if you need to send javascript objects in the array, you should create classes for deserializing data.
I'm working through the Google Place API documentation and I'm trying to get a script that pulls PlaceIDs from a webpage, and replace them with output from the Google Place API.
I managed to successfully get an output from multiple Place IDs by duplicating the code and changing the variable and function names, but now I'm trying to create a loop function so that I'm not duplicating code. Below is what I have, but I'm getting an error. By looking at the console, it seems to work up till the Callback function where it beaks down.
"Uncaught TypeError: Cannot set property 'innerHTML' of null
at callback (places.html:29)"
I've tried a few things, but no luck so far. Any suggestions would be appreciated. Thanks,
<body>
<div id="MY0">ChIJaZ6Hg4iAhYARxTsHnDFJ9zE</div>
<div id="MY1">ChIJT9e323V644kRR6TiEnwcOlA</div>
<script>
var request = [];
var service = [];
var div = [];
for (i = 0; i < 2; i++) {
request[i] = {
placeId: document.getElementById("MY" + i).innerHTML,
fields: ['name', 'rating', 'formatted_phone_number', 'geometry', 'reviews', 'photos'],
};
service[i] = new google.maps.places.PlacesService(document.createElement('div'));
service[i].getDetails(request[i], callback);
function callback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
div[i] = document.getElementById("MY" + i);
div[i].innerHTML = "<b>" + place.name + "</b><br>" + place.rating + "<br>" + place.reviews[1].author_name + "<br>" + place.reviews[1].rating + "<br>" + place.reviews[1].text + "<br><img src='" + place.photos[0].getUrl({'maxWidth': 250, 'maxHeight': 250}) + "'>";
}
}
}
</script>
</body>
Move the callback outside of the for loop and forget about the array named div (unless you need this...if so I will rewrite). The for loop is executing before the getDetails() call returns any result, because this call is asynchronous - since you don't have much control over the Google Places callback, I would save the IDs in an array and then use them in callback, like this:
function gp_callback(place, status) {
var el = document.getElementById(window.id_set[0]); // first in first out - the for loop should populate the IDs in correct order
if (status == google.maps.places.PlacesServiceStatus.OK) {
el.innerHTML = "<b>" + place.name + "</b><br>" + place.rating + "<br>" + place.reviews[1].author_name + "<br>" + place.reviews[1].rating + "<br>" + place.reviews[1].text + "<br><img src='" + place.photos[0].getUrl({'maxWidth': 250, 'maxHeight': 250}) + "'>";
}
if (window.id_set.length > 1) {
window.id_set.splice(0, 1); // remove first element from array because has been used - now the next element is at index 0 for the next async callback
}
}
var request = [];
var service = [];
var id_set = [];
for (i = 0; i < 2; i++) {
request[i] = {
placeId: document.getElementById("MY" + i).innerHTML,
fields: ['name', 'rating', 'formatted_phone_number', 'geometry', 'reviews', 'photos'],
};
id_set.push("MY" + i); // this ensures array is populated (in proper order, b/c it tracks the execution of the for loop) for use in callback before callback is called (since getDetails() is async)
service[i] = new google.maps.places.PlacesService(document.createElement('div'));
service[i].getDetails(request[i], function(place, status) {
gp_callback(place, status);
});
}
UPDATE: More scalable and elegant answer after I had a little more time to think about it.
<div id="MY0" class="gp_container">ChIJaZ6Hg4iAhYARxTsHnDFJ9zE</div>
<div id="MY1" class="gp_container">ChIJT9e323V644kRR6TiEnwcOlA</div>
.
.
.
<div id="MYN" class="gp_container">fvbfsvkjfbvkfvb</div> // the nth div
<script>
function populate_container(place, status, container_id) {
var el = document.getElementById(container_id);
if (status == google.maps.places.PlacesServiceStatus.OK) {
el.innerHTML = "<b>" + place.name + "</b><br>" + place.rating + "<br>" + place.reviews[1].author_name + "<br>" + place.reviews[1].rating + "<br>" + place.reviews[1].text + "<br><img src='" + place.photos[0].getUrl({'maxWidth': 250, 'maxHeight': 250}) + "'>";
}
}
function call_service(id_request_map) {
var i, container_id, request,
service_call = function(container_id, request) {
var service = new google.maps.places.PlacesService(document.createElement('div'));
service.getDetails(request, function(place, status) {
populate_container(place, status, container_id);
});
};
for(i in id_request_map) {
service_call(i, id_request_map[i]);
}
}
$(document).ready(function() {
var request, container_id,
id_request_map = {},
container_length = document.getElementsByClassName("gp_container").length,
i = 0;
for (; i < container_length; i++) {
container_id = "MY" + i;
request = {
placeId: document.getElementById(container_id).innerHTML,
fields: ['name', 'rating', 'formatted_phone_number', 'geometry', 'reviews', 'photos'],
};
id_request_map[container_id] = request; // build the association map
}
call_service(id_request_map);
});
</script>
I'm having troubles with getting a variable from a getJSON() request. I have the following three functions:
function getPcLatitude() { // onchange
var funcid = "get_postcode_latitude";
var postcode = parseInt($('#input-field-postcode').val());
var jqxhr = $.getJSON('functions/getdata.php', {
"funcid":funcid,
"postcode":postcode}).done(function(dataLatitude) {
if (dataLatitude == null) {
//..
} else {
var myLatitude = 0;
for (var i=0;i<dataLatitude.length;i++){
myLatitude = dataLatitude[i].pc_latitude;
}
return parseFloat(myLatitude);
//alert(myLatitude);
}
});
}
function getPcLongitude() { // onchange
var funcid = "get_postcode_longitude";
var postcode = parseInt($('#input-field-postcode').val());
var jqxhr = $.getJSON('functions/getdata.php', {
"funcid":funcid,
"postcode":postcode}).done(function(dataLongitude) {
if (dataLongitude == null) {
//..
} else {
var myLongitude = 0;
for (var i=0;i<dataLongitude.length;i++){
myLongitude = dataLongitude[i].pc_longitude;
}
return parseFloat(myLongitude);
//alert(myLongitude);
}
});
}
function getTop5Postcode() { // onchange
setTimeout(function() {
var funcid = "get_top_5_postcode";
var er = rangeM3Slider.noUiSlider.get();
var zv = $("#selectzv").val();
if (zv < 1) {
var zv = $("#selectzvfc").val();
}
var zp = $("#selectzp").val();
if (zp < 1) {
var zp = $("#selectzpfc").val();
}
var latitude = getPcLatitude();
var longitude = getPcLongitude();
var chosendistance = parseInt($('#input-field-afstand').val());
var jqxhr = $.getJSON('functions/getdata.php', {
"funcid":funcid,
"er":er,
"zp":zp,
"zv":zv,
"latitude":latitude,
"longitude":longitude,
"chosendistance":chosendistance}).done(function(dataPrices) {
if (dataPrices == null) {
$('#myModalAlert').modal('show');
} else {
//$('#myModalData').modal('show');
var table = '';
var iconClassZkn = '';
var iconClassIp = '';
for (var i=0;i<dataPrices.length;i++){
if (dataPrices[i].zkn_score == 0) {
iconClassZkn = 'no-score';
} else {
iconClassZkn = 'zkn-score';
}
if (dataPrices[i].ip_score == 0) {
iconClassIp = 'no-score';
} else {
iconClassIp = 'ip-score';
}
table += '<tr>'
+ '<td width="75" class="zkh-image" align="center">'+ dataPrices[i].zvln_icon +'</td>'
+ '<td width="250" align="left"><b>'+ dataPrices[i].zvln +'</b><br><i>Locatie: ' + dataPrices[i].zvln_city + '</i></td>'
+ '<td class=text-center> € '+ dataPrices[i].tarif +'</td>'
+ '<td class=text-center> € '+ dataPrices[i].risico +'</td>'
+ '<td class=text-center><a target="_blank" href="' + dataPrices[i].zkn_url + '"><span class="' + iconClassZkn + '"><font size="2"><b>' + dataPrices[i].zkn_score + '</b></font></span></a></td>'
+ '<td class=text-center><a target="_blank" href="' + dataPrices[i].ip_url + '"><span class="' + iconClassIp + '"><font size="2"><b>' + dataPrices[i].ip_score + '</b></font></span></a></td>'
+ '</tr>';
}
$('#top5').html(table);
//$('#myModalData').modal('hide');
}
})
.fail(function() { $('#myModalAlert').modal('show');}); //When getJSON request fails
}, 0);
}
Form some reason the
var latitude = getPcLatitude();
var longitude = getPcLongitude();
parts don't work / don't get a value form the functions. When I change the return in both functions into an alert() it does give me the expected values, so those two functions work.
When I set the two variables directly, like so:
var latitude = 5215;
var longitude = 538;
then the getTop5Postcode() function does work and fills the table.
Any help on this?
Regards, Bart
Do not forget that JavaScript is asynchronous, so by the time you reach the return statement, the request is probably not done yet. You can use a promise, something like:
$.getJSON(....).then(function(value){//do what you want to do here})
Both your functions (getPcLatitude and getPcLongitude) are returning nothing because the return statement is inside a callback from an asynchronous request, and that's why an alert show the correct value.
I would suggest you to change both methods signature adding a callback parameter.
function getPcLatitude(callback) {
...
}
function getPcLongitude(callback) {
...
}
And instead of returning you should pass the value to the callback:
callback(parseFloat(myLatitude));
callback(parseFloat(myLongitude));
And your last function would be somehting like that:
function getTop5Postcode() { // onchange
setTimeout(function() {
var latitude;
var longitude;
getPcLatitude(function(lat) {
latitude = lat;
getTop5(); // Here you call the next function because you can't be sure what response will come first.
});
getPcLongitude(function(longi) {
longitude = longi;
getTop5();
});
function getTop5() {
if (!latitude || !longitude) {
return; // This function won't continue if some of the values are undefined, null, false, empty or 0. You may want to change that.
}
var funcid = "get_top_5_postcode";
var er = rangeM3Slider.noUiSlider.get();
var zv = $("#selectzv").val();
if (zv < 1) {
var zv = $("#selectzvfc").val();
}
var zp = $("#selectzp").val();
if (zp < 1) {
var zp = $("#selectzpfc").val();
}
var chosendistance = parseInt($('#input-field-afstand').val());
var jqxhr = $.getJSON('functions/getdata.php', {
"funcid":funcid,
"er":er,
"zp":zp,
"zv":zv,
"latitude":latitude,
"longitude":longitude,
"chosendistance":chosendistance}).done(function(dataPrices) {
if (dataPrices == null) {
$('#myModalAlert').modal('show');
} else {
//$('#myModalData').modal('show');
var table = '';
var iconClassZkn = '';
var iconClassIp = '';
for (var i=0;i<dataPrices.length;i++){
if (dataPrices[i].zkn_score == 0) {
iconClassZkn = 'no-score';
} else {
iconClassZkn = 'zkn-score';
}
if (dataPrices[i].ip_score == 0) {
iconClassIp = 'no-score';
} else {
iconClassIp = 'ip-score';
}
table += '<tr>'
+ '<td width="75" class="zkh-image" align="center">'+ dataPrices[i].zvln_icon +'</td>'
+ '<td width="250" align="left"><b>'+ dataPrices[i].zvln +'</b><br><i>Locatie: ' + dataPrices[i].zvln_city + '</i></td>'
+ '<td class=text-center> € '+ dataPrices[i].tarif +'</td>'
+ '<td class=text-center> € '+ dataPrices[i].risico +'</td>'
+ '<td class=text-center><a target="_blank" href="' + dataPrices[i].zkn_url + '"><span class="' + iconClassZkn + '"><font size="2"><b>' + dataPrices[i].zkn_score + '</b></font></span></a></td>'
+ '<td class=text-center><a target="_blank" href="' + dataPrices[i].ip_url + '"><span class="' + iconClassIp + '"><font size="2"><b>' + dataPrices[i].ip_score + '</b></font></span></a></td>'
+ '</tr>';
}
$('#top5').html(table);
//$('#myModalData').modal('hide');
}
})
.fail(function() { $('#myModalAlert').modal('show');}); //When getJSON request fails
}
}, 0);
}
Of course, this is far away from the perfect solution for your problem but it should work!
And I did not test this code.
I solved this by doing some extra stuff in mysql queries. Now I only have to use the main function.
Things work now! Thanks for all the help!
I have recently added CRM 2011 for Outlook client to a new machine, I have a script which runs on the payment entity formLoad which calculates the remainingAmount left after taking into account all the payment allocations and deducting from the TotalAmount..
However, when I access the data through Outlook, the script seems to not be firing off on formLoad.. If i access the same data through the web portal then the script fires off without an issue - this leads me to think that there is a setting somewhere which you need to enable to allow custom javascript to run in Outlook for the CRM?
My script is below for the paymentLoad():
function PaymentOnLoad() {
setTimeout(attachEventToGrid, 2500);
if (crmForm.ObjectId != null) {
var PaymentAmount = Xrm.Page.getAttribute("new_accountpaymentamount").getValue();
var OSAmount = CalcOutstandingPaymentAmount(crmForm.ObjectId);
Xrm.Page.getAttribute("new_remainingamount").setValue(parseFloat(eval(rounddec(OSAmount))));
if ((PaymentAmount != null) && (OSAmount - PaymentAmount != 0)) {
Xrm.Page.ui.controls.get("new_paymentamount").setDisabled(true);
}
}
}
function rounddec(value) {
return Math.round(value * 100) / 100;
}
function attachEventToGrid() {
// Attach a refresh event to the PaymentAllocations grid
var targetgrid = document.getElementById("PaymentAllocations");
if (targetgrid) {
if (targetgrid.control.add_onRefresh != undefined) {
targetgrid.control.add_onRefresh(ReLoad);
}
else {
targetgrid.attachEvent("onrefresh", ReLoad);
}
}
else {
setTimeout(attachEventToGrid, 2500);
}
}
function PaymentAllocationOnLoad() {
OnPaymentTypeSelection();
if (Xrm.Page.getAttribute("new_payment").getValue()[0] != null) {
var OSPaymentAmount = CalcOutstandingPaymentAmount(Xrm.Page.getAttribute("new_payment").getValue()[0].id);
Xrm.Page.getAttribute("new_paymentremainingamount").setValue(parseFloat(eval(OSPaymentAmount)));
if (Xrm.Page.getAttribute("new_invoice").getValue() != null) {
var OSInvoiceAmount = CalcOutstandingInvoiceAmount(Xrm.Page.getAttribute("new_invoice").getValue()[0].id);
Xrm.Page.getAttribute("new_invoiceremainingamount").setValue(parseFloat(eval(OSInvoiceAmount)));
Xrm.Page.ui.controls.get("new_paymentamount").setDisabled(true);
}
}
}
function CalcOutstandingPaymentAmount(paymentid) {
_oService = new FetchUtil(_sOrgName, _sServerUrl);
var sFetchPayment = "<fetch mapping='logical'>" +
"<entity name='new_payment'>" +
"<attribute name='new_paymentamount' />" +
"<attribute name='new_accountpaymentamount' />" +
"<filter type='and'>" +
"<condition attribute = 'new_paymentid' operator='eq' value='" + paymentid + "'/>" +
"</filter>" +
"</entity>" +
"</fetch>";
var fetchResultPayment = _oService.Fetch(sFetchPayment, null);
var sFetch = "<fetch mapping='logical'>" +
"<entity name='new_paymentinvoiceallocation'>" +
"<attribute name='new_allocatedamount' />" +
"<filter type='and'>" +
"<condition attribute = 'new_payment' operator='eq' value='" + paymentid + "'/>" +
"</filter>" +
"</entity>" +
"</fetch>";
var fetchApplication = _oService.Fetch(sFetch, null);
var TotalAmount = 0;
if (fetchResultPayment != null) {
TotalAmount = fetchResultPayment.results[0].attributes.new_accountpaymentamount.value;
}
if ((fetchResultPayment != null) && (fetchApplication != null)) {
for (var i = 0;
i < fetchApplication.results.length;
i++) {
TotalAmount -= fetchApplication.results[i].attributes.new_allocatedamount.value;
}
}
return TotalAmount;
}
Any suggestions would be appreciated.
In my Firefox OS app i use Flickr API to show relevant images, My URL for the call is like this.
https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lat=42.86366&lon=-75.91438&radius=3&format=json&nojsoncallback=1
and i use created a function to call the flicker api for the images. This is the function where i create the URL with the api key and latitude and longitude for the api call
function displayObject(id) {
console.log('In diaplayObject()');
var objectStore = db.transaction(dbTable).objectStore(dbTable);
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
if (cursor.value.ID == id) {
var lat = cursor.value.Lat;
var lon = cursor.value.Lon;
showPosOnMap (lat, lon);
// create the URL
var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search';
url += '&api_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
url += '&lat=' + lat + '';
url += '&lon=' + lon + '';
url += '&radius=3';
url += '&format=json&nojsoncallback=1';
$.getJSON(url, jsonFlickrFeed);
return;
}
cursor.continue();
} else {
$('#detailsTitle').html('No DATA');
}
};
}
This function gets the JSON object received from flickr. This function displays the thumbnails of the images in a jquery mobile grid.
function jsonFlickrFeed (data) {
console.log(data);
var output = '';
// http://farm{farmId}.staticflickr.com/{server-id}/{id}_{secret}{size}.jpg
for (var i = 0; i < data.photos.photo.length; i++) {
// generate thumbnail link
var linkThumb = '';
linkThumb += 'http://farm' + data.photos.photo[i].farm + '.staticflickr.com/' + data.photos.photo[i].server + '/' + data.photos.photo[i].id + '_' + data.photos.photo[i].secret + '_s.jpg';
// generate Full image link
var linkFull = '';
linkFull += 'http://farm' + data.photos.photo[i].farm + '.staticflickr.com/' + data.photos.photo[i].server + '/' + data.photos.photo[i].id + '_' + data.photos.photo[i].secret + '_b.jpg';
if (i < 20)
console.log(linkThumb);
//console.log(linkFull);
var title = data.photos.photo[i].title;
var blocktype = ((i % 3) == 2) ? 'c' : ((i % 3) == 1) ? 'b' : 'a';
output += '<div class="ui-block-' + blocktype + '">';
output += '<a href="#showphoto" data-transition="fade" onclick="showPhoto(\'' + linkFull + '\',\'' + title + '\')">';
output += '<img src="' + linkThumb + '_q.jpg" alt="' + title + '" />';
output += '</a>';
output += '</div>';
};
$('#photolist').html(output);
}
Then finally this function show the full screen view of the image. When the user taps on the thumbnail a larger image is taken and shown.
function showPhoto (link, title) {
var output = '<a href="#photos" data-transition="fade">';
output += '<img src="' + link + '_b.jpg" alt="' + title + '" />';
output += '</a>';
$('#myphoto').html(output);
}
My problem is that, i get the JSON object with the images by calling the API. i have console.log() where i output the json object and i checked all the image info is there. But when i go to the grid view and even the full view i get the default image that states that the This image or video is currently unavailable. I can't figure out what im doing wrong here.. Please help.
You may be requesting an image size that flickr does not have for that image. You are appending "_s", "_q" and "_b" to select a few sizes - so perhaps those are not available. You can check the flickr API 'photos.getSizes' to see what sizes are available. The Flickr API seems to be pretty inconvenient sometimes.
https://www.flickr.com/services/api/flickr.photos.getSizes.html