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.

Substitute text in html table generated with angularjs with icon on-the-fly

I have a html page that contains a table with date, staffID and shift. Shift has a value of 0 (morning) or 1 (afternoon). It is generated as follows:
function staffSchedule ($scope, $http) {
$http
.get('/api/schedule/2017/02')
.then(function(response) {
var data = response.data;
$scope.shifts = data;
console.log(data);
})
.catch(function(errorResponse) {
console.log('Error: ' + errorResponse.status);
});
}
<table>
<tr>
<th>Date</th>
<th>StaffID</th>
<th>Shift</th>
</tr>
<tbody ng-repeat="shift in shifts">
<tr>
<td>{{shift.staffid}}</td>
<td>{{shift.date}}</td>
<td>{{shift.type}}</td>
</tr>
</tbody>
</table>
The code returns the data as it should do but I want to extend it to do something more.
I want the code to dynamically substitute the 0 for Fontawesome sun <i class="fa fa-sun-o" aria-hidden="true"></i> and 1 for Fontawesome moon <i class="fa fa-moon-o" aria-hidden="true"></i>. Any idea how I can do this with my current setup please?

Here is what I did in my code to get it to work.
<td>
<i class="fa" ng-class="{'fa-hourglass-start':schedule.shift==0,
'fa-hourglass-end':schedule.shift==1}">
</i>
</td>
To explain:
Grab my icons from font awesome http://fontawesome.io/
ng-repeat receives requests from a RESTful call via AngularJS
one of the fields in the record returns '0' or '1' (always; required field)
Use fa-hourglass-start if 0 and fa-hourglas-end if 1.

Use ng-class.
Something like:
<td>
<i class="fa" ng-class="{'fa-sun':shift.type==0,'fa-moon':shift.type==1}"></i>
</td>
Note I did not verify the proper FA class names

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]

jQuery find the first attribut before an element

I have the following structure:
<tr data-commercial="commercial_8">
<td class="tdCommercial">
Mister X
<h4>Planning</h4>
<ul>
<li data-day="Monday">
<i class="fa fa-plus-square fa-1"></i>
<i class="fa fa-minus-square fa-1"></i>
Lundi
<span class="number">2</span>
</li>
<li data-day="Tuesday">
<li data-day="Wednesday">
<li data-day="Thursday">
<li data-day="Friday">
</ul>
</td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wednesday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
<td class="Sunday"></td>
</tr>
With jQuery, I am using an onClick event with the element <i class="fa fa-plus-square fa-1"></i>.
What is the best way to retrieve the data-commercial attribute on the first tr from this element ?
The structure can change, so I need something like "find the first data-commercial attribute before myElement"
Thanks !

Use .closest()
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
Example:
var commercial = $(this).closest('tr').data('commercial');
Note: Provided this refers to element <i class="fa fa-plus-square fa-1"></i>

$('#myElement').closest('tr').attr('data-commercial');

Use closest:
$(this).closest('tr').data('commercial');

$(this).parents("tr").data("commercial")

Use .closest() in jquery
$(this).closeset('tr').data('commercial');

How to restrict the table row using js or jquery with out using style tag and class attribute for that row

I want to restrict the displaying the records of table.
I can able to restrict the table rows with style property of row.But when I am using that style it is giving the UI problems like on mouse over is missing for entire row.
Now mouse over should be there in this table on every table record.
I am using below code.
<tr style="display: block;"></tr>
Is there any way to hide the rows other than the above code.
I want to restrict the table row with out using the style property.
<c:forEach var="article" items="${vp_kb_articleList}" varStatus="loopStatus">
<tr id="<%=rowId++%>" class="myrow">
<td class="vp_kb_article" > see this code <a class="detaillist" href="${vp_kb_articlePageUrl}?articleId=${article.id}"> ${article.title}<br>
<span class="vp_kb_details">${article.description}</span>
<span class="vp_kb_article_id">${article.id}</span> </a>
</td>
</tr>
</c:forEach>

<c:forEach var="article" items="${vp_kb_articleList}" varStatus="loopStatus">
<tr id="<%=rowId++%>" class="myrow">
<td class="vp_kb_article" > see this code <a class="detaillist" href="${vp_kb_articlePageUrl}?articleId=${article.id}"> ${article.title}<br>
<span class="vp_kb_details">${article.description}</span>
<span class="vp_kb_article_id">${article.id}</span> </a>
</td>
</tr>
</c:forEach>
JS
$(document).ready(function() {
$(".myrow").hide();
});