jQuery Mobile refresh collapsible - javascript

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" );

Related

Problems with broken image icon

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?

jQuery adding a div after a generated table

I am sure i have the right logic here and tried after and insertafter but does not seem to work... any ideas?
JS:
if(content) {
var $table = $('<table/>');
$table.addClass('product-table');
$table.append(
'<tr><td><img src="' + content[0].image + '" class="thumbnail"/></td>' +
'<td><strong>' + content[0].title + '</strong></td>' +
'<td>SKU: ' + content[0].sku + '</td>' +
'<td>£' + content[0].price + '</td></tr>'
);
$table.after('<div class="button-container">' +
'view cart' +
'checkout' +
'</div>');
$(notice_content).find(notice_inner).html($table);
}
after method requires that the target element ($table) be in DOM - which it isn't until next statement with .html method.
Just move line with after call after the line with html call:
$(notice_content).find(notice_inner).html($table);
$table.after('<div class="button-container">view cartcheckout</div>');
Useful references:
http://api.jquery.com/after

Retrieve Flickr photo title AND description using jQuery

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 );
});

Display a grid from a clicked link using typescript

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

Creating dynamic html with json taking too much time

I am working on preparing some dynamic html with jquery and json object. but the problem is that when my json object has around 1500 rows it takes ages to load.
is there a way to load the thing faster.
Some code.
$(jQuery.each(jsonObject.AvailableColumns, function (i, l) {
if (type == "manual") {
innerList1 += '<li newText="" valueFormat="' + l.ValueFormat + '" scaleID="' + l.ScaleID + '" scaleType="' + l.ScaleType + '" hasWeights="' + l.HasWeights + '" customColumnType="' + l.CustomColumnType + '" class="" id="li_' + controlId + '"><span id="span_' + controlId + '" title = "' + l.QuestionText + '">' + getDisplayString(l.QuestionText) + '</span><a class="actionLeft"></a></li>';
}
else if (type = "exportall") {
innerList2 += CreateLiWithSpans('li_' + controlId, l.QuestionText, true, false, l.ScaleID, l.ScaleType, l.HasWeights, l.CustomColumnType, l.ValueFormat);
}
controlId++;
}));
$("#itemList").html(innerlist1);
EDIT : createliwithspan method
function CreateLiWithSpans(id, html, isLeft, isAddAll, scaleID, scaleType, hasWeights, customColumnType, valueFormat, newText) {
var ancClass = isLeft ? 'actionRight' : 'actionLeft';
var liObject = "";
if (newText == null) {
newText = "";
}
if (isLeft) {
liObject = '<li newtext="' + newText + '" valueFormat="' + valueFormat + '" scaleID="' + scaleID + '" scaleType="' + scaleType + '" hasWeights="' + hasWeights + '" customColumnType="' + customColumnType + '" class="" id="' + id + '"><span id="span_' + id + '" title = "' + html + '">' + getDisplayString(html) + '</span><span style="margin:0 10px 0 20px;pagging:0"><input title = "' + (newText == "" ? html : newText) + '" type="text" id="' + id + 'displayText" value="' + (newText == "" ? html : newText) + '" /><span style="color:Red; width:100%;" id="' + id + 'displayTextError"></span></span><span style="float:left">' + CreateDropDown('ddl_' + id, valueFormat, hasWeights) + '</span><a class="' + ancClass + '"></a></li>';
}
else {
liObject = '<li newtext="' + newText + '" valueFormat="' + valueFormat + '" scaleID="' + scaleID + '" scaleType="' + scaleType + '" hasWeights="' + hasWeights + '" customColumnType="' + customColumnType + '" class="" id="' + id + '"><span id="span_' + id + '" title = "' + html + '">' + getDisplayString(html) + '</span><a class="' + ancClass + '"></a></li>';
}
return liObject;
}
You can use for loop instead of jQuery.each, that will be faster. Store the itemCount before the loop, and use that:
itemCount = jsonData.items.length;
for(var i = 0; i < itemCount; i++ ) {
...
You can also use use an array instead of string concatenation, like so:
var innerList = [];
... // inside the loop
innerList.push(CreateLiWithSpans('li_' + controlId, l.QuestionText, true, false, l.ScaleID, l.ScaleType, l.HasWeights, l.CustomColumnType, l.ValueFormat));
... // after the loop
$("#itemList").html(innerList.join(''));
This will be faster in IE, I'm not sure about other js engines.
These two methods will not make a significant difference, so you should try implementing a client side pagination from json. (Not by hiding and showing divs, by rendering only visible page into the DOM).
Instead of waiting for the loop to end to append your data, why not actively append the data as you process it. This will allow the user to get immediate feedback instead of waiting for the whole thing to process. Other than this, I'd stick with my original comment to page the data.
$(jQuery.each(jsonObject.AvailableColumns, function (i, l) {
if (type == "manual") {
$("#itemList").append( '<li newText="" valueFormat="' + l.ValueFormat + '" scaleID="' + l.ScaleID + '" scaleType="' + l.ScaleType + '" hasWeights="' + l.HasWeights + '" customColumnType="' + l.CustomColumnType + '" class="" id="li_' + controlId + '"><span id="span_' + controlId + '" title = "' + l.QuestionText + '">' + getDisplayString(l.QuestionText) + '</span><a class="actionLeft"></a></li>');
}
else if (type = "exportall") {
$("#itemList2").append(CreateLiWithSpans('li_' + controlId, l.QuestionText, true, false, l.ScaleID, l.ScaleType, l.HasWeights, l.CustomColumnType, l.ValueFormat));
}
controlId++;
}));
Try replacing jQuery.each with a plain old for...in loop. Using jQuery.each adds overhead that you don't need.
Don't concatenate strings inside your loop. Instead, .push them onto an array variable and use .join('') to build the string all at once at the end.
You may need to eliminate CreateLiWithSpans as a separate function in order to fully implement (2).
Changing from using jQuery.each to a standard javascript for loop should speed it up a bit. Make sure that you save the length to a variable like this though:
for(var i = 0, len = jsonObject.AvailableColumns.length; i < len; i++){
var l = jsonObject.AvailableColumns[i];
// Continue with rest of code
}
Probably won't be a huge increase but every little helps.
Also try lowering the number of function calls you make as these have added overhead (not usually an issue, but in a large loop it can help). Unless the code is shared between functions try doing it inline and see how much that speeds it up.

Categories

Resources