I have a leaflet map running on a server whose popups are automatically filled with images. Some popups contain three images. The problem is that the broken image icon appears on those that contain fewer images. I've already tried to remove them with alt="", but it doesn't work.
Attached is a link to the app/code.
function forEachFeatureCC(feature, layer) {
var popUp =
"<h2>" + feature.properties.Name + "</h2>" +
"<img src='" + feature.properties.Bildlink + "'width='300'</img>" +
"<br>" + "<br>" +
"<h4>" + feature.properties.Beschreibung +
"<br>" + "<br>" +
"<img src='" + feature.properties.Bildlink_2 + "'width='300'</img>" +
"<br>" + "<br>" +
"<img src='" + feature.properties.Bildlink_3 + "' width='300' alt=''</img>" +
"<br>" + "<br>";
layer.bindPopup(popUp).update();
}
https://wasserwiki.eu/Wasserwiki_App_Mobile
OK, I see, you simply don't want to show the absent images. In that case you can do:
function getImageHtml(imagelink)
{
return "<img src='"+ imagelink + "' width='300'</img>" + "<br>" + "<br>";
}
function forEachFeatureCC(feature, layer)
{
var popUp = "<h2>" + feature.properties.Name + "</h2>";
if (feature.properties.Bildlink) {
popUp = popUp + getImageHtml(feature.properties.Bildlink);
}
if (feature.properties.Bildlink_2) {
popUp = popUp + getImageHtml(feature.properties.Bildlink_2);
}
if (feature.properties.Bildlink_3) {
popUp = popUp + getImageHtml(feature.properties.Bildlink_3);
}
layer.bindPopup(popUp).update();
}
I didn't test the code, so some debugging might be needed, but I think the general idea is clear?
Related
I would like to clean this up with a For loop. What would be the most efficient way coding this out?
I'm creating a search form that looks through a database for the specific form criteria. The way I have it coded would only work for the 8 Fields. But it is possible for the search form to have more then 8. For now though, I'd like to be able to map the results and display in a results page.
This is what I tried. This did not work at all and probably make no sense to anyone lol.
var obj =data[0]
$.get("obj", {data: $('select["Fields.DisplayName" + Fields.DataValue]').val()},
function(data){
$.each(data, function(i, item) {
alert(item);
});
}
);
This works for getting the data and displaying it how I'd like.
var obj = data[0];
document.getElementById("test").innerHTML =
"<p>"+ obj.Fields[0].DisplayName + ": " + obj.Fields[0].DataValue + "</p>" +
"<p>" + obj.Fields[1].DisplayName + ": " + obj.Fields[1].DataValue + "</p>" +
"<p>"+ obj.Fields[2].DisplayName + ": " + obj.Fields[2].DataValue + "</p>" +
"<p>"+ obj.Fields[3].DisplayName + ": " + obj.Fields[3].DataValue + "</p>" +
"<p>" + obj.Fields[4].DisplayName + ": " + obj.Fields[4].DataValue + "</p>" +
"<p>" + obj.Fields[5].DisplayName + ": " + obj.Fields[5].DataValue + "</p>" +
"<p>"+ obj.Fields[6].DisplayName + ": " + obj.Fields[6].DataValue + "</p>" +
"<p>" + obj.Fields[7].DisplayName + ": " + obj.Fields[7].DataValue + "</p>"
;
The next problem is if there is more then 1 data object. Currently I have it set to loop through the first object, but when I remove that I get cannot read property of '0' undefined.
Sure.
var html = "";
obj.Fields.forEach(({DisplayName, DataValue}) => {
html += `<p>${DisplayName}: ${DataValue}</p>`;
});
document.getElementById("test").innerHtml = html;
Use Array.map() and join the results:
var fields = data[0].Fields ;
document.getElementById("test").innerHTML = fields
.map(function(field) {
return '<p>' + field.DisplayName + ': ' + field.DataValue + '</p>';
})
.join('\n');
Annoyingly, the FlickrAPI provides the title and description of a photo in two separate methods. I'm having trouble getting the description of an image from Flickr and was wondering if you could highlight the error in my script.
for (var i = 0; i < photos.photo.length; i++) {
var descPhoto = "https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key="+API_KEY+"&photo_id="+photos.photo[i].id+"&format=json&nojsoncallback=1";
var descArr = [];
$.getJSON(descPhoto, function(data) {
var value = data.photo.description._content;
descArr.push(value);
});
link = 'https://farm' + photos.photo[i].farm + '.static.flickr.com/' + photos.photo[i].server + '/' + photos.photo[i].id + '_' + photos.photo[i].secret + '_';
title = this._htmlEscape( photos.photo[i].title );
var lightbox = "lightbox";
listItems +=
'<li ' + 'class="' + liClassNoDots + '">' +
'<a href="' + link + self.options.imageSize + '.jpg" title="' + title + '" class="' + aClassNoDots + '" target="_blank" data-lightbox="' + lightbox + '">' +
<img alt="' + title + '" src="' + link + self.options.thumbnailSize +'.jpg"/>' +
'<div class="hover-box">' +
'<p>' + descArr[i] + '</p>' +
'<button class="box-button view">View larger</button>' +
'<button class="box-button request">Request</button>' +
'</div>';
'</a>' +
'</li>';
}
Getting the title is fine and I've checked by API string calls and they work in the address bar of my browser.
I've used console.log() and the array is printed out correctly and I'm getting the descriptions. However, in each <p> tag the script is returning undefined in each instance.
However, if I run the script through the debugger the parapgraph tags are populated with the descriptions. Can somebody help?!
i think the problem is in following code::
..
$.getJSON(description, function(desc) {
value = desc.photo[ i ].description._content;
});
the service url returns photo object whereas you are using photo array, change to:
..
$.getJSON(description, function(desc) {
value = desc.photo.description._content;
console.log( value );
});
I'm trying to write code that will display a grid when a link is clicked, and I managed to get the link display, but failing to get grid displayed at the bottom of the page. Thanks for your help.
*
export function setCustomLinkContent(divId: string, field: propertybox.Field) {
var container = $('#' + divId);
container.height(70);
container.width(260);
container.append("<p><a target='_blank' href=\"http://localhost\">View all works</a></p>");
this.container.prepareGridContainer();
var gridContainer = $("#" + this.container);
var gridContHeight = gridContainer.height() - 27 - 43;
var workHtml =
"<div id='" + this.workContainer + "-heading' class='orm-table-title'>" +
"<label>" + this.headerLabel + "</label>" +
"</div>" +
"<div id='" + this.workContainer + "-table' class='map-work-grid' style='height: " + gridContHeight + "px'>" +
"<table style='margin: 0 auto; width: 100%; overflow-x: auto'>" +
"<thead>" +
"<tr id='" + this.tableHeader + "'></tr>" +
"</thead>" +
"<tbody id='" + this.tableBody + "'></tbody>" +
"</table>" +
"</div>";
gridContainer.append(workHtml);
}
*
Very likely you have the wrong this. Since your function is not a part of a class this doesn't seem to make sense here.
More about this: https://www.youtube.com/watch?v=tvocUcbCupA&hd=1
I have a few <div data-role="collapsible">...</div>in my page (I don't use a collapsible set because I want the possibility to open several at once) and then I remove them and create a few new ones with Javascript. Now I want them to have the jQuery Mobile Styling, but whatever I do, they won't refresh. I tried:
$("parentdiv").refresh();
$("parentdiv").trigger("create");
$(".ui-collapsible").refresh();
$(".ui-collapsible").trigger("create");
I even put a collapsible-set around each one and tried to do the refresh with this (described in the jQuery Mobile Documentation)
I add the new divs with $("<div data-role="collapsible">...</div>").insertBefore("#foo");
What is the proper way to do it? And is the content getting displayed in jQuery Mobile style, too, after the refresh?
UPDATE
The content of the collapsible was not refreshed here is my code:
var newColla = "<div id=\"colla" + i + "\" data-role=\"collapsible\" data-collapsed=\"true\" data-collapsed-icon=\"minus\" data-expanded-icon=\"bars\">" +
"<h3 id=\"" + matrikelnummer + "\">" + matrikelnummer + " " + studentName + "</h3><div class=\"colla-content\">" +
"<div data-role=\"fieldcontain\" style=\"margin:0px;width:100%;text-align:right;\">" +
"Teilnehmer bearbeiten" +
"Teilnehmer löschen" +
"</div>";
// Für jede ausgewählte Aufgabe einen Slider hinzufügen
for (var j = 0; j < aufgaben.length; j++) {
newColla += "<label for=\"slider_mini\">Aufgabe " + aufgaben[j] + ": (max." + allMaxPoints[j] + "Pkt.)</label>" +
"<input type=\"range\" name=\"slider_mini_" + matrikelnummer + "_" + aufgaben[j] +"\" class=\"slider-mini allSliders\" id=\"slider_mini_" + matrikelnummer + "_" + aufgaben[j] + "\" " + theme + " step= 0.5 value=\"0\"" +
"min=\"0.0\" max=\"" + allMaxPoints[j] + "\" data-highlight=\"true\" data-mini=\"true\" />";
}
newColla += "</div></div>";
$(newColla).collapsible().trigger("create").insertAfter("#timer");
All you need is to use .collapsible(), there is no refresh method for collapsible widget.
$(document).on("pageinit", function () {
var collapsible = '<div data-role="collapsible"><h3>Heading</h3><p>Contents</p></div>';
$("[data-role=content]").append($(collapsible).collapsible());
});
Demo
Try this one:
$( ".selector" ).collapsibleset( "refresh" );
I have a link that when clicked uses .replaceWith to fill a div with html code for a .swf file. Below is an example:
$().ready(function() {
$('a.roots').click(function() {
$('#flashcontent').replaceWith( "<div id=\"flashcontent\">" +
"<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"463\" height=\"490\" id=\"FlashID1\" title=\"Liberty Creative Solutions roots\">" +
"<param name=\"movie\" value=\"flash/roots.swf\" />" +
"<param name=\"quality\" value=\"high\" />" +
"<param name=\"wmode\" value=\"opaque\" />" +
"<param name=\"BGCOLOR\" value=\"#394A59\" />" +
"<param name=\"swfversion\" value=\"6.0.65.0\" />" +
"<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +
"<object type=\"application/x-shockwave-flash\" data=\"flash/roots.swf\" width=\"463\" height=\"490\">" +
"<param name=\"quality\" value=\"high\" />" +
"<param name=\"wmode\" value=\"opaque\" />" +
"<param name=\"BGCOLOR\" value=\"#394A59\" />" +
"<param name=\"swfversion\" value=\"6.0.65.0\" />" +
"<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +
"<div>" +
"<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>" +
"<p>" + "" +"<img src=\"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif\" alt=\"Get Adobe Flash player\" width=\"112\" height=\"33\" />" + "" + "</p>" +
"</div>" +
"</object>" +
"</object>" +
"</div>" );
}); });
I want the swf html inserted the first time the link is clicked. If it is clicked again I want the div html changed to something else. For example:
$('a.roots).click(function() {
$('#flashcontent').replaceWith( "<div id=\"flashcontent\">" +
"" + "<img src=\"images/nf_roots.jpg\" name=\"Liberty Creative Solutions - Roots\" width=\"463\" height=\"488\" border=\"0\" id=\"Liberty Creative Solutions - Roots\" />" +"" +
"</div>" );
}); });
How do I create a listener to determine if the link has been clicked once and have it then remove the .swf html code and replace it with the new code?
I also thought maybe using cookies to check:
$('a.roots').click(function() {
if($.cookie('rootsclicked') != null) {
$('#flashcontent').replaceWith( "" + "<img src=\"images/nf_roots.jpg\" name=\"Liberty Creative Solutions - Roots\" width=\"463\" height=\"488\" border=\"0\" id=\"Liberty Creative Solutions - Roots\" />" + "" );
}
else {
$('#flashcontent').replaceWith( "<div id=\"flashcontent\">" +
"<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"463\" height=\"490\" id=\"FlashID1\" title=\"Liberty Creative Solutions roots\">" +
"<param name=\"movie\" value=\"flash/roots.swf\" />" +
"<param name=\"quality\" value=\"high\" />" +
"<param name=\"wmode\" value=\"opaque\" />" +
"<param name=\"BGCOLOR\" value=\"#394A59\" />" +
"<param name=\"swfversion\" value=\"6.0.65.0\" />" +
"<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +
"<object type=\"application/x-shockwave-flash\" data=\"flash/roots.swf\" width=\"463\" height=\"490\">" +
"<param name=\"quality\" value=\"high\" />" +
"<param name=\"wmode\" value=\"opaque\" />" +
"<param name=\"BGCOLOR\" value=\"#394A59\" />" +
"<param name=\"swfversion\" value=\"6.0.65.0\" />" +
"<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +
"<div>" +
"<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>" +
"<p>" + "" +"<img src=\"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif\" alt=\"Get Adobe Flash player\" width=\"112\" height=\"33\" />" + "" + "</p>" +
"</div>" +
"</object>" +
"</object>" +
"</div>" );
//and set a cookie named "rootsclicked"
setcookie();
function setCookie(){
document.cookie = 'cookieName=rootsclicked'; expires="1/01/2015 00:00:00";
};
};
});
Would something like this work or am I making it too complicated?
You can use data method to store a value to see if the element was already clicked:
$(function() {
$('a.roots').click(function() {
var alreadyDone = ($(this).data("clicked") == "1");
if(alreadyDone){
$('#flashcontent').replaceWith("<WITH-OTHER-CONTENT>");
} else {
$(this).data("clicked", "1") ;
$('#flashcontent').replaceWith("<WITH-SOME-CONTENT>");
}
});
Use a data object:
$('a.roots').click(function()
{
if($(this).data('clicked') === true)
{
// do something else
}
else
{
$(this).data('clicked',true);
// do normal thing
}
});