JQuery Mobile - Appending new dynamic content - CSS not applied [duplicate] - javascript

This question already has an answer here:
.listview() is not a function error when creating a dynamic listview in jquery mobile
(1 answer)
Closed 9 years ago.
This is something that was asked before but I still can't get it to work. I'm adding a dynamic content to a page (a list-view) and the CSS is getting lost after adding it. I read about the trigger("create") and even after adding it, the CSS is not applied.
$('#MyClubsListDiv').append('<ul id=\"MyClubsList\" data-role=\"listview\"></ul>').trigger("create");
for (var i=0; i<MyClubsReply.length; i++)
{
addClub('#MyClubsList',MyClubsReply[i].Name,MyClubsReply[i].LogoImg,MyClubsReply[i].LastUpdate);
$('#MyClubsListDiv').trigger("create");
}
function addClub(section,clubName,logoFile,LastUpdate)
{
$(section).append('<li class=\"ClubListItem\">' +
'<a href=\"#ClubPage\" data-transition=\"slide\">' +
'<img src=\"' + PiccoloServer + 'ClubLogos/' + logoFile + '\" class=\"listview-logo-thumb\" />' +
'<div class=\"ClubListContent\">' +
'<h1 class=\"ClubListH1\">' + clubName + '</h1>' +
'<p >20 Offers Available</p> ' +
'</div>' +
'<p class=\"ui-li-count\">25d</p>' +
'</a>' +
'</li>').trigger("create");
}
"MyClubsReply" is a JSON object.
What am I doing wrong? (Or not doing?)

I have created this jsfiddle for you to understand it.
You have to use trigger("create") on the UL Listview building but on everytime you add a new list item you need to use listview("refresh").
http://jsfiddle.net/eRsMV/
<div id="MyClubsListDiv"></div>
<button id="addClubBtn">Add New Club</button>
$('#MyClubsListDiv').append('<ul id=\"MyClubsList\" data-role=\"listview\"></ul>')
.trigger("create");
$("#addClubBtn").on("click", function () {
$("#MyClubsList").append(
'<li class=\"ClubListItem\">' +
'<a href=\"#ClubPage\" data-transition=\"slide\">' +
'<img src=\"http://si0.twimg.com/profile_images/2366293550/Club_logo_normal.png\" class=\"listview-logo-thumb\" />' +
'<div class=\"ClubListContent\">' +
'<h1 class=\"ClubListH1\">Major Club</h1>' +
'<p>20 Offers Available</p>' +
'</div>' +
'<p class=\"ui-li-count\">25d</p>' +
'</a>' +
'</li>'
).listview("refresh");
});

Related

How can I init accordion in Magento 2 on swatches, on product page

I want to make an accordion for the swatches on the product page.
The switches are built into the file Magento_Swatches/js/swatch-renderer.js
I did a mixin over the _RenderControls function and changed the html structure a bit compared to the original structure.
CODE JS (via mixin)
container.append(
'<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
'attribute-code="' + item.code + '" ' +
'attribute-id="' + item.id + '">' +
label +
'<div class="init-accordion" >' +
'<div data-role="collapsible">' +
'<div class="title-accordion" data-role="trigger">titlu</div>' +
'</div>' +
'<div class="content-accordion" data-role="content">' +
'<div aria-activedescendant="" ' +
'tabindex="0" ' +
'aria-invalid="false" ' +
'aria-required="true" ' +
'role="listbox" ' + listLabel +
'class="' + classes.attributeOptionsWrapper + ' clearfix">' +
options + select +
'</div>' + input +
'</div>' +
'</div>' +
'</div>'
);
I did not put the whole function because it is very long, I only put the part that differs from the original.
I want to initialize an accordion (according to the Magento documentation) on this swatch structure.
The problem is that the accordion does not initialize because the switches are still loaded on the page.
In the template, I would initialize like this
CODE PHTML:
<script>
require(['jquery', 'domReady', 'accordion'], function($, domReady){
domReady(function(){
setTimeout(function(){
$(".init-accordion").accordion({
"active": [1, 2],
"collapsible": true,
"openedState": "active",
"multipleCollapsible": true
});
}, 3000);
});
})
</script>
I used setTimeout and it works, but I want without it.
Do you have any idea how I can do this?
Thank you!

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

Tablesorter with unknown # of columns

