mirror of
https://gitlab.com/hashborgir/d2tools.git
synced 2024-10-05 09:06:04 +00:00
loading spinner added on table load
This commit is contained in:
Hash Borgir
parent
c9c7c63abc
commit
9c4123c148
@ -40,7 +40,7 @@ foreach (glob($tbl . "*.tbl") as $filename) {
|
||||
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
|
||||
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
|
||||
<!-- Bootstrap CSS (if not already included) -->
|
||||
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">-->
|
||||
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">-->
|
||||
|
||||
<!-- Bootstrap DataTables CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap4.min.css">
|
||||
@ -88,6 +88,9 @@ foreach (glob($tbl . "*.tbl") as $filename) {
|
||||
<hr>
|
||||
|
||||
<div class="tablediv">
|
||||
<div id="loading-spinner" style="display: none; text-align:center;">
|
||||
<img src="img/loading.gif" alt="Loading...">
|
||||
</div>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -106,179 +109,190 @@ foreach (glob($tbl . "*.tbl") as $filename) {
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function resizeTextarea() {
|
||||
this.style.height = 'auto';
|
||||
this.style.height = (this.scrollHeight) + 'px';
|
||||
}
|
||||
$(document).ready(function () {
|
||||
// Function to resize textarea based on content
|
||||
<script>
|
||||
function resizeTextarea() {
|
||||
this.style.height = 'auto';
|
||||
this.style.height = (this.scrollHeight) + 'px';
|
||||
}
|
||||
function showLoadingSpinner() {
|
||||
$('#loading-spinner').show();
|
||||
}
|
||||
|
||||
// Select element change event handler
|
||||
$('#tableName').change(function () {
|
||||
$('.table').DataTable().destroy();
|
||||
$('.table tbody').html('');
|
||||
// Hide the loading spinner
|
||||
function hideLoadingSpinner() {
|
||||
$('#loading-spinner').hide();
|
||||
}
|
||||
$(document).ready(function () {
|
||||
// Function to resize textarea based on content
|
||||
function resizeTextarea() {
|
||||
this.style.height = 'auto';
|
||||
this.style.height = (this.scrollHeight) + 'px';
|
||||
}
|
||||
|
||||
var selectedTable = $(this).val();
|
||||
if (selectedTable !== '') {
|
||||
// Select element change event handler
|
||||
$('#tableName').change(function () {
|
||||
$('.table').DataTable().destroy();
|
||||
$('.table tbody').html('');
|
||||
showLoadingSpinner();
|
||||
var selectedTable = $(this).val();
|
||||
if (selectedTable !== '') {
|
||||
|
||||
// Send GET request to TblEditor.php?getTable with selected table name
|
||||
var request = $.get('TblEditor.php', {cmd: 'getTable', tableName: selectedTable});
|
||||
// Send GET request to TblEditor.php?getTable with selected table name
|
||||
var request = $.get('TblEditor.php', {cmd: 'getTable', tableName: selectedTable});
|
||||
|
||||
request.done(function (response) {
|
||||
// Handle the response here
|
||||
$('.tablediv tbody').html(response).promise().done(function () {
|
||||
// Callback function after HTML content is loaded
|
||||
request.done(function (response) {
|
||||
hideLoadingSpinner();
|
||||
// Handle the response here
|
||||
$('.tablediv tbody').html(response).promise().done(function () {
|
||||
// Callback function after HTML content is loaded
|
||||
|
||||
// Initialize DataTables on the table
|
||||
$('.table').DataTable();
|
||||
// Initialize DataTables on the table
|
||||
$('.table').DataTable();
|
||||
|
||||
// Resize textareas on page load
|
||||
$('textarea').each(resizeTextarea);
|
||||
|
||||
// Resize textareas on input
|
||||
$('textarea').on('input', resizeTextarea);
|
||||
|
||||
// Resize textareas on custom select change
|
||||
$('.custom-select').change(function () {
|
||||
$('textarea').each(resizeTextarea);
|
||||
});
|
||||
$('.page-link').click(function () {
|
||||
// Resize textareas on page load
|
||||
$('textarea').each(resizeTextarea);
|
||||
|
||||
// Resize textareas on input
|
||||
$('textarea').on('input', resizeTextarea);
|
||||
|
||||
// Resize textareas on custom select change
|
||||
$('.custom-select').change(function () {
|
||||
$('textarea').each(resizeTextarea);
|
||||
});
|
||||
$('.page-link').click(function () {
|
||||
$('textarea').each(resizeTextarea);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// Delete link click event handler
|
||||
$(document).on('click', '.delete-link', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var selectedTable = $('select[name="tableName"]').val();
|
||||
|
||||
// Get the rowid from the custom attribute data-rowid
|
||||
var rowid = $(this).data('rowid');
|
||||
|
||||
// Remove the deleted row from the table
|
||||
$('.row-' + rowid).remove();
|
||||
|
||||
// Send GET request to TblEditor.php?cmd=delete&rowid={rowid}
|
||||
$.get('TblEditor.php', {cmd: 'delete', tableName: selectedTable, rowid: rowid}, function (response) {
|
||||
// Handle the response here
|
||||
|
||||
// Wait until the response is loaded, then remove the row
|
||||
$(response).ready(function () {
|
||||
|
||||
// Update DataTable
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Update link click event handler
|
||||
$(document).on('click', '.update-link', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
// Delete link click event handler
|
||||
$(document).on('click', '.delete-link', function (event) {
|
||||
event.preventDefault();
|
||||
var selectedTable = $('select[name="tableName"]').val();
|
||||
|
||||
var selectedTable = $('select[name="tableName"]').val();
|
||||
// Get the rowid from the custom attribute data-rowid
|
||||
var rowid = $(this).data('rowid');
|
||||
|
||||
// Get the rowid from the custom attribute data-rowid
|
||||
var rowid = $(this).data('rowid');
|
||||
// Get the updated values from the corresponding input and textarea
|
||||
var key = $('.row-' + rowid + ' input').val();
|
||||
var string = $('.row-' + rowid + ' textarea').val();
|
||||
string = string.replace(/ /g, '\\n');
|
||||
string = string.replace(/\n/g, '\\n');
|
||||
|
||||
// Remove the deleted row from the table
|
||||
$('.row-' + rowid).remove();
|
||||
|
||||
// Send GET request to TblEditor.php?cmd=delete&rowid={rowid}
|
||||
$.get('TblEditor.php', {cmd: 'delete', tableName: selectedTable, rowid: rowid}, function (response) {
|
||||
// Handle the response here
|
||||
// Send POST request to TblEditor.php with the updated values
|
||||
$.post('TblEditor.php', {cmd: 'update', tableName: selectedTable, rowid: rowid, key: key, string: string}, function (response) {
|
||||
// Handle the response here
|
||||
|
||||
// Wait until the response is loaded, then remove the row
|
||||
$(response).ready(function () {
|
||||
|
||||
// Update DataTable
|
||||
// Optional: Update any UI elements if needed
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Add link click event handler
|
||||
$('#addLink').click(function () {
|
||||
var selectedTable = $('#tableName').val();
|
||||
var key = $('#inputKey').val();
|
||||
var string = $('#inputString').val();
|
||||
|
||||
// Send POST request to TblEditor.php with parameters
|
||||
$.post('TblEditor.php', {cmd: 'add', tableName: selectedTable, Key: key, String: string}, function (response) {
|
||||
// Handle the response here
|
||||
rowid = response;
|
||||
// Create the HTML markup for the new row
|
||||
var newRow = '<tr class="row-' + rowid + '">' +
|
||||
'<td>' + rowid + '</td>' +
|
||||
'<td><input type="text" value="' + key + '" class="form-control"></td>' +
|
||||
'<td><textarea class="form-control">' + string + '</textarea></td>' +
|
||||
'<td><div>' +
|
||||
'<a href="#" class="update-link btn btn-primary" data-rowid="' + rowid + '">Update</a>' +
|
||||
'<a style="float:right" href="#" class="delete-link btn btn-danger" data-rowid="' + rowid + '">Delete</a>' +
|
||||
'</div></td>' +
|
||||
'</tr>';
|
||||
;
|
||||
|
||||
|
||||
// Append the new row to the table
|
||||
$('.table').DataTable().destroy();
|
||||
|
||||
// Update link click event handler
|
||||
$(document).on('click', '.update-link', function (event) {
|
||||
event.preventDefault();
|
||||
$('.table tbody').append(newRow);
|
||||
|
||||
var selectedTable = $('select[name="tableName"]').val();
|
||||
|
||||
// Get the rowid from the custom attribute data-rowid
|
||||
var rowid = $(this).data('rowid');
|
||||
|
||||
// Get the updated values from the corresponding input and textarea
|
||||
var key = $('.row-' + rowid + ' input').val();
|
||||
var string = $('.row-' + rowid + ' textarea').val();
|
||||
string = string.replace(/ /g, '\\n');
|
||||
string = string.replace(/\n/g, '\\n');
|
||||
|
||||
|
||||
// Send POST request to TblEditor.php with the updated values
|
||||
$.post('TblEditor.php', {cmd: 'update', tableName: selectedTable, rowid: rowid, key: key, string: string}, function (response) {
|
||||
// Handle the response here
|
||||
|
||||
// Optional: Update any UI elements if needed
|
||||
// Initialize DataTables on the table
|
||||
var table = $('.table').DataTable();
|
||||
|
||||
// Go to the last page after loading the table
|
||||
table.page('last').draw('page');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
// Add link click event handler
|
||||
$('#addLink').click(function () {
|
||||
var selectedTable = $('#tableName').val();
|
||||
var key = $('#inputKey').val();
|
||||
var string = $('#inputString').val();
|
||||
|
||||
// Send POST request to TblEditor.php with parameters
|
||||
$.post('TblEditor.php', {cmd: 'add', tableName: selectedTable, Key: key, String: string}, function (response) {
|
||||
// Handle the response here
|
||||
rowid = response;
|
||||
// Create the HTML markup for the new row
|
||||
var newRow = '<tr class="row-' + rowid + '">' +
|
||||
'<td>' + rowid + '</td>' +
|
||||
'<td><input type="text" value="' + key + '" class="form-control"></td>' +
|
||||
'<td><textarea class="form-control">' + string + '</textarea></td>' +
|
||||
'<td><div>' +
|
||||
'<a href="#" class="update-link btn btn-primary" data-rowid="' + rowid + '">Update</a>' +
|
||||
'<a style="float:right" href="#" class="delete-link btn btn-danger" data-rowid="' + rowid + '">Delete</a>' +
|
||||
'</div></td>' +
|
||||
'</tr>';
|
||||
;
|
||||
|
||||
|
||||
// Append the new row to the table
|
||||
$('.table').DataTable().destroy();
|
||||
|
||||
$('.table tbody').append(newRow);
|
||||
|
||||
// Initialize DataTables on the table
|
||||
var table = $('.table').DataTable();
|
||||
|
||||
// Go to the last page after loading the table
|
||||
table.page('last').draw('page');
|
||||
$(document).ready(function () {
|
||||
$('textarea').each(function () {
|
||||
this.style.height = 'auto';
|
||||
this.style.height = (this.scrollHeight) + 'px';
|
||||
});
|
||||
setInterval(function () {
|
||||
$('textarea').each(resizeTextarea);
|
||||
}, 4000);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
$('textarea').each(function () {
|
||||
this.style.height = 'auto';
|
||||
this.style.height = (this.scrollHeight) + 'px';
|
||||
});
|
||||
setInterval(function () {
|
||||
$('textarea').each(resizeTextarea);
|
||||
}, 4000);
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background: #f8f8f8;
|
||||
margin: 10px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_length select {
|
||||
width: 75px !important;
|
||||
}
|
||||
textarea {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
scrollbar-width: none; /* For Firefox */
|
||||
-ms-overflow-style: none; /* For Internet Explorer and Edge */
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background: #f8f8f8;
|
||||
margin: 10px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_length select {
|
||||
width: 75px !important;
|
||||
}
|
||||
textarea {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
scrollbar-width: none; /* For Firefox */
|
||||
-ms-overflow-style: none; /* For Internet Explorer and Edge */
|
||||
}
|
||||
#loading-spinner {
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user