Added all the functionality of app and admin
This commit is contained in:
bobbyvish
@@ -7,6 +7,7 @@
|
||||
{% include "cdn_through_html/animate_cdn_css.html" %}
|
||||
{% include "cdn_through_html/modal_cdn_css.html" %}
|
||||
{% include "cdn_through_html/switches_cdn_css.html" %}
|
||||
{% include "cdn_through_html/sweetalert2_cdn_css.html" %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -32,14 +33,17 @@
|
||||
<div class="col-lg-12">
|
||||
<div class="statbox widget box box-shadow">
|
||||
<div class="widget-content widget-content-area">
|
||||
<div id="faqs_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
|
||||
<div id="table_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
|
||||
|
||||
<div class="table-responsive">
|
||||
<table id="faqs" class="table style-3 dt-table-hover dataTable" role="grid"
|
||||
<table id="table" class="table style-3 dt-table-hover dataTable" role="grid"
|
||||
aria-describedby="style-3_info">
|
||||
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<th class="checkbox-column sorting_asc text-center" tabindex="0"
|
||||
aria-controls="style-3" aria-sort="ascending"
|
||||
style="width: 50.2656px;">#</th>
|
||||
<th class="checkbox-column sorting_asc text-center" tabindex="0"
|
||||
aria-controls="style-3" aria-sort="ascending"
|
||||
style="width: 50.2656px;">#</th>
|
||||
@@ -51,67 +55,21 @@
|
||||
style="width: 44.2344px;">Answer</th>
|
||||
<th class="sorting text-center" tabindex="3" aria-controls="style-3"
|
||||
style="width: 79.7969px;">Active</th>
|
||||
<th class="sorting text-center" tabindex="4" aria-controls="style-3"
|
||||
style="width: 79.7969px;">Deleted</th>
|
||||
<th class="sorting text-center" tabindex="5" aria-controls="style-3"
|
||||
style="width: 79.7969px;">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<thead id="filterboxrow">
|
||||
<tr>
|
||||
<th class="text-center" rowspan="1" colspan="1">id</th>
|
||||
<th class="text-center" rowspan="1" colspan="1">id</th>
|
||||
<th rowspan="1" colspan="1">Question</th>
|
||||
<th rowspan="1" colspan="1">Answer</th>
|
||||
<th class="invisible" rowspan="1" colspan="1">Active</th>
|
||||
<th class="invisible" rowspan="1" colspan="1">Deleted</th>
|
||||
<th class="invisible" rowspan="1" colspan="1">Action</th>
|
||||
</tr>
|
||||
<thead>
|
||||
<tbody>
|
||||
{% comment %} {% for data_obj in faqs_obj%}
|
||||
<tr role="row">
|
||||
<td class="text-center sorting_1"> {{data_obj.id}}</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-info mb-2 me-4" data-bs-toggle="modal" data-bs-target="#faqmodal" onclick="faqModal('{{data_obj.question}}','{{data_obj.answer}}')">
|
||||
View
|
||||
</button>
|
||||
</td>
|
||||
<td>{{data_obj.created_on}}</td>
|
||||
<td>{{data_obj.modified_on}}</td>
|
||||
<td class="text-center">
|
||||
<span class="shadow-none badge {% if data_obj.active %}badge-primary{% else %}badge-danger{% endif %}">{{data_obj.active}}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<ul class="table-controls">
|
||||
<li><a href="{% url 'module_cms:faq_edit' data_obj.id %}" class="bs-tooltip"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top" title=""
|
||||
data-original-title="Edit" data-bs-original-title="Edit"
|
||||
aria-label="Edit"><svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
class="feather feather-edit-2 p-1 br-8 mb-1">
|
||||
<path
|
||||
d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z">
|
||||
</path>
|
||||
</svg></a></li>
|
||||
<li><a href="{% url 'module_cms:faq_edit' data_obj.id %}" class="bs-tooltip"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top" title=""
|
||||
data-original-title="Delete" data-bs-original-title="Delete"
|
||||
aria-label="Delete"><svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
class="feather feather-trash p-1 br-8 mb-1">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path
|
||||
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
|
||||
</path>
|
||||
</svg></a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %} {% endcomment %}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -160,164 +118,287 @@
|
||||
<!-- include required css cdn link through html here -->
|
||||
|
||||
{% include "cdn_through_html/datatable_cdn_js.html" %}
|
||||
{% include "cdn_through_html/datatable_button_cdn_js.html" %}
|
||||
{% include "cdn_through_html/sweetalert2_cdn_js.html" %}
|
||||
|
||||
<script>
|
||||
|
||||
{% comment %} var faqs = $('#faqs').DataTable({
|
||||
processing: true,
|
||||
serverside: true,
|
||||
ajax: {
|
||||
url: "{% url 'module_cms:faq_list'%}",
|
||||
type: "GET", // Corrected typo here
|
||||
data: function(d) {
|
||||
// Add custom data to the request if needed
|
||||
return d
|
||||
},
|
||||
error: function(xhr, error, thrown) {
|
||||
console.log('Ajax error:', error);
|
||||
},
|
||||
success: function(response) {
|
||||
console.log('Ajax response:', response);
|
||||
}
|
||||
},
|
||||
columns: [
|
||||
{ data: "id" },
|
||||
{ data: "question" },
|
||||
{ data: "answer" },
|
||||
{ data: "active" },
|
||||
{ data: "deleted" }
|
||||
],
|
||||
debug: true, // Enable debugging mode
|
||||
columnDefs: [
|
||||
{
|
||||
targets: [0, 1, 2, 3, 4],
|
||||
searchable: true,
|
||||
orderable: true
|
||||
}
|
||||
], // Added comma here
|
||||
dom: "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
|
||||
"<'table-responsive'tr>" +
|
||||
"<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>",
|
||||
oLanguage: {
|
||||
oPaginate: { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
|
||||
sInfo: "Showing page _PAGE_ of _PAGES_",
|
||||
sSearch: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
|
||||
sSearchPlaceholder: "Search...",
|
||||
sLengthMenu: "Results : _MENU_",
|
||||
},
|
||||
stripeClasses: [],
|
||||
lengthMenu: [5, 10, 20, 50],
|
||||
pageLength: 10
|
||||
}); {% endcomment %}
|
||||
|
||||
var faqs = $('#faqs').DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: {
|
||||
url: "{% url 'module_cms:faq_list'%}",
|
||||
type: "GET",
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
data: "id",
|
||||
className : "text-center"
|
||||
},
|
||||
{ data: "question" },
|
||||
{ data: "answer" },
|
||||
{
|
||||
data: "active",
|
||||
className : "text-center",
|
||||
render: function (data, type, row) {
|
||||
// Check if active is true or false and set checked attribute accordingly
|
||||
var checkedAttribute = data ? 'checked' : '';
|
||||
|
||||
// Generate switch HTML
|
||||
var switchHTML = '<div class="switch form-switch-custom switch-inline form-switch-primary">';
|
||||
switchHTML += '<input class="switch-input" type="checkbox" role="switch" id="form-custom-switch-checked' + row.id + '" ' + checkedAttribute + '>';
|
||||
switchHTML += '</div>';
|
||||
|
||||
return switchHTML;
|
||||
}
|
||||
},
|
||||
{
|
||||
data: "deleted",
|
||||
className : "text-center"
|
||||
},
|
||||
{
|
||||
data: null,
|
||||
className: "text-center", // Add class to action column
|
||||
render: function (data, type, row) {
|
||||
return `
|
||||
<div class="dropdown">
|
||||
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink${row.id}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink${row.id}" style="">
|
||||
<a class="dropdown-item" href="javascript:void(0);">View</a>
|
||||
<a class="dropdown-item" href="javascript:void(0);">Edit</a>
|
||||
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
],
|
||||
debug: true, // Enable debugging mode
|
||||
columnDefs: [
|
||||
{
|
||||
targets: [0, 1, 2, 3, 4],
|
||||
searchable: true,
|
||||
orderable: true
|
||||
},
|
||||
{
|
||||
targets: -1, // Targeting the last column (action column)
|
||||
searchable: false,
|
||||
orderable: false
|
||||
}
|
||||
], // Added comma here
|
||||
dom: "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
|
||||
"<'table-responsive'tr>" +
|
||||
"<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>",
|
||||
oLanguage: {
|
||||
oPaginate: { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
|
||||
sInfo: "Showing page _PAGE_ of _PAGES_",
|
||||
sSearch: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
|
||||
sSearchPlaceholder: "Search...",
|
||||
sLengthMenu: " _MENU_",
|
||||
},
|
||||
stripeClasses: [],
|
||||
lengthMenu: [5, 10, 20, 50],
|
||||
pageLength: 10,
|
||||
initComplete: function () {
|
||||
var api = this.api();
|
||||
|
||||
// Add individual search inputs to the first row of the thead section
|
||||
$('thead#filterboxrow th').each(function (index) {
|
||||
var title = $(this).text();
|
||||
var input = $('<input type="text" class="form-control" placeholder="Search ' + title + '"/>')
|
||||
.on('keyup change', function () {
|
||||
if (api.column(index).search() !== this.value) {
|
||||
api
|
||||
.column(index)
|
||||
.search(this.value)
|
||||
.draw();
|
||||
}
|
||||
});
|
||||
|
||||
$(this).empty().append(input);
|
||||
// Define DataTable instance
|
||||
var dataTableInstance;
|
||||
var mainUrl = "{% url 'module_cms:faq_list' %}?deleted_flag=False"
|
||||
var editUrl = "{% url 'module_cms:faq_edit' pk=0 %}"
|
||||
var actionUrl = "{% url 'module_cms:faq_action' %}"
|
||||
|
||||
// Entry point
|
||||
$(document).ready(function() {
|
||||
|
||||
tableName = $('#table');
|
||||
dataTableInstance = initializeDataTable(tableName, mainUrl);
|
||||
viewClickEvent(dataTableInstance)
|
||||
activeSwitchEventListener()
|
||||
});
|
||||
|
||||
// Function to initialize DataTable
|
||||
function initializeDataTable(tableName, mainUrl) {
|
||||
return tableName.DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: {
|
||||
url: mainUrl,
|
||||
type: "GET",
|
||||
},
|
||||
columns: [
|
||||
{ data: null, className: "text-center", render: renderCheckbox },
|
||||
{ data: "id", className: "text-center" },
|
||||
{ data: "question" },
|
||||
{ data: "answer" },
|
||||
{ data: "active", className: "text-center", render: renderSwitch },
|
||||
{ data: null, className: "text-center", render: renderActions }
|
||||
],
|
||||
debug: true,
|
||||
columnDefs: [
|
||||
{
|
||||
"targets": [1,2],
|
||||
"render": function (data, type, row) {
|
||||
// Adjust the length of text you want to show before truncating
|
||||
var maxLength = 40;
|
||||
// Truncate the text if it exceeds the maxLength
|
||||
var truncatedText = data.length > maxLength ? data.substr(0, maxLength) + '...' : data;
|
||||
// Return the truncated text
|
||||
return truncatedText;
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: [1, 2, 3],
|
||||
searchable: true,
|
||||
orderable: true
|
||||
},
|
||||
{
|
||||
targets: [0,-1], // Targeting the last column (action column)
|
||||
searchable: false,
|
||||
orderable: false
|
||||
},
|
||||
],
|
||||
dom: "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'Bf>>>" +
|
||||
"<'table-responsive'tr>" +
|
||||
"<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>",
|
||||
buttons: [
|
||||
{
|
||||
text: 'Archive',
|
||||
className: "btn btn-dark buttons-archive",
|
||||
action: archiveAction,
|
||||
init: function(api, node, config){
|
||||
$(node).hide();
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'View Archive List',
|
||||
className: "btn btn-dark ",
|
||||
action: function () {
|
||||
// Add your action here, e.g., redirect to archive page
|
||||
window.location.href = '/archive';
|
||||
}
|
||||
}
|
||||
],
|
||||
oLanguage: {
|
||||
oPaginate: { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
|
||||
sInfo: "Showing page _PAGE_ of _PAGES_",
|
||||
sSearch: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
|
||||
sSearchPlaceholder: "Search...",
|
||||
sLengthMenu: " _MENU_",
|
||||
},
|
||||
stripeClasses: [],
|
||||
lengthMenu: [5, 10, 20, 50],
|
||||
pageLength: 10,
|
||||
initComplete: initCompleteCallback
|
||||
});
|
||||
}
|
||||
|
||||
// Function to reload the DataTable
|
||||
function reloadDataTable() {
|
||||
dataTableInstance.ajax.reload();
|
||||
}
|
||||
|
||||
// Render checkbox
|
||||
function renderCheckbox(data, type, row) {
|
||||
|
||||
var checkboxHTML = '<div class="form-check form-check-danger">';
|
||||
checkboxHTML += '<input class="form-check-input archive-checkbox" type="checkbox" value="' + row.id + '" data-id="'+ row.id +'" id="checkbox-' + row.id + '">';
|
||||
checkboxHTML += '</div>';
|
||||
return checkboxHTML;
|
||||
}
|
||||
|
||||
// Render switch
|
||||
function renderSwitch(data, type, row) {
|
||||
var checkedAttribute = data.toLowerCase() === 'true' ? 'checked' : '';
|
||||
var switchHTML = '<div class="switch form-switch-custom switch-inline form-switch-primary">';
|
||||
switchHTML += '<input class="switch-input" type="checkbox" role="switch" data-id="'+ row.id +'" id="form-custom-switch-checked' + row.id + '" ' + checkedAttribute + '>';
|
||||
switchHTML += '</div>';
|
||||
return switchHTML;
|
||||
}
|
||||
|
||||
// Render actions
|
||||
function renderActions(data, type, row) {
|
||||
return `
|
||||
<div class="dropdown">
|
||||
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink${row.id}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink${row.id}" style="">
|
||||
<a class="dropdown-item view" href="javascript:void(0);" data-id="${row.id}">View</a>
|
||||
<a class="dropdown-item edit" href="${ editUrl.replace('0',row.id)}" data-id="${row.id}">Edit</a>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Function to handle archive action
|
||||
function archiveAction() {
|
||||
// Get all the checked checkboxes
|
||||
var checkedCheckboxes = $('.archive-checkbox:checked');
|
||||
// If no checkboxes are checked, show an error message
|
||||
if (checkedCheckboxes.length === 0) {
|
||||
Swal.fire({
|
||||
title: 'No users selected',
|
||||
text: 'Please select at least one user to archive.',
|
||||
icon: 'error',
|
||||
showConfirmButton: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Get the IDs of the checked checkboxes
|
||||
var ids = checkedCheckboxes.map(function() {
|
||||
return $(this).val();
|
||||
}).get();
|
||||
// Perform archive action with the collected user IDs
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: 'Once archived, you will recover it from archive list!',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#d33',
|
||||
cancelButtonColor: '#3085d6',
|
||||
confirmButtonText: 'Yes, archive it!'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Perform archive action
|
||||
$.ajax({
|
||||
url: actionUrl, // Replace with your archive endpoint
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: "archive",
|
||||
ids: ids,
|
||||
csrfmiddlewaretoken: '{{csrf_token}}'
|
||||
},
|
||||
success: function(response) {
|
||||
// Show success message
|
||||
Swal.fire({
|
||||
title: 'Done!',
|
||||
text: response.msg,
|
||||
icon: 'success',
|
||||
showConfirmButton: true
|
||||
});
|
||||
// Optionally, you can reload the DataTable after successful archive
|
||||
reloadDataTable();
|
||||
},
|
||||
error: function(response) {
|
||||
// Show error message
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: response.message,
|
||||
icon: 'error',
|
||||
showConfirmButton: true
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Callback function for DataTable initialization complete event
|
||||
function initCompleteCallback() {
|
||||
var api = this.api();
|
||||
|
||||
// Add individual search inputs to the first row of the thead section
|
||||
$('thead#filterboxrow th').each(function (index) {
|
||||
var title = $(this).text();
|
||||
var input = $('<input type="text" class="form-control" placeholder="Search ' + title + '"/>')
|
||||
.on('keyup change', function () {
|
||||
if (api.column(index).search() !== this.value) {
|
||||
api.column(index).search(this.value).draw();
|
||||
}
|
||||
});
|
||||
|
||||
$(this).empty().append(input);
|
||||
});
|
||||
|
||||
// Add event listener for checkbox change
|
||||
$('body').on('change', 'input[type="checkbox"]', function () {
|
||||
var checkedCount = $('tbody input.archive-checkbox:checked').length;
|
||||
var archiveButton = $('.buttons-archive');
|
||||
console.log("checkbox is checked", + checkedCount)
|
||||
archiveButton.toggle(checkedCount > 0);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Function to handle click event for view button
|
||||
function viewClickEvent(dataTableInstance) {
|
||||
$('body').on('click', '.view', function(){
|
||||
var id =$(this).data('id');
|
||||
var rowData = dataTableInstance.row($(this).closest('tr')).data();
|
||||
var question = rowData.question;
|
||||
var answer = rowData.answer;
|
||||
console.log(question, answer)
|
||||
// Set the data in the modal content
|
||||
$('#questionData').text(question);
|
||||
$('#answerData').text(answer);
|
||||
|
||||
// Show the modal
|
||||
$('#faqmodal').modal('show');
|
||||
});
|
||||
}
|
||||
|
||||
// Function to add event listener for switch
|
||||
function activeSwitchEventListener() {
|
||||
// Add event listener for switch change event
|
||||
$('body').on('change', '.switch-input', function() {
|
||||
var rowId = $(this).closest('tr').find('.switch-input').data('id');
|
||||
var isActive = $(this).prop('checked');
|
||||
console.log(rowId, isActive)
|
||||
// Perform active toggle action for the current user
|
||||
$.ajax({
|
||||
url: actionUrl, // Replace with your active toggle endpoint
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: "active",
|
||||
ids: [rowId],
|
||||
active: isActive,
|
||||
csrfmiddlewaretoken: '{{csrf_token}}'
|
||||
},
|
||||
success: function(response) {
|
||||
// Show success message
|
||||
Swal.fire({
|
||||
title: 'Done!',
|
||||
text: response.msg,
|
||||
icon: 'success',
|
||||
showConfirmButton: true
|
||||
});
|
||||
// Reload the DataTable after successful toggle
|
||||
reloadDataTable();
|
||||
},
|
||||
error: function(response) {
|
||||
// Show error message
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: response.message,
|
||||
icon: 'error',
|
||||
showConfirmButton: true
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
<!-- Faq modal show and set data-->
|
||||
function faqModal(question, answer) {
|
||||
// Set the data in the modal content
|
||||
$("#questionData").text(question);
|
||||
$("#answerData").text(answer);
|
||||
|
||||
// Show the modal
|
||||
$('#faqmodal').modal('show');
|
||||
}
|
||||
|
||||
</script>
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user