I am working with tablesorter and am building a header with the following code:
table.push(['<div class="first"></div>', '<div class="model">Model</div>',
'<div class="third" style="width: ' + ColumnWidth[3] + 'px;">' + ColumnNo[3] + '</div>',
'<div class="fourth" style="width: ' + ColumnWidth[4] + 'px;">' + ColumnNo[4] + ColumnUnit[4] + '</div>',
'<div class="fifth" style="width: ' + ColumnWidth[5] + 'px;">' + ColumnNo[5] + ColumnUnit[5] + '</div>',
'<div class="sixth" style="width: ' + ColumnWidth[6] + 'px;">' + ColumnNo[6] + ColumnUnit[6] + '</div>',
'<div class="seventh" style="width: ' + ColumnWidth[7] + 'px;">' + ColumnNo[7] + ColumnUnit[7] + '</div>',
'<div class="eighth" style="width: ' + ColumnWidth[8] + 'px;">' + ColumnNo[8] + ColumnUnit[8] + '</div>',
'<div class="ninth" style="width: ' + ColumnWidth[9] + 'px;">' + ColumnNo[9] + ColumnUnit[9] + '</div>',
'<div class="tenth" style="width: ' + ColumnWidth[10] + 'px;">' + ColumnNo[10] + ColumnUnit[10] + '</div>',
'<div class="eleventh" style="width: ' + ColumnWidth[11] + 'px;">' + ColumnNo[11] + ColumnUnit[11] + '</div>',
'<div class="twelfth" style="width: ' + ColumnWidth[12] + 'px;">' + ColumnNo[12] + ColumnUnit[12] + '</div>',
'<div class="thirteenth" style="width: ' + ColumnWidth[13] + 'px;">' + ColumnNo[13] + ColumnUnit[13] + '</div>',
'<div class="fourteenth "style="width: ' + ColumnWidth[14] + 'px;">' + ColumnNo[14] + ColumnUnit[14] + '</div>',
'<div class="fifteenth" style="width: ' + ColumnWidth[15] + 'px;">' + ColumnNo[15] + ColumnUnit[15] + '</div>',
'<div class="sixteenth" style="width: ' + ColumnWidth[16] + 'px;">' + ColumnNo[16] + ColumnUnit[16] + '</div>',
'<div class="seventeenth" style="width: ' + ColumnWidth[17] + 'px;">' + ColumnNo[17] + ColumnUnit[17] + '</div>']);
This works like a charm, however, I have no way of knowing how many columns will be needed ahead of time, so I need to build the array 'table' dynamically.
Here is what I have come up with for that:
var tableHeaderVar = [];
tableHeaderVar.push(['<div class="first"></div>']);
tableHeaderVar.push(['<div class="model">Model</div>']);
if (ColumnWidth[3] != 0) {
tableHeaderVar.push(['<div class="third" style="width: ' + ColumnWidth[3] + 'px;">' + ColumnNo[3] + '</div>']);
};
if (ColumnWidth[4] != 0) {
tableHeaderVar.push(['<div class="fourth" style="width: ' + ColumnWidth[4] + 'px;">' + ColumnNo[4] + ColumnUnit[4] + '</div>']);
};
.
.
.
table.push([tableHeaderVar]);
Basically, this checks the set width, which will be 0 if no column is selected. Then, checks the widths for each column to decide whether the column gets included in the array. This code will build the header vertically down the left side of the table, rather than across the top. I captured the output for both methods and used Beyond Compare to compare them. They are compared as "Binary Same", which should mean they are absolutely identical.
First I tried using individual table.push statements, but the results were about the same. I thought maybe the header (and table data) needed to be pushed as a group, so I decided to use one array variable (tableHeaderVar) to build the HTML and then push it all to table at once. Unfortunately, something seems to be not quite right with my method.
Would anyone happen to know something that might work?
Edit
There appears to be no resulting HTML for the datatable in either the working (static # of columns) or non-working (# of columns set on the fly) versions. Here is the HTML placeholder for the table (it is identical in both):
<div id="data-grid" class="datagrid">
<div id="testtable"></div>
</div>
As you can see, it's empty. Here is my tablesorter declaration:
$('#testtable').tablesorter({
theme: 'default',
widthFixed: false,
widgets: ['stickyHeaders'],
widgetOptions: {
build_source: table,
build_headers: {
rows: 1,
classes: [],
text: []
},
build_footers: {
rows: 0
}
}
});
Sure, but it might not be the answer you are looking for.
There are already tools out there for sorting tables so if you get sick of making your own.
Here is one for example.
I believe I have found the answer. The main issue was that when using the tablesorter build table widget, passing an array (in this case used to add the required columns one at a time) into another array (used as the datasource for the build table widget) simply won't work correctly. After comparing the results of the two arrays, I didn't find any differences, but there was something there that was throwing it off. Also, the datasource array cannot be built one value at a time. At least, I didn't have any luck with that.
Here is what I had to do:
var tableHeaderVar = [];
tableHeaderVar.push(['<th><div class="first"></div></th>']);
tableHeaderVar.push(['<th><div class="model">Model</div></th>']);
if (ColumnNo[3] != null) {
tableHeaderVar.push(['<th><div class="third" style="width: ' + ColumnWidth[3] + 'px;">' + ColumnNo[3] + '</div></th>']);
};
if (ColumnNo[4] != null) {
tableHeaderVar.push(['<th><div class="fourth" style="width: ' + ColumnWidth[4] + 'px;">' + ColumnNo[4] + ColumnUnit[4] + '</div></th>']);
};
.
.
.
table = '<thead>' + tableHeaderVar + '</thead>';
So, as you can see, I built an array dynamically to include each column that was needed using the <th> tag. Then, after all the columns were selected, I passed that array into a string variable and enclosed it with the thead tag.
I did something very similar with the table body, except used the <td> tag. As I looped through each datarow, I enclosed each with the <tr> tag. These tags didn't appear to be needed when using an array as the datasource, but when using a string value, they were crucial.

Blogger data tags don't work in javascript

Hy, I have some issues when adding blogger data tags to javascript.
var summary1 = '<div class="firstWrap">' + '<h3 class="post-title entry-title">' + '</h3>' + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>' + '<span class="readmorebutton">' + '<a expr:href="data:post.url">' + 'Read More »' + '</a>' + '</span>' + '</div>' + imgtag;
div.innerHTML = summary1;
}
The code adds the div first wrap the read more button and the summaries but it won't load the h3 and the a expr:href= data doesn't work.
How can I add the blogger data expr:href=... and other blogger code into javascript so that it works.
Thanks
You must define the expr:href="data:post.url" via Javascript variable in separated script tag. Simply like this:
<script type="text/javascript">
var postlink="<data:post.url/>"
</script>
You can place that script before or after your entry-container.
Then, call the variable in your script:
var summary1 = '<div class="firstWrap">' + '<h3 class="post-title entry-title">' + '</h3>' + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>' + '<span class="readmorebutton">' + '' + 'Read More »' + '' + '</span>' + '</div>' + imgtag;
div.innerHTML = summary1;
}
I use this method in my blogger template, and it's works good for me.

Drag and Drop child node to parent node using angular.treeview and angular ui-sortable

Hi Im new to angularjs and im using this treeview directive angular.treeview matched with Angular-ui ui-sortable directive
So i modified angular.treeview.js and added ui-sortable tag to <ul> tag to make it work:
//tree template
var template =
'<ul ui-sortable>' +
'<li data-ng-repeat="node in ' + treeModel + '">' +
'<i class="collapsed" data-ng-show="node.' + nodeChildren + '.length && node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
'<i class="expanded" data-ng-show="node.' + nodeChildren + '.length && !node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
'<i class="normal" data-ng-hide="node.' + nodeChildren + '.length"></i> ' +
'<span data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)">{{node.' + nodeLabel + '}}</span>' +
'<div data-ng-hide="node.collapsed" data-tree-id="' + treeId + '" data-tree-model="node.' + nodeChildren + '" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children=' + nodeChildren + '></div>' +
'</li>' +
'</ul>';
Sample fiddle: http://jsfiddle.net/zg3f9/1/
The problem is that i want the child nodes to be draggable to their parent or other nodes. can you guys help me with this? thanks!
Why not use a library that already supports this? Like angular-ui-tree, or, if you want to use the HTML5 Drag & Drop API, angular-drag-and-drop-lists
My Example:
http://codepen.io/Yizhu/pen/EPLxEW
scope.sortableOptions = {
connectWith: ".apps-container",
update: function(event, ui) {
var index = ui.item.sortable.index;
var dropindex = ui.item.sortable.dropindex;
var dropTargetModel = ui.item.sortable.droptargetModel;
var dragModel = ui.item.sortable.model;
}
};

Categories

Resources