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!

Not able to bind value to tooltip using replaceWith()

I have used jQuery .replaceWith() to insert new DOM contents. All the contents are getting replaced but the value of title does not bind.
I have tried the below code but the tooltip only shows {{descriptions.title}} instead of the text that's supposed to be shown.
Here is my code:
$scope.showDescription = function(descriptions) {
$("#description").find('span#header').replaceWith("<span id='header' class='mleft' title='{{descriptions.title}}'>" + descriptions.name + " - " + descriptions.title + "</span>");
}
I expect the tooltip to display descriptions.title value instead of just {{descriptions.title}}

You only add the string {{description.title}} as your title, you need to add the variable itself:
$scope.showDescription = function(descriptions) {
$("#description").find('span#header').replaceWith("<span id='header' class='mleft' title='" + description.title + "'>" + descriptions.name + " - " + descriptions.title + "</span>");
}
Edit:
A in my opinion better approach would be to not use replaceWith here but just to change the desired attributes:
$scope.showDescription = function(descriptions) {
$("#description").find('span#header').attr("title",description.title).html(descriptions.name + descriptions.title);
}
That way you can change the html itself and don't need to adapt the JS.

You need to concatenate it in - that's not an Angular variable, it's just normal JS:
$scope.showDescription = function(descriptions) {
$("#description").find('span#header').replaceWith("<span id='header' class='mleft' title='" + descriptions.title + "'>" + descriptions.name + " - " + descriptions.title + "</span>");
}
Or just use template strings (ES6):
$scope.showDescription = function(descriptions) {
$("#description").find('span#header').replaceWith(`<span id='header' class='mleft' title='${descriptions.title}'>${descriptions.name} - ${descriptions.title}</span>`);
}

You can try this. Its working fine
$("#description").find('span#header')
.replaceWith("<span id='header' class='mleft' title="+ descriptions.title+">" + descriptions.name + " - " + descriptions.title + "</span>");

How send 2 variable to JavaScript Function from Onclick event in Same JavaScript file

I am calling a JavaScript Function inside the same Javascript file on OnClick. right now I am sending 1 variable to that method, I need to send 2 variable. Any Syntax that I am trying is not working.
That is my call:
headerDiv.innerHTML += "<div id='sort' data-sort='false'><a onClick= SortData('" + header + "')>" + header + '↓' + "</a></div>";
I need to send ascSort as well.
this is my JavaScript function:
function SortData(header, ascSort) {
...
}

Kinda hard to answer without knowing exactly what ascSort represents, but in case it's a string, it should do the work:
headerDiv.innerHTML +=
"<div id='sort' data-sort='false'>" +
"<a onClick=\"return SortData('" + header + "',"' + ascSort + '")>"
+ header + '↓' + "</a></div>";
And in case it's not, just remove the apostrophe around the ascSort, like this:
headerDiv.innerHTML +=
"<div id='sort' data-sort='false'>" +
"<a onClick=\"return SortData('" + header + "'," + ascSort + ")>"
+ header + '↓' + "</a></div>";

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

Passing id from element via ng-click

I'm constructing quite a big <span> - element that is being generated dynamically in code.
var span = '<span id="' + dayNumber + '/' + Number(currentMonth + 1) + "/" + Number(date.getFullYear()) + '" class="day ' + respons[0] + '" ng-click="gotoDetail($event)" style="height:' + screenHeigt + 'px; display:table;"><p style="display:table-cell; vertical-align:middle;">' + dayNumber + ' </p></span>';
As you can see, the id consist of a date-string. Via the ng-click-element I would like to pass the id to the gotoDetail($event)-function. When I'm inspecting the parameter of that function, I see however that $event.target.id is empty...
Following code is an older version and does work:
var span = '<span id="' + dayNumber + '/' + currentMonth + '" class="day ' + respons[0] + ' ' + lastMonth + ' " ng-click="gotoDetail($event)">' + dayNumber + '</span>' + string;
I really don't know what I'm doing wrong in the first example...
If I check my html in the chrome-console, there's nothing wrong with the id, the ng-click, or other attributes...
Someone who has an anwser?
EDIT: Code can be found here: https://gist.github.com/anonymous/c29798e0d46f40dcfe69