I have user access function that have data like this. Data read from API
"allowView": true,
"allowAdd" : true,
"allowEdit": false,
"allowDel" : false
this is how I check the condition for the data. Condition for user access data.
e.allowView== true ? $("button.viewBtn").prop("disabled",false) : $("button.viewBtn").prop("disabled",true);
e.allowAdd== true ? $("button.addBtn").prop("disabled",false) : $("button.addBtn").prop("disabled",true);
e.allowEdit== true ? $("button.editBtn").prop("disabled",false) : $("button.editBtn").prop("disabled",true);
e.allowDel== true ? $("button.deleteBtn").prop("disabled",false): $("button.deleteBtn").prop("disabled",true);
but I have problem to call the class deleteBtn in <span> because in this line of code did not have button.
<span class="text-center"><a onclick ="deleteMsg('${emsg_id}')" class=""><span class="text-danger" data-toggle="tooltip" data-placement="top" title="Delete"><em class="icon ni ni-trash"></em></span></a></span>
How do I add the condition in my user access statement so I can use it in my <span> without adding the <button> ?
First of all you can refactor this code so instead of:
e.allowView== true ? $("button.viewBtn").prop("disabled",false) : $("button.viewBtn").prop("disabled",true);
Can be just:
$("button.viewBtn").prop("disabled", e.allowView != true);
And the second thing, you can in your callback function:
deleteMsg(par) {
if (!e.allowDel)
return false;
// Your existing code...
}
Also you can add some class on your link, so it can add some kind of "disabled" class there...
For example:
if (!e.allowDel) $(selectorToLink).addClass('disabled-link');
.disabled-link {
pointer-events: none;
}