Develop Reference

Add and remove 'table' in a specific part of the HTML

I am working on my code still 3 hours to achieve an add / remove of HTML over Javascript. But even that, I was not able it. I did find some solutions on the internet, but they are much easier, like adding the text in the end of a div.
In my case, I would like to add a table element in on a specific part of the HTML, and remove this table element if the Remove button is clicked.
I hope you can help me..
Here is my HTML:
<div class="col-xl border-left border-dark">
<div class="row">
<div class="col-md-12">
<!-- *** Table number 1 *** -->
<table class="table table-bordered">
<!-- MORE HTML CODE -->
<a class="btn" role="button" id="JS_ADD_THIS_ENTRY">Add HTML below...</a>
</table>
<!-- *** Table number 1 *** -->
<!-- ********** INPUT FROM Javascript, if clicking on ADD ********** -->
<!-- this templated below should be appended here after clicking on ADD button -->
<table class="JS_ADD_THIS_ENTRY table table-bordered">
<div class="row">
<div class="col-auto justify-content-around d-flex flex-column border">
<a class="JS_REMOVE_THIS_ENTRY btn btn-danger" role="button">Remove</a>
</div>
<div class="col border">
<B>Title</B><br />
<hr class="my-1">
Name
</div>
</div>
</table>
<!-- ********** INPUT FROM Javascript, if clicking on ADD ********** -->
<!-- *** Table number 3 *** -->
<table class="table table-bordered">
<!-- MORE HTML CODE -->
</table>
<!-- *** Table number 3 *** -->
</div>
</div>
</div>
Here is my JS:
$(document).ready(function () {
var counter = 0;
$("#JS_ADD_THIS_ENTRY").on("click", function () {
var newEntryRow = $("<table>");
var buildHTML = "";
buildHTML += '<table class="YT_URL_AddRow_Element table table-bordered id="' + counter '">';
buildHTML += '<div class="row">';
buildHTML += '<div class="col-auto justify-content-around d-flex flex-column border">';
buildHTML += '<a class="btn btn-danger" role="button">Remove</a>';
buildHTML += '</div>';
buildHTML += '<div class="col border">';
buildHTML += '<B>Title</B><br />';
buildHTML += '<hr class="my-1">';
buildHTML += 'Name';
buildHTML += '</div>';
buildHTML += '</div>';
buildHTML += '</table>';
newEntryRow.append(buildHTML);
$("table.table-bordered").append(newEntryRow);
counter++;
});
$("table.table-bordered").on("click", ".JS_REMOVE_THIS_ENTRY", function (event) {
$(this).closest("table").remove();
counter -= 1
});
});

How i can do a modal with picture

I ask a question about my function Javascript.
I recover a data list after an a ajax call.
In the list i have a field with a picture and i want show this in a modal bootstrap.
In my code the picture is displayed below the column.
Thanks in advance guys :)
$.when(promiseListeRubriqueDocument).then(function(result) {
var data = JSON.parse(result);
$(".listRubrique").html("");
$.each(data, function(index, item) {
console.log(item);
var rubTemplate = $(".template");
var modal = (".img");
var rub = $(rubTemplate).clone().removeClass("template").removeClass("hide");
$(rub).find(".labelRubrique").text(item.codeRubrique);
$(rub).find(".inputRubrique").val(item.libelleRubrique);
$(rub).find("div.rubrique-image").attr("data-rubrique-id", item.idRub);
$(rub).find("div.rubrique-image[data-rubrique-id=" + item.idRub + "]").click(function(i, element) {
if (item.imageRubrique) {
if ($("" + "[data-rubrique-id=" + item.idRub + "]").find('img.rubrique-exemple').length < 1) {
$("" + "[data-rubrique-id=" + item.idRub + "]").append("<div><img class='rubrique-exemple' src=" + item.imageRubrique + " width='100px' /></div>");
}
}
});
$(".listRubrique").append(rub);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="list-group-item template hide">
<label class="labelRubrique" style="font-weight:bold"></label>
<div class="row rubrique-image" data-rubrique-id="">
<div class="col-md-8">
<input name="enteteRubrique" id="enteteRubrique" maxlength="255" type="text" class="form-control aveo-icon aveo-magnifier inputRubrique" disabled/>
</div>
<div class="col-md-3">
<a class="seeImage" href="javascript:void(0);" role='button' aria-expanded='false' aria-controls='collapseExample'><span class='glyphicon glyphicon-eye-open fa-lg'></span></a>
</div>
</div>
</li>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<liferay-ui: messagekey="admin.gestion.documents.rubriques.disponibles" />
</div>
<div class="panel-body">
<ul class="list-group listRubrique">
</ul>
</div>
</div>
</div>
</div>

"Lightbox" is the common name for what you've described. Since you mentioned a modal bootstrap, something like http://jbutz.github.io/bootstrap-lightbox/ is likely to be aligned with your goals.

simply clone your "field" div, give it id then append to a bootstrap modal body. Or to avoid appending new clone everytime: use .html() instead.
from https://www.w3schools.com/bootstrap/bootstrap_modal.asp with modification, using bootstrap 3.3.7, jquery 3.3.1
<body>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id='myColumn'>
<img src="https://via.placeholder.com/350x150"/>
<p>Some text in the modal.</p>
</div>
</div>
<script>
$(document).ready(function(){
// var field = $("" + "[data-rubrique-id=" + item.idRub + "]").clone();
var fieldtest= $('#myColumn').clone();
var modal = $("<div id='myModal' class='modal'>\
<div class='modal-dialog'>\
<div class='modal-content'>\
<div id='myBody' class='modal-body'>\
</div>\
</div>\
</div>\
</div>").appendTo('body');
// $('#myBody').html(field);
$('#myBody').html(fieldtest);
});
</script>
</body>
`

Array sort before looping not keep the array sort

I have this code who simply create a array with html element and loop for parse the sort array.
$('document').ready(function(){
var arrElementStyle = [];
$('.bands-alphabetique [id*="band-style-"]').each(function(index){
var style = $(this).attr('id').split('-')[2];
arrElementStyle[style + '-' + index ] = $(this).find('.element');
});
arrElementStyle.sort();
$('.bands-alphabetique').hide();
for(style in arrElementStyle){
$('.large-centered.col-md-12.clearfix').append(arrElementStyle[style]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-centered col-md-12 clearfix">
<div class="bands-alphabetique">
<div class="col-md-3" id="band-style-rock">
<div class="element">
<h1 class="band-style-title">Rock</h1>
Fiction In Motion
</div>
</div>
<div class="col-md-3" id="band-style-pop">
<div class="element">
<h1 class="band-style-title">Pop</h1>
Marianas Trench
</div>
</div>
<div class="col-md-3" id="band-style-pop">
<div class="element">
<h1 class="band-style-title">Alternatif</h1>
Anberlin
</div>
</div>
</div>
</div>
When I parse the html the result is not sort?(I want sort by style of music) Why? Want should I do.

in your code you declared arrElementStyle as an array, but later you used it as an associative array for inserting data. So it is better to declare arrElementStyle as an object for this.
Here is an example demo of what I think you wanted to achieve with the help of sort() for sorting the objects keys:
$('document').ready(function() {
var arrElementStyle = {}; // declare arrEleemntStyle as object
$('.bands-alphabetique [id*="band-style-"]').each(function(index) {
var style = $(this).attr('id').split('-')[2];
// push into object of key <style>-<index> the elements
arrElementStyle[style + '-' + index] = $(this).find('.element');
});
// get the keys of arrElementStyle for sorting
var keys = Object.keys(arrElementStyle),
i, len = keys.length;
console.log('before = ', keys);
keys.sort(); // sort the object keys
console.log('after = ', keys);
$('.bands-alphabetique').hide();
// iterate the sorted keys and append it
for (i = 0; i < len; i++) {
var k = keys[i];
$('.large-centered.col-md-12.clearfix').append(arrElementStyle[k]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-centered col-md-12 clearfix">
<div class="bands-alphabetique">
<div class="col-md-3" id="band-style-rock">
<div class="element">
<h1 class="band-style-title">Rock</h1>
Fiction In Motion
</div>
</div>
<div class="col-md-3" id="band-style-pop">
<div class="element">
<h1 class="band-style-title">Pop</h1>
Marianas Trench
</div>
</div>
<div class="col-md-3" id="band-style-pop">
<div class="element">
<h1 class="band-style-title">Alternatif</h1>
Anberlin
</div>
</div>
</div>
</div>

Issue is you're trying to sort an object.. not an array. So let's use an object and sort it's keys.
$('document').ready(function() {
// here's the issue I was saying about
var elements = {};
$('.bands-alphabetique').hide().find('[id*="band-style-"]').each( function( index ) {
elements[ $(this).attr('id').split('-')[2] + '-' + index ] = $(this).find('.element');
});
var styles = Object.keys(elements);
styles.sort();
styles.forEach(function(style) {
$('.large-centered.col-md-12.clearfix').append(elements[style]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-centered col-md-12 clearfix">
<div class="bands-alphabetique">
<div class="col-md-3" id="band-style-rock">
<div class="element">
<h1 class="band-style-title">Rock</h1>
Fiction In Motion
</div>
</div>
<div class="col-md-3" id="band-style-pop">
<div class="element">
<h1 class="band-style-title">Alternatif</h1>
Anberlin
</div>
</div>
<div class="col-md-3" id="band-style-pop">
<div class="element">
<h1 class="band-style-title">Pop</h1>
Marianas Trench
</div>
</div>
</div>
</div>

The problem is that you're not sorting an array. You have an object with different properties (style + '-' + index).
In other words, associative array does not exists in Javascript. What you really had was an object arrElementStyle with many properties.
$('document').ready(function(){
var arrElementStyle = [];
$('.bands-alphabetique [id*="band-style-"]').each(function(index){
var style = $(this).attr('id').split('-')[2];
arrElementStyle[index] = $(this).find('.element');
arrElementStyle[index].bandStyle = $(this).find('.band-style-title')[0].innerHTML;
});
arrElementStyle.sort(function(elementA, elementB){
return elementA.bandStyle > elementB.bandStyle;
});
$('.bands-alphabetique').hide();
for(style in arrElementStyle){
$('.large-centered.col-md-12.clearfix').append(arrElementStyle[style]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-centered col-md-12 clearfix">
<div class="bands-alphabetique">
<div class="col-md-3" id="band-style-rock">
<div class="element">
<h1 class="band-style-title">Rock</h1>
Fiction In Motion
</div>
</div>
<div class="col-md-3" id="band-style-pop">
<div class="element">
<h1 class="band-style-title">Pop</h1>
Marianas Trench
</div>
</div>
<div class="col-md-3" id="band-style-pop">
<div class="element">
<h1 class="band-style-title">Alternatif</h1>
Anberlin
</div>
</div>
</div>
</div>

Click on hidden element Selenium webdriver(javascript)

<tr id="mytr">
<td id="Table" onmouseover="this.className='menulevel1hl';" onmouseout="this.className='menulevel1norm'" class="menulevel1norm" onclick="PopupWin('Left',divMenu2011,this,'.menuitempopuprownormal','.menuitempopuprowhighlight','','.menuitempopupscroll' Alerts&nbsp </td>
<div id=" divMenu2011 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/exception.search' ; "> Alert Search</DIV>
</div>
<td id="Table " onmouseover="this.className='menulevel1hl' ; " onmouseout="this.className='menulevel1norm' " class="menulevel1norm " onclick="PopupWin( 'Left',divMenu2012,this, '.menuitempopuprownormal', '.menuitempopuprowhighlight', '', '.menuitempopupscroll'); "> Inventory </td>
<div id="divMenu2012 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/inventoryaudit.search' ; "> Inventory Audits</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/inventory.detail?CurrentDetailViewID=YIMD080' ; "> Adjust Inventory</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/itemsupsearch.search' ; "> Item Suppression Console</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/additemsuppression.detail?CurrentDetailViewID=TGTOMSSCFD008' ; "> Add Item Suppression</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/ProtectItem.detail?CurrentDetailViewID=TGTPID001' ; "> Add Protected Qty</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/ProtectItem.search' ; "> Protected Qty Console </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/ProtectItemAudit.search' ; "> Protected Qty Audit Console </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/MCAFeeds.detail?CurrentDetailViewID=A001' ; "> Upload MCA Store Feed </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/MCAFeeds.detail?CurrentDetailViewID=A002' ; "> Upload MCA Item Feed </DIV>
</div>
<td id="Table " onmouseover="this.className='menulevel1hl' ; " onmouseout="this.className='menulevel1norm' " class="menulevel1norm " onclick="PopupWin( 'Left',divMenu2013,this, '.menuitempopuprownormal', '.menuitempopuprowhighlight', '', '.menuitempopupscroll'); "> RTAM Exclusion </td>
<div id="divMenu201404150720371518959 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D002' ; "> RTAM Exclusion </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=001' ; "> Start RTAM Exclusion </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D004' ; "> Remove Excluded Items </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D003' ; "> Enter Exclusion Removal </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D009' ; "> Schedule RTAMExclusion </DIV>
</div>
<td id="Table " onmouseover="this.className='menulevel1hl' ; " onmouseout="this.className='menulevel1norm' " class="menulevel1norm " onclick="PopupWin( 'Left',divMenu2014,this, '.menuitempopuprownormal', '.menuitempopuprowhighlight', '', '.menuitempopupscroll'); "> Sales Order </td>
<div id="divMenu2014 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/order.search' ; "> Sales Order Console </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/shipment.search' ; "> Outbound Shipment Console</DIV>
</div>
I am trying to click on Ship Order Console. Please find the code below
WebElement ele1 = driver.findElement(By.xpath("//tr[#id='mytr']/td[4]"));
ele1.click();
WebElement ele = driver.findElement(By.xpath("//div[#id='divMenu2014']/div[1]"));
String js = "arguments[0].style.height='auto'; arguments[0].style.visibility='visible';";
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript(js, ele);
System.out.println("element is " + ele.getText());
ele.click();
When I am printing the ele.gettext(), I am getting "sales order console", but when I am trying to click on it it is moving to inventory tab.
Could any one point out where it is going wrong?

Check this link to set attribute to web element,
How to use javascript to set attribute of selected web element using selenium Webdriver using java?
Alternatively, you can click using Javascript without making it visible. I have used CSS selector for your element.
executor.executeScript("$(\"div#divMenu2014>div\").click();");

Bootstrap collapse cookies not working

Everytime I clicked on the "collapse" button, it worked but after its refreshed, it doesn't save its state. For example when I collapse a panel and refresh the page, then the panel is left open.
P.S the {$forum['fid']} represents a forum number, which is automatically generated through templates
HTML
<div class="panel panel-default" id="forum">
<div class="panel-heading"><h3 class="panel-title">{$forum['name']}</h3><span class="pull-right">Toggle</span></div>
<div id="forumlist{$forum['fid']}" class="panel-collapse collapse in">
<div class="panel-body panel-default">
<div class="panel panel-default" style="margin-bottom: 0px;border:1px solid #2b2b2b;">
<table class="table table-hover">
<tbody>
{$sub_forums}
</tbody>
</table>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
//when a group is shown, save it as the active accordion group
$("#forum").on('shown.bs.collapse', function () {
var active = $("#forum .in").attr('id');
$.cookie('activeForumGroup', active);
// alert(active);
});
$("#forum").on('hidden.bs.collapse', function () {
$.removeCookie('activeForumGroup');
});
var last = $.cookie('activeForumGroup');
if (last != null) {
//remove default collapse settings
$("#forum .panel-collapse").removeClass('in');
//show the account_last visible group
$("#" + last).addClass("in");
}
});

This may be missing
<div class="panel-group" id="forum">
<div class="panel panel-default">
changing the ID of each other