Develop Reference

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!

Compiling in controller returns empty html without data in it

I am working on angular. I was trying to compile an HTML, but at the end, it only returns an empty HTML structure without any data in it. but when I console.log "element[0]". I am able to see the required HTML.
How to return the HTML with data in it.
function IpHtml(key) {
var tooltipScope = $scope.$new(false); // inherit from parent, so we can use 'iptraffic.category' for header
tooltipScope.key = key;
var html = '<div class="toolTipTraffic">' +
'<div class="head">' +
' <b ng-bind="iptraffic.category"></b>' +
'</div>' +
' <hr>' +
' <table class="table toottipTableTraffic">' +
' <tr ng-repeat="vals in key">' + // ng-repeat here
' <td>IP</td>' +
' <td>' + ': {{vals}}' + '</td>' +
' </tr>' +
' </table>' +
'</div>';
var element = $compile(html)(tooltipScope);
console.log(element[0])
return element[0].outerHTML
}

How to handle attribute with # in its name

I am facing to problem with Elasticsearch result which is using # in attribute name. Snippet of json result:
{"_index":"logs-2015.12.31","_type":"log","_id":"AVH4eA4QKV0mbJuiIHO1","_score":null,"_source":{"#timestamp":"2015-12-31T14:36:35.378Z","beat":{"hostname":"
I need to interpret its value into jquery code. See the code snippet:
case item._index.startsWith('logs-'):
$('#results-list').append( '<a href="details.jsp?id=' + item._id + '" target="_blank" class="list-group-item">'
+ '<span class="label label-info">' + item._type + '</span>'
+ '<h4 class="list-group-item-heading">' + item._source.source + '</h4>'
+ '<p class="list-group-item-text">' + item._source.#timestamp + ' - ' + item._source.beat.name + '</p>'
+ '<p class="list-group-item-text">' + item._source.message + '</p>'
+ '</a>'
How to handle the attribute if I cannot change the source?

The # character cannot be used in a literal property name, hence you need to use array notation to access it:
item._source['#timestamp']

Jquery / Javascript: There is a NaN on my HTML

I am writing an HTML loop using javascript. It will loop through a series of images and display them with additional information. It appears that there is always a NaN showing on the HTML output as shown here.
Here is the javascript in question:
var caption = '<p></p>';
if($.isEmptyObject(data[i].caption) !== true)
{
caption = '<p class="caption" style="top:'+data[i].height+'px;">'+
data[i].caption +
'</p>';
}
var li = '<li data-uk-modal="{target:#modal-open-image}"'
+ 'class="open"'
+ 'image="'+ data[i].photo +'"'
+ 'caption_height="'+ data[i].height +'"'
+ 'caption="'+ data[i].caption +'">'
+ '<a href="#" class="uk-thumbnail uk-overlay-toggle">'
+ '<div class="uk-overlay">'
+ '<img src="'+ data[i].photo +'" width="250px"/>'
+ caption +
+ '<div class="uk-overlay-caption">'
+ '<p> Sender: ' + data[i].sender + '</p>'
+ '<p> Date: ' + data[i].date + '</p>'
+ '<p> limit: '+ data[i].limit + '</p>'
+ '<p> counter: ' + data[i].counter + '</p>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</li>';
$photo.append(li);
I would think the problem would lie on the caption variable. the data[i] is an array of from a database query.
I need to check if there is something on the data[i].caption. I tried using length, but that doesn't work, so I check if the object exist. Though I am not sure if that works.
My question, is how to display properly check if the caption is empty, and if none it will not add anything on the var li.
Thanks.

You can code it in one line:
( (data && data[i] && data[i].caption) ? " your stuff " : "")
But pay attention that checking 'data[i].caption' in javascript means that: zero is false, empty string is false.
Furthermore if you referring a number you can add a condition using the method isNaN

Please use this one in place of the '+ caption +'
isNaN(data[i].caption) ? '' : data[i].caption
or if(isNaN(data[i].caption)==true){
//do somthing
}else{
//do somthing
}

Thanks for the feedback. I manage to gobble up the solutions you game me and I ended up with this.
var height = (data[i].height == null)?0:data[i].height;
var caption= (data[i].caption== null)?'':data[i].caption;
var li = '<li data-uk-modal="{target:\'#modal-open-image\'}"'
+ 'class="open"'
+ 'image="'+ data[i].photo +'"'
+ 'caption_height="'+ height +'"'
+ 'caption="'+ caption +'">'
+ '<a href="#" class="uk-thumbnail uk-overlay-toggle">'
+ '<div class="uk-overlay">'
+ '<img src="'+ data[i].photo +'" width="250px"/>'
+ '<p class="caption" style="top:' + height +'px;">'
+ caption
+ '</p>'
+ '<div class="uk-thumbnail-caption">'
+ '<p> Sender: ' + data[i].sender + '</p>'
+ '<p> Reciever: '+ data[i].reciever + '</p>'
+ '<p> Date: ' + data[i].date + '</p>'
+ '<p> limit: '+ data[i].limit + '</p>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</li>';

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

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