Develop Reference

Can't seem to find the problem for the following error: "Uncaught SyntaxError: missing ) after argument list (at [FileName])"

I am programming an ASP.NET web application. I have a button with an onclick event that triggers a Javascript function with a few parameters.
When I click on the button the following error gets thrown in the browser console:
Uncaught SyntaxError: missing ) after argument list (at BusinessUnit?buLeaderId=18:212:176)
When I click on the link after "at" it marks this part of the code:
<a id="#employee.Id" class="col-2 btn btn-success"
onclick="NewAdGroupDeletionRecord(#adGroup.Name, #employee.FirstName #employee.LastName, false)">
<i class="bi bi-check"></i>
</a>
I can't seem to find anything wrong with it, especially considering that there is a closing bracket after the parameters.
Here is my code:
HTML:
<table id="DataTable" class="table table-hover">
<thead>
<tr style="text-align: left;">
<th>AD Gruppe</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var adGroup in employee.AdGroups)
{
<tr>
<th style="text-align: left;">#adGroup.Name</th>
<th>
<div class="btn-group" role="group" aria-label="Basic example">
<a id="#employee.Id" class="col-2 btn btn-success" onclick="NewAdGroupDeletionRecord(#adGroup.Name, #employee.FirstName #employee.LastName, false)">
<i class="bi bi-check"></i>
</a>
</div>
</th>
</tr>
}
</tbody>
</table>
JS:
<script>
function NewAdGroupDeletionRecord(adGroupName, employeeName, canDelete){
console.log(adGroupName);
console.log(employeeName);
console.log(canDelete);
}
</script>
Thanks in advance for anyone who takes the time to look at my question.

The problem was here: #employee.FirstName #employee.LastName
Adding the lastname as a sepperate parameter fixed the problem.
Edit: also '' has to be added to around each parameter that you want to be treatet as a string.

Bootstrap 3.4.1 sanitizer: allow progress-bar inside a popover

Bootstrap 3.4.1 and 4.3.1 now comes with a sanitizer to perform XSS prevention.
I'm trying to allow all the necessary attributes to render a progress bar inside the popover of an AdminLTE based on bootstrap 3.4.1.
With .popover({sanitize: false}); everything works as expected:
With a custom sanitizer whitelist, as specified on the bootstrap docs, the progress bar is't displayed:
This is the custom whitelist:
var myDefaultWhiteList = $.fn.popover.Constructor.DEFAULTS.whiteList;
myDefaultWhiteList.div = ['role', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax'];
myDefaultWhiteList.span = ['class'];
myDefaultWhiteList.table = ['class'];
myDefaultWhiteList.tbody = [];
myDefaultWhiteList.tr = [];
myDefaultWhiteList.td = ['colspan'];
console.log(myDefaultWhiteList);
$(function () {
$('[data-toggle="popover"]').popover({
whiteList: myDefaultWhiteList
});
});
And this is the content of my popover:
<div class="progress progress-sm active">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="6" aria-valuemin="0"
aria-valuemax="10"
style="width: 60%">
<span class="sr-only">6/10</span>
</div>
</div>
<div class="no-padding">
<table class="table table-condensed therapy-popover-table">
<tbody>
<tr>
<td>Protocollo N°</td>
<td>837-2019PC</td>
</tr>
<tr>
<td>Codice prescrizione</td>
<td>93xxxx1</td>
</tr>
<tr>
<td>Prescrizione</td>
<td><small>IDROCHINESITERAPIA INDIVIDUALE (9xxxx1) (30')</small></td>
</tr>
<tr>
<td>Data evento lesivo</td>
<td>10/09/2019</td>
</tr>
<tr>
<td>Data prescrizione</td>
<td>10/09/2019</td>
</tr>
<tr>
<td>Priorità</td>
<td>Breve</td>
</tr>
<tr>
<td>Tipo prestazione</td>
<td>Privato</td>
</tr>
<tr>
<td colspan="2"><i class="fa fa-share-square"></i> Vai alla prescrizione</td>
</tr>
</tbody>
</table>
</div>
Does anyone experienced a problem with bootstrap sanitizer and custom whitelist?
In my, everything works (tables, colspan attributes, etc...) except the progress bar...

Shit. I forgot the style attribute.
So the right role is:
myDefaultWhiteList.div = ['style'];
because 'role', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax' are already defined in the default whitelist.

JavaScript for each record in my view

I have a VIEW where I display a table with 15 records (15 rows) and 5 columns, but the very thing that matters is a column, "Actions". In it I have 1 button, "Preview", that when clicking, I want to open a window with a message, for tests.
However, only the first record, when clicking the "View" button, displays the message window, the other 14 records do not.
How do I make all records / lines display the message?
Follow the code below:
<table class="table table-bordered table-hover tablesorter">
<thead>
<tr>
<th class="header text-center" style="width: 100px;"> Ações </th>
</tr>
</thead>
<tbody id="tabela">
#foreach (var item in Model)
{
<tr>
<td>
#this.Hidden("IdClient").Value(item.Id)
<a id="visualizarCliente" class="btn btn-primary btn-xs btn-visualizar" data-toggle="tooltip" title="Visualizar" target="_blank"
href="#Url.Action(MVC.Painel.Clientes.Visualizar(item.Id))">
<i class="fa fa-eye"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
<script type="text/javascript">
$(function () {
$("#visualizarCliente").click(function () {
var idCliente = $("#IdClient").val();
window.alert("Teste");
})
});
</script>

The problem is that you are using the id selector and it can not be repeated. Switch to any other selector, such as data-toggle = "tooltip" for example.
<script type="text/javascript">
$(function () {
$("a[data-toggle='tooltip']").click(function () {
window.alert("Teste");
})
});
</script>

The problem is ID which always be used for something UNIQUE. Try to use CLASS instead. Your function should goes something like this one example:
$(function () {
$(".btn-visualizar").click(function () {
var idCliente = $(this).parent().find("#IdClient").val();
window.alert("Teste");
})
});
In the given example the line $(this).parent().find("#IdClient").val(); specifies that this would be it's nearest element value as it should be.

Rails+jQuery: Get the Value of an Item Inside a Table to Use in a Prepend Function

Say I have a table:
<table class="table table-bordered table-hover employes_list_panel">
<thead>
<tr>
<th></th>
<th></th>
<th class="center">Name <i class="fa fa-angle-double-down"></i></th>
<th class="center">IQ <i class="fa fa-angle-double-down"></i></th>
<th class="center">Efficiency <i class="fa fa-angle-double-down"></i></th>
<th class="center">Focus <i class="fa fa-angle-double-down"></i></th>
<th class="center">Happiness <i class="fa fa-angle-double-down"></i></th>
<th class="center">Quality <i class="fa fa-angle-double-down"></i></th>
<th class="center">Salery <i class="fa fa-angle-double-down"></i></th>
</tr>
</thead>
<tbody>
<%Employe.where(company_id: company.id, request: false).each do |employe|%>
<tr>
<td class="center cd-popup-trigger" id="popup3"><i style="color: red;" class="fa fa-close"></i></td>
<td class="center cd-popup-trigger" id="popup4"><i style="color: green;" class="fa fa-arrow-up"></i></td>
<td class="center"><%=employe.name%></td>
<td class="center"><%=employe.iq%></td>
<td class="center"><%=employe.efficiency%></td>
<td class="center"><%=employe.focus%></td>
<td class="center"><%=employe.happiness%></td>
<td class="center"><%=employe.quality.capitalize%></td>
<td class="center"><%=employe.salery%></td>
</tr>
<%end%>
</tbody>
</table>
And I want to get the value of the employe name <%=employe.name%> when popup3 for example is clicked. Note there can be more than one "employe" in the list. How can I get the value of the employe that is on the line where the user clicked the popup, so that I can prepend it using jQuery into the popup <p>.
Ex:
Click to Open Popup | Kevin |...
Click to Open Popup | Sam |...
I need to get the value Sam when I click the "second popup", the
problem is all popups currently have the same id.
Thank you.

Given your code, popup3 (and popup4 for that matter) is gonna be present multiple times on the page (once per tr). You need to give it a class, not an id. I personally like to prefix my JavaScript classes (not used for styling) with js-. In your HTML:
<td class="center cd-popup-trigger js-popup3"><i style="color: red;" class="fa fa-close"></i></td>
You also need to identify the cells which contain the employee name (you'll see why later).
<td class="center js-employee-name"><%= employe.name %></td>
In your JS code, you first need to select the all the td with the js-popup3 class:
$('js-popup3')
Then, you want to trigger something when an event occurs on the element you selected. With jQuery, you would do it like this:
$('js-popup3').on('click', function() {});
Lastly, you want to describe what should be done when the event occurs. This is done in the callback function.
$('.js-popup3').on('click', function() {
# employeeName is the value you want
employeeName = $(this).siblings('.js-employee-name').text();
});
I invite you to read a lot about JS (try to code without jQuery first). Once you feel confident with it, start looking at jQuery.

You can create a click function for the Table tr's and get the value of the third column (index 2):
$('table.reference.notranslate tbody').delegate("tr", "click", function(){
var YourEmployeName = $(this).find('td').eq(2).text();
alert(YourEmployeName);
});

To make the popups ahve unique id's according to employee try something like this:
">
Then I presume you have some js somewhere to handle the popup clicks. This js can extract the employee id with
emp_id = my_clicked_popup_trigger.attr("id").split('-')[-1]

table column hover load separate div

I'm having a bit of trouble figuring something simple out. I have a large datatable, and I want that when hovering any column, a specific div (and different for each column) is loaded somewhere on the page, outside the table.
How should I go about that? I'm having trouble defining columns (I'm using jquery dataTables), and then finding a way to load a different image for each column.
Here is my current code that doesn't take columns into account:
$('td').hover(function() {
var myClass = $(this).attr("class");
/* hide any previously loaded div */
$(".loaded").hide();
/* load my new div with the content I need */
$("#"+myClass).show();
});
And the HTML:
<thead>
<tr>
<th class="sp1">SP1</th>
<th class="sp2">SP2</th>
<th class="bb1">BB1</th>
<th class="br1">BR1</th>
<th class="br2">BR2</th>
<th class="br3">BR3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sp1">xxx</td>
<td class="sp2">xxx</td>
<td class="bb1">xxx</td>
<td class="br1">xxx</td>
<td class="br2">xxx</td>
<td class="br3">xxx</td>
</tr>
....
</tbody>
Thanks!

Im not sure if this is what you want, but check it out:
This code will show the name of the div you are hovering in another div.
https://jsfiddle.net/5jy071t5/4/
HTML
<ul>
<li name="first">Hoover me</li>
<li name="second">And me</li>
</ul>
<div id="output"></div>
Javascript
$( "li" ).hover(
function() {
$("#output").html($(this).attr("name"));
//you can also load an image if you like
}, function() {
$("#output").html("");
}
);

It works as charm. Maybe you were missing either id or class.
$('td').hover(function() {
var myClass = $(this).attr("class");
/* hide any previously loaded div */
$(".loaded").hide();
/* load my new div with the content I need */
$("#"+myClass).show();
});
.loaded{
display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="sp1">SP1</th>
<th class="sp2">SP2</th>
<th class="bb1">BB1</th>
<th class="br1">BR1</th>
<th class="br2">BR2</th>
<th class="br3">BR3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sp1">xxx</td>
<td class="sp2">xxx</td>
<td class="bb1">xxx</td>
<td class="br1">xxx</td>
<td class="br2">xxx</td>
<td class="br3">xxx</td>
</tr>
</tbody>
</table>
<div id="sp1" class="loaded">sp1</div>
<div id="sp2" class="loaded">sp2</div>
<div id="bb1" class="loaded">bb1</div>
<div id="br1" class="loaded">br1</div>
<div id="br2" class="loaded">br2</div>
<div id="br3" class="loaded">br3</div>