Technology Blog Freebies Web Development SEO CSS HTML5 Javascript Internet things and more: June 2023

Call API on click functions to update data

var roleUpdate = document.querySelectorAll('.roleUpdate');

for (var i = 0; i < roleUpdate.length; i++) {

roleUpdate[i].addEventListener('click', function () {

var permissionUserId = this.getAttribute('data-user-id');

var permissionCodeId = this.getAttribute('data-role-code');

const requestData = {

UserId: permissionUserId,

RoleId: permissionCodeId

};

//alert(JSON.stringify(requestData));

fetch(`${window.location.origin}/api/users/updaterole`, {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify(requestData)

})

.then((response) => {

if (response.ok) {

return response.json();

} else {

throw new Error(`Error: ${response.status}`);

}

})

.then((data) => {

toastr.success('Update User Roles Success');

// alert(data.msg);

})

.catch((error) => {

// alert(error.message);

toastr.error('Update Failed');

});

}

// User Active Inactive status update

var userStatus = document.getElementById("userStatus");

userStatus.addEventListener('click', function () {

var puserStatusId = this.getAttribute('data-user-id');

alert(puserStatusId);

const requestData = {

UserId: puserStatusId,

};

//alert(JSON.stringify(requestData));

fetch(`${window.location.origin}/api/users/updaterole`, {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify(requestData)

})

.then((response) => {

if (response.ok) {

return response.json();

} else {

throw new Error(`Error: ${response.status}`);

}

})

.then((data) => {

toastr.success('Update User Status Success');

// alert(data.msg);

})

.catch((error) => {

// alert(error.message);

toastr.error('Update Failed');

});

HTML Data tables all options example

<thead>

<tr>

<th>Phone</th>

<th>Email</th>

<th>Supervisor</th>

<th>User Skill</th>

<th>Is Active</th>

<th>Action</th>

</tr>

</thead>

<tbody>

@foreach (var user in Model.Users)

{

<tr>

<td>

@user.FullName

</td>

<td>@user.PhoneNumber</td>

<td>@user.Email</td>

<td>@user.RoleName</td>

<td>@user.HrisNo</td>

<td>@user.BarCode</td>

<td>@user.Supervisor</td>

<td>@user.UserSkill</td>

<td>

@if (user.IsActive == true)

{

</div>

}

else

{

</div>

}

</td>

<td>

</a>

</button>

</td>

</tr>

}

</tbody>

<tfoot>

<tr>

<th>Phone</th>

<th>Email</th>

<th>Supervisor</th>

<th>User Skill</th>

<th>Is Active</th>

<th>Action</th>

</tr>

</tfoot>

</table>

<style>

div.dataTables_wrapper {

width: 100%;

margin: 0 auto;

}

.dt-button.buttons-excel{

background: #727cf5;

color:#fff;

border:0;

}

thead input {

width: 100%;

border:1px solid #ededed;

}

</style>

@section Scripts {

$(document).ready(function () {

$('#basic-datatable-Users thead tr')

.clone(true)

.addClass('filters')

.appendTo('#basic-datatable-Users thead');

///

$("#basic-datatable-Users").DataTable({

orderCellsTop: true,

dom: 'Bfrtip',

scrollX: true,

responsive : true,

buttons: [{

extend: 'excelHtml5',

exportOptions: {

columns: [1, 2, 3, 4, 5, 6, 7, 8, 9]

}

select: {

style: 'multi'

keys: !0,

language: {

paginate: {

previous: "<i class='mdi mdi-chevron-left'>",

next: "<i class='mdi mdi-chevron-right'>"

}

drawCallback: function () {

$(".dataTables_paginate > .pagination").addClass("pagination-rounded")

//clear autocomplete

initComplete: function () {

var api = this.api();

// Define the columns that require filters

var filterColumns = [1, 2, 3, 4];

// For each column

api.columns().eq(0).each(function (colIdx) {

var cell = $('.filters th').eq($(api.column(colIdx).header()).index());

if (filterColumns.includes(colIdx)) {

// Set the header cell to contain the input element

var title = $(cell).text();

$(cell).html('<input type="text" placeholder="' + title + '" />');

// On every keypress in this input

$('input', cell)

.off('keyup change')

.on('change', function (e) {

// Get the search value

$(this).attr('title', $(this).val());

var regexr = '({search})';

var cursorPosition = this.selectionStart;

// Search the column for that value

api

.column(colIdx)

.search(

this.value != ''

? regexr.replace('{search}', '(((' + this.value + ')))')

: '',

this.value != '',

this.value == ''

)

.draw();

})

.on('keyup', function (e) {

e.stopPropagation();

$(this).trigger('change');

$(this)

.focus()[0]

.setSelectionRange(cursorPosition, cursorPosition);

});

} else {

// Empty the header cell

$(cell).empty();

}

});

$(this.api().table().container()).find('input[type="search"]').parent().wrap('<form>').parent().attr('autocomplete', 'off').css('overflow', 'hidden').css('margin', 'auto');

}

});

/////

</script>

}

Jquery Data Tables Complete essential Example

<pre>

<thead>

<tr>

<th>Action</th>

<th>Employee ID</th>

<th>Employee Name</th>

<th>Designation</th>

<th>Start Day/Time</th>

<th>Meter Reading</th>

<th>Start Remarks</th>

<th>Meter Reading</th>

<th>End Remarks</th>

<th>Attachments</th>

</tr>

</thead>

<tbody>

@foreach (var item in Model)

{

</a>

</td>

</td>

<span title="@item.Client" class="d-inline-block text-truncate" style="max-width: 100px;"> Tharaka Jayampathi </span>

</td>

<td class="text-nowrap">DivisionalCodinator</td>

@if (item.DayStart.HasValue)

{

@item.DayStart.Value.ToString("M/d/yyyy")

<br>

@item.DayStart.Value.ToString("h:mm:ss tt")

}

else

{

}

<td class="text-nowrap">@item.StartMileage </td>

<td class="text-nowrap">@item.DayStartRemark </td>

@if (item.DayEnd.HasValue)

{

@item.DayEnd.Value.ToString("M/d/yyyy")

<br>

@item.DayEnd.Value.ToString("h:mm:ss tt")

}

else

{

}

</td>

<td class="text-nowrap">@item.EndMileage </td>

<td class="text-nowrap">@item.DayEndRemark </td>

@if (item.DayStartAttachment != "" && item.DayStartAttachment != null)

{

</a>

}

@if (item.DayEndAttachment != "" && item.DayEndAttachment != null)

{

</a>

}

</td>

</tr>

}

</tbody>

<tfoot>

<tr>

<th>Action</th>

<th>Employee ID</th>

<th>Employee Name</th>

<th>Designation</th>

<th>Start Day/Time</th>

<th>Meter Reading</th>

<th>Start Remarks</th>

<th>Meter Reading</th>

<th>End Remarks</th>

<th>Attachments</th>

</tr>

</tfoot>

</table>

@section Styles {

<style>

div.dataTables_wrapper {

width: 100%;

margin: 0 auto;

}

thead input {

width: 100%;

}

</style>

}

@section Scripts{

$(document).ready(function () {

// Setup - add a text input to specific footer cells

$('#basic-datatable thead tr')

.clone(true)

.addClass('filters')

.appendTo('#basic-datatable thead');

$("#basic-datatable").DataTable({

orderCellsTop: true,

dom: 'Bfrtip',

scrollX: true,

buttons: [{

extend: 'excelHtml5',

exportOptions: {

columns: [1, 2, 3, 4,5,6,7,8,9]

}

select: {

style: 'multi'

initComplete: function () {

var api = this.api();

// Define the columns that require filters

var filterColumns = [1, 2, 3, 4, 5, 6, 7, 8];

// For each column

api.columns().eq(0).each(function (colIdx) {

var cell = $('.filters th').eq($(api.column(colIdx).header()).index());

if (filterColumns.includes(colIdx)) {

// Set the header cell to contain the input element

var title = $(cell).text();

$(cell).html('<input type="text" placeholder="' + title + '" />');

// On every keypress in this input

$('input', cell)

.off('keyup change')

.on('change', function (e) {

// Get the search value

$(this).attr('title', $(this).val());

var regexr = '({search})';

var cursorPosition = this.selectionStart;

// Search the column for that value

api

.column(colIdx)

.search(

this.value != ''

? regexr.replace('{search}', '(((' + this.value + ')))')

: '',

this.value != '',

this.value == ''

)

.draw();

})

.on('keyup', function (e) {

e.stopPropagation();

$(this).trigger('change');

$(this)

.focus()[0]

.setSelectionRange(cursorPosition, cursorPosition);

});

} else {

// Empty the header cell

$(cell).empty();

}

});

</script>

</pre>

Calling an passing data to a POST API

// function for checkbox click
function updatePermission(checkbox) {
    const PermissionId = parseInt(checkbox.id);
    const RoleId = getqsValue();

    updatePermAPI(PermissionId, RoleId);
}

// get role id
function getqsValue() {
    const urlParm = new URLSearchParams(window.location.search);
    return urlParm.get('id');
}

function updatePermAPI(PermissionId, RoleId) {
    const permUrl = `${window.location.origin}/api/roles/updatepermission`;
    const method = "POST";

    const data = {
        PermissionId: PermissionId,
        RoleId: RoleId
    }

    console.log("API URL:", permUrl); // Log the complete API URL

    fetch(permUrl, {
        method: method,
        body: JSON.stringify(data),
        headers: {
            "Content-Type": "application/json"
        }
    })
        .then(response => response.json())
        .then(data => {
            console.log(data); // Log the response data
        })
        .catch(error => {
            console.error(error); // Log the error
        });
}

on button click add text boxes and delete script

<button onclick="addField()" class="btn btn-outline-primary mb-3 btn-sm" type="button">+ Add Field</button>

let fieldCount = 0;

function addField() {

fieldCount++;

const textboxName = `newfield_${fieldCount}`;

const textbox = document.createElement("input");

textbox.type = "text";

textbox.name = textboxName;

textbox.classList.add("form-control", "mb-2");

// Remove button

const removeBtn = document.createElement("button");

removeBtn.textContent = "X";

removeBtn.classList.add("btn", "btn-sm", "btn-outline-danger");

removeBtn.addEventListener("click", () => {

removeField(textboxName);

});

const fieldContainer = document.createElement("div");

fieldContainer.classList.add("fieldContainer");

fieldContainer.appendChild(textbox);

fieldContainer.appendChild(removeBtn);

const fieldSection = document.getElementById("fieldSection");

fieldSection.appendChild(fieldContainer);

}

function removeField(textboxName) {

const removable = document.querySelector(`input[name="${textboxName}"]`).parentNode;

const fieldSection = document.getElementById("fieldSection");

fieldSection.removeChild(removable);

}

Technology Blog Freebies Web Development SEO CSS HTML5 Javascript Internet things and more

Pages

Call API on click functions to update data

HTML Data tables all options example

Jquery Data Tables Complete essential Example

Calling an passing data to a POST API

on button click add text boxes and delete script

Search This Blog