We Keep Coding

hide and show materialize preloader

I'm trying to hide the progress first to show the tables I have and then trying to show it when I click on my javascript function, but I can't do it. what am I doing wrong?
i am using materialize, sweetalert2 and ajax.
This is my code:
PHP
<div class="progress container" id="progreso" >
<div id="barra" class="indeterminate"></div>
</div>
JAVASCRIPT
src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
$("#progreso").hide(); // <-----I hide it first
$(document).ready(function() {
$('#btnEnviar').click(function() {
Swal.fire({
title: "Ingrese una fecha inicial y una final",
confirmButtonText: "Aceptar",
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showDenyButton: true,
denyButtonText: "Cancelar",
background: "linear-gradient(63deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 37%, rgba(0,212,255,1) 100%)",
color: "#FFFFFF",
html: '<input type="date" id="Date1" class="flex-nowrap w-50 swal2-input">' + '<br>' +
'<input type="date" id="Date2" class="flex-nowrap w-50 swal2-input">',
}).then(function(isConfirm) {
$("#progreso").show(); //<-----------when i click ok show the progress bar
var date1 = $('#Date1').val();
var date2 = $('#Date2').val();
if (isConfirm.isConfirmed) {
if (date1 > date2) {
$.ajax({
type: "POST",
url: url2,
dataType: "json",
data: { 'date1': date1, "date2": date2 },
success: function(datospos) {
$("#table").empty();
datospos.forEach(pos => {
var tablapos = "<tr>" +
"<td>" + pos.name + "</td>" +
"<td>" + pos.venta + "</td>" +
"<td>" + pos.date + "</td>" +
"<td>" + pos.asistencia + "</td>" +
"<td>" + pos.factor + "%" + "</td>" +
"</tr>";
$("#tableReportePos").append(tablapos);
}); // termia el foreach
$("#table tr:last").css('background-color', '#e6e6e7').css('font-weight', '800');
}
});
});
$('#progreso').hide(); // <----- hide progress bar again when finished loading the all tables
});
I need that when clicking on the button the progress is shown but it only stays in the hide

How to continue custom dataTable after DataTable().row.add()?

I've already initialized dataTable once when i do DataTable().row.add(), but i still need to do some extra methods with that datatable. For example, i need to do this api method:
$('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'colvis' ] } );
but there is an alert DataTables warning: table id=dataTable - Cannot reinitialise DataTable for every rows i have in my datatables, it means if i have 10 rows, this alert will show 10 times, althought after i skip all these alert, everything looks fine then, and there is no error in the console,too
Here is my code:
following some comments below, i've UPDATED my code
var myTable = $('#dataTable').DataTable({ dom: 'Bfrtip', buttons: ['colvis'] });
var row = $('#dataTable tbody tr:first');
myTable.row.add([
'<img width="70px" height="100px" src="' + childData.poster + '">',
'<p style="height:100px;overflow:auto;text-align:center">' + childData.title + '</p>',
'<a style="text-align:center" href="javascript: void(0)" onclick="showModalListChapter(' + "'" + childKey + "'" + "," + "'" + childData.title + "'" + ')">' + totalChapters + '</a>',
'<p style="height:100px;overflow:auto;text-align:center">' + childData.author + '</p>',
'<p style="width:100px;height:100px;overflow:auto;text-align:center">' + childData.category + '</p>',
'<p style="text-align:center">' + childData.state + '</p>',
'<p style="width:350px;height:100px;overflow:auto;text-align:center">' + childData.description + '</p>',
'<p style="text-align:center">' + childData.totalViews + '</p>',
'<p style="text-align:center">' + childData.totalLikes + '</p>',
'<button class="btn btn-danger" style="margin-bottom:20px" onclick="deleteManga(' + "'" + childKey + "'" + ')">xóa</button>' +
'<button class="btn btn-warning" onclick="showModalUpdateManga(' + "'" + childKey + "'" + ')">sửa</button>',
'<p style="text-align:center">' + childData.createdDate + '</p>',
'<p style="text-align:center">' + childData.updatedDate + '</p>',
]).draw(false);
The same problem still happens

Most likely (hard to say for 100% because you haven't given us your code segment), you need to init the datatable to a variable, and then use the object in that variable to add your rows. So:
$(document).ready(function() {
var myTable = $('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'colvis' ] } );
//and then, under some condition, and likely inside a function:
myTable.row.add(data);
} );
The DataTables documentation on row.add() has further examples.
UPDATE
Here is a Fiddle demo that shows the basics for initializing a Datatable and then adding a row: https://jsfiddle.net/zephyr_hex/enkmhb2t/13/

Rebuild actual FullCalendar eventClick Function

I have a fullcalendar calendar where the click-events having sweet-alert 2 popups in the functions. The pop up boxes have multiple drop downs that are built using sweet-alert HTML functionality. Here's an example of the code,
eventClick: function (calEvent, jsEvent, view, date) {
var clickValue = calEvent.description;
if (clickValue != 'OWEDVALUE') {
var btn = "button";
drop = drop.replace("select-style-purple", "select-style-green");
options = options.replace("select-style-purple", "select-style-green");
var title = calEvent.title.replace("\n", "<br />");
swal({
title: moment(calEvent.start).format("MM/DD/YYYY"),
type: 'info',
inputClass: 'select-style-green',
inputValue: calEvent.teachNum,
html: title + '<br />' +
'Notes: ' + calEvent.description + '<br /><br />Select A New Teacher: <br /><br />' + options + '<p></p>Select A New Service: <br /><br />' + drop +
'<br /><br /><div style="border:2px solid green;" >Update Hours: ' +
'<input type="text" autofocus id="newHours" style="display:block !important;" class="sweet-alert-input"/>' +
'<input type="hidden" id="oldHours" value="' + calEvent.hours + '" /></div>' +
'<button type="' + btn + '" id="btnA" value="' + calEvent.id + '" style="background-color: #D46752 !important;" class="sweet-alert2-button">Delete Record</button> ' +
'<button type="' + btn + '" id="btnB" value="' + calEvent.id + '" class="sweet-alert2-button">Update Record</button> ' +
'<button type="' + btn + '" id="btnC" style="background-color: #B9B9B9 !important;" class="sweet-alert2-button">Cancel</button>',
showConfirmButton: false
});
$(this).css('border-color', 'red');
}
This is an example of one of the drop down boxes built in a javascript var.
options = '<select id="teacherDrop" class="select-style-green">';
for (var i = 0; i < record_array.length; i++) {
options += '<option value="' + record_array[i].teachNum + '" ';
if (record_array[i].teachName == data[0].teacher)
options = options + ' selected="selected" >' + record_array[i].teachName + 'TEST</option>';
else
options = options + '>' + record_array[i].teachName + 'TEST</option>';
}options += '</select>';
What I would like to do is to rebuild the drop downs(updating the selected value) after every click-event ajax call, so I need to rebuild the actual eventClick functions not the eventSources. I have tried multiple things to no avail.
Here is the function that gets called when one of the submit buttons gets pressed from the Sweet-Alert.
$(document).on('click', "#btnB", function () {
if ($.isNumeric($("#newHours").val())) {
var qString;
qString = "id=" + this.value;
qString += "&teacherId=" + $("#teacherDrop").val();
qString += "&hours=" + $("#newHours").val();
qString += "&service=" + $("#serviceDrop").val();
$.ajax({
type: "POST",
url: "_data_ManageHomebound_Students.aspx?qt=updateStudentRecord",
data: qString,
async: false,
success: function (data) {
data = JSON.parse(data);
swal.close();
$('#calendar').fullCalendar('removeEvents', data[0].id);
$("#calendar").fullCalendar('renderEvent', {
title: "Service Type: " + data[0].serviceType + "\nTeacher: " + data[0].teacher + "\nHours: " + $("#newHours").val(),
id: data[0].id,
start: data[0].start,
end: data[0].start,
allDay: data[0].allDay,
description: data[0].description,
teacher: data[0].teacher,
homeBoundPaidID: data[0].homeBoundPaidID,
teachNum: data[0].teachNum,
serviceType: data[0].serviceType,
color: 'green',
textColor: 'black'
}, false);
$('#ant').addClass('animated zoomInDown').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass('animated zoomInDown');
});
//Here I'm going to rebuild the service type drop down and try to recreate all click events.
var options;
options = '<select id="teacherDrop" class="select-style-green">';
for (var i = 0; i < record_array.length; i++) {
options += '<option value="' + record_array[i].teachNum + '" ';
if (record_array[i].teachName == data[0].teacher)
options = options + ' selected="selected" >' + record_array[i].teachName + 'REBUILT</option>';
else
options = options + '>' + record_array[i].teachName + 'REBUILT</option>';
}
options += '</select>';
var temp = $("#hoursGiven").val();
if ($("#newHours").val() >= $("#oldHours").val()) {
temp = parseFloat(temp) + (parseFloat($("#newHours").val()) - parseFloat($("#oldHours").val()));
} else {
temp = parseFloat(temp) - (parseFloat($("#oldHours").val()) - parseFloat($("#newHours").val()));
}
$("#hoursGiven").val("");
$("#hoursGiven").val(temp);
$("#hoursOwed").val(parseFloat($("#totHoursNeeded").val()) - parseFloat(temp))
}
});
} else {
sweetAlert({
title: "Oops!",
text: "Please Make Sure Pay Rate is Numeric. \nPlease fix form and try again.",
type: "error"
});
return false;
}
});
So after the Ajax is successful I rebuild the options var that holds the drop down information for Sweet-Alert. This is the point where I need all of the click-events to be rebuilt to use the updated code(options var). The purpose of this is I'm trying to get the drop downs to have a pre-selected value of the most recently used item(teacher, etc...).

How to display multiple points of one series in tooltip with highcharts?

I am having a highcharts chart, which is using a HTML-tooltip. That tooltip shows -of course- the values which are available on the x-axis.
chart: {
tooltip: {
shared: true,
useHTML: true,
formatter: function () {
var html = '<table>';
_.forEach(this.points, function (point) {
html += '<tr>' +
'<td style="color: ' + point.series.color + '">' + point.series.name + ': </td>' +
'<td style="text-align: right; font-weight: bold">' + $currency(point.y, point.point.symbol, 2) + '</td>' +
'</tr><tr>' +
'<td colspan="3" style="text-align: right">' + point.point.articelno + '</td>' +
'</tr>';
});
html += '</table>';
return html;
},
style: {
padding: 10
}
}
}
The problem is, that the series can have one-or-more points on the same x-line, which I want to display in the same tooltip, but I find no way to do so.
Any ideas for me?

jQuery - dynamic added button click not working

I wrote the following code creating a popup with dynamic added content. Now I want to delete these added items or edit them, but it didn't seem to fire an event clicking one of those buttons (btnLSM_Remove + btnLSM_Edit). Any clues why it is so? btnLSM_Add and btnLSM_Okay work the same way and they do work...
function ListManagementDialog(obj, dialogTitle, dialogText, listDelimiter, btnNames) {
if (!$.isArray(btnNames)) {
return false;
}
if (dialogConfirmed) {
return false;
}
btns[btnNames[0]] = function () {
$(this).dialog('close');
dialogConfirmed = true;
if (obj) {
obj.click();
}
};
btns[btnNames[1]] = function () {
$(this).dialog('close');
};
$('body').append(String.Format('<div id="divLSM_Dialog" title="{0}"><p>{1}</p>' +
'<button id="btnLSM_Add" class="btnAdd" type="button" role="button" aria-disabled="false" title="Hinzufügen" />' +
'<input id="txbLSM_Emailadresse" class="text ui-widget-content ui-corner-all" type="text" name="txbLSM_Emailadresse" style="display:none;">' +
'<button id="btnLSM_Okay" class="btnOkay" type="button" role="button" aria-disabled="false" title="Übernehmen" style="display:none;" />' +
'<br /><br />' +
'<table id="tblLSM_Items" class="ui-widget ui-widget-content">' +
'<thead>' +
'<tr class="ui-widget-header ">' +
'<th>Emailadresse</th>' +
'<th />' +
'</tr>' +
'</thead>' +
'<tbody />' +
'</table>' +
'</div>', dialogTitle, dialogText));
$('#btnLSM_Add').click(function () {
$('#txbLSM_Emailadresse').val('');
$('#txbLSM_Emailadresse').show();
$('#btnLSM_Okay').show();
$('#txbLSM_Emailadresse').focus();
});
$('#btnLSM_Okay').click(function () {
$('#tblLSM_Items tbody').append('<tr>' +
'<td>' + $('#txbLSM_Emailadresse').val() + '</td>' +
'<td>' + '<button id="btnLSM_Remove" class="btnRemove" type="button" role="button" aria-disabled="false" title="Entfernen" />' + '<button id="btnLSM_Change" class="btnEdit" type="button" role="button" aria-disabled="false" title="Ändern" />' + '</td>' +
'</tr>');
$('#txbLSM_Emailadresse').hide();
$('#btnLSM_Okay').hide();
});
$('#btnLSM_Remove').click(function () {
alert("hohoho"); //no alert-popup
});
$('#btnLSM_Change').click(function () {
alert("hohoho"); //no alert-popup
});
$('#divLSM_Dialog').dialog({
modal: true,
resizable: false,
draggable: true,
width: 600,
height: 300,
close: function (event, ui) {
$('body').find('#divLSM_Dialog').remove();
},
buttons: btns
});
return dialogConfirmed;
}

Your btnLSM_Remove button doesn't exist when you call
$('#btnLSM_Remove').click(function () {
So the $('#btnLSM_Remove') collection is empty and the handler is added to nothing.
You may use the on function:
$('#divLSM_Dialog').on('click', '#btnLSM_Remove', function () {
to register an handler that will apply to a button appearing after the delegation definition.
EDIT :
In jQuery 1.6.2, you may use live :
$('#btnLSM_Remove').live('click', function () {