I have a code that generates dynamically table rows and I want to make that whenever the user clicks on a row it sends that information to a function and it process it in a modal.
The thing is that I am having trouble passing information, I’ve tried everything I know, even passing ASCII the special characters such as ‘.’ or ‘_’ but still cannot manage to make it.
The error: Uncaught SyntaxError: Invalid or unexpected token (at AdminTab:1:14)
The program is taking the values as they were numbers and strings but I am parsing all of them to string always RESULT: acceptModal( 195Pending95User permission requested95gbilbao95gbilbao@gestamp46com95ES95Admin)
I provide the code of cshtml and jquery:
$(document).ready(function () {
$.ajax({
type: "GET",
url: '/AdminTab/ShowAllUserPetitions',
error: function () {
//alert("An error occurred.");
},
success: function (data, type, full) {
var IDPetition = {};
var Status = {};
var PetitionDate = {};
var Description = {};
var Username = {};
var Email = {};
var Domain = {};
var Privilege = {};
var newRowContent = ``;
var newRowContentResolved = ``;
var newRowContentUnResolved = ``;
var counterUnResolved = 0;
var counterResolved = 0;
var counterConfirmed = 0;
IDPetition = data.data.map(function (e) {
return e.id_user_petition;
});
Status = data.data.map(function (e) {
return e.petition_status;
});
PetitionDate = data.data.map(function (e) {
return e.petition_date;
});
Description = data.data.map(function (e) {
return e.petition_description;
});
Username = data.data.map(function (e) {
return e.username;
});
Email = data.data.map(function (e) {
return e.email;
});
Domain = data.data.map(function (e) {
return e.domain;
});
Privilege = data.data.map(function (e) {
return e.privilege;
});
let ASCIILowBar = "95";
$.each(Privilege, function (key, value) {
if (Status[key] == "Pending" || Status[key] == "Confirmed")
{
debugger;
sendUserRequest = IDPetition[key].toString() + ASCIILowBar + Status[key].toString() + ASCIILowBar + Description[key].toString() + ASCIILowBar + Username[key].toString() + ASCIILowBar + Email[key].toLocaleString() + ASCIILowBar + Domain[key].toString() + ASCIILowBar + Privilege[key].toString();
do {
let indexofDot = sendUserRequest.indexOf('.');
let asciiValueDot = sendUserRequest.charCodeAt(indexofDot);
sendUserRequest = sendUserRequest.replace('.', asciiValueDot);
} while (sendUserRequest.indexOf('.') != -1);
//const sendContent = [IDPetition[key].toString(), Status[key].toString()/*, Description[key], Username[key], Email[key], Domain[key], Privilege[key]*/];
newRowContentUnResolved = newRowContentUnResolved +
` <tr id = "` + IDPetition[key] + "_" + Status[key] + `" onclick="acceptModal( ` + sendUserRequest + `)">
<td class="text-center">
<h7 class="no-margin"> ` + PetitionDate[key] + ` <small class="display-block text-size-small no-margin"></small></h7>
<h6 class="no-margin">
</td>
<td>`;
if (Status[key] == "Pending") {
counterUnResolved = counterUnResolved + 1;
newRowContentUnResolved = newRowContentUnResolved + `
<div class="media-left media-middle">
<a href="#" class="button">
<i class="icon-circle2" style="color:#EE8A32"></i>
</a>
</div>
<div class="media-body">
<a href="#" class="display-inline-block text-default text-semibold letter-icon-title"> User Petition</a>
<div class="text-muted text-size-small"><h7 style="color:#EE8A32; font-weight:600">` + Status[key] + ` </h7></div>
</div>
`;
}
else
{
counterConfirmed = counterConfirmed + 1;
newRowContentUnResolved = newRowContentUnResolved + `
<div class="media-left media-middle">
<a href="#" class="button">
<i class="icon-circle2" style="color:#57A7C8"></i>
</a>
</div>
<div class="media-body">
<a href="#" class="display-inline-block text-default text-semibold letter-icon-title"> User Petition</a>
<div class="text-muted text-size-small"><h7 style="color:#57A7C8; font-weight:600">` + Status[key] + ` </h7></div>
</div>
`;
}
newRowContentUnResolved = newRowContentUnResolved + `
</td>
<td>
<a href="#" class="text-default display-inline-block">
<span class="text-semibold">[#` + IDPetition[key] + `] User addition requested for ` + Username[key] + `</span>
<span class="display-block text-muted">` + Description[key] + `</span>
</a>
</td>
<td>
<a href="#" class="text-default display-inline-block">
<span class="text-semibold"> Privilege: </span> <span>` + Privilege[key] + `</span><span class="text-semibold"> Email: </span> <span>` + Email[key] + ` </span> <span class="text-semibold">Domain: </span><span>` + Domain[key] + ` </span>
</a>
</td>`;
if (Status[key] == "Pending") {
newRowContentUnResolved = newRowContentUnResolved + `
<td class="text-center">
<ul class="icons-list">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu7"></i></a>
<ul class="dropdown-menu dropdown-menu-right">
<li id="petition_accept" ` + IDPetition[key] + ` onclick="acceptModal(` + IDPetition[key] + ` )"><a href="#"><i class="icon-checkmark3 text-success"></i> Accept Petition</a></li>
<li><a href="#"><i class="icon-cross2 text-danger"></i> Decline Petition</a></li>
</ul>
</li>
</ul>
</td>
</tr>`;
}
else {
newRowContentUnResolved = newRowContentUnResolved + `
<td class="text-center">
<ul class="icons-list">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu7"></i></a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#"><i class="icon-pencil4"></i> Add Comments</a></li>
<li><a href="#"><i class="icon-history"></i> Rollback Request</a></li>
</ul>
</li>
</ul>
</td>
</tr>`;
}
}
});
counterResolved = Status.length - counterUnResolved - counterConfirmed;
newRowContent = `<tr class="active border-double">
<td colspan="4"><h7 style="font-weight:500">Active tickets</h7></td>
<td class="text-right">
<span class="badge bg-orange">` + counterUnResolved + `</span>
<span class="badge bg-blue">` + counterConfirmed + `</span>
</td>
</tr>`;
newRowContentResolved =
`<tr class="active border-double">
<td colspan="4"><h7 style="font-weight:500">Resolved tickets</h7></td>
<td class="text-right">
<span class="badge bg-success">` + counterResolved + `</span>
</td>
</tr>`;
$.each(Privilege, function (key, value) {
if (Status[key] == "Inserted") {
newRowContentResolved = newRowContentResolved +
` <tr>
<td class="text-center">
<h7 class="no-margin"> ` + PetitionDate[key] + ` <small class="display-block text-size-small no-margin"></small></h7>
<h6 class="no-margin">
</td>
<td>
<div class="media-left media-middle">
<a href="#" class="button">
<i class="icon-circle2" style="color:#87C857"></i>
</a>
</div>
<div class="media-body">
<a href="#" class="display-inline-block text-default text-semibold letter-icon-title"> User Petition</a>
<div class="text-muted text-size-small"><h7 style="color:#87C857; font-weight:600">` + Status[key] + ` </h7></div>
</div>
</td>
<td>
<a href="#" class="text-default display-inline-block">
<span class="text-semibold">[#` + IDPetition[key] + `] User addition requested for ` + Username[key] + `</span>
<span class="display-block text-muted">` + Description[key] + `</span>
</a>
</td>
<td>
<a href="#" class="text-default display-inline-block">
<span class="text-semibold"> Privilege: </span> <span>` + Privilege[key] + `</span><span class="text-semibold"> Email: </span> <span>` + Email[key] + ` </span> <span class="text-semibold">Domain: </span><span>` + Domain[key] + ` </span>
</a>
</td>
<td class="text-center">
<ul class="icons-list">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu7"></i></a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#"><i class="icon-pencil4"></i> Add Comments</a></li>
<li><a href="#"><i class="icon-cancel-square" style="color:red"></i> Delete Request</a></li>
</ul>
</li>
</ul>
</td>
</tr>`;
}
});
$("#activeTickets tbody").html(newRowContent + newRowContentUnResolved + newRowContentResolved);
}
});
});
function acceptModal(receivedValue) {
debugger;
var newRowContent;
//test = sendUserRequest[0];
//test2 = sendUserRequest[1];
newRowContent = `<div class="form-group row" style="margin-bottom: 10px;">
<label class="col-md-4 col-form-label">Plant Reference</label>
<div class="col-md-8">
<input id="#" name="#" type="text" placeholder="Automatic Web App" class="form-control" disabled />
</div>
</div>`;
$("#modalForSpecificPetition").html(newRowContent);
$('#modal_user').modal('toggle');
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12-offset-2">
<!-- Support tickets -->
<div class="tab-content">
<div class="tab-pane pushbar_main_content" id="requestsUserAdmin">
<div class="panel panel-flat">
<div class="panel-heading">
<h5 class="panel-title" style="font-weight:500">USER REQUESTS</h5>
<div class="heading-elements">
<button type="button" class="btn btn-link daterange-ranges heading-btn text-semibold">
<i class="icon-calendar3 position-left"></i> <span></span> <b class="caret"></b>
</button>
</div>
</div>
<div class="table-responsive">
<table class="table text-nowrap" id="activeTickets">
<thead>
<tr>
<th style="width: 50px; font-size:14px">Due</th>
<th style="width: 300px;font-size:14px">Type</th>
<th style="font-size:14px">Description</th>
<th style="font-size:14px">Petition Information</th>
<th class="text-center" style="width: 20px;font-size:14px"><i class="icon-arrow-down12"></i></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /support tickets -->
</div>
</div>
</div>Note that the code for the function is not finished yet because first I want to solve the variable issue.
I tried firstly to pass 1 value or variable, it worked without any issue. Then I tried to send multiple variables and then started failing. Trying to fix it I made an array so send only 1 value but the same error persisted. Other thing I tried and is the one that now appears in the code is to parse the special characters to ASCII values but nothing but the same error happened.