While the button functions smoothly in Chrome and Safari, it encounters issues in Internet Explorer. In Chrome, the button changes instantly upon clicking. However, in IE, although the status changes in the database upon clicking the button, the visual change does not occur until after a page refresh (F5).
Furthermore, a new problem has surfaced in older versions of Internet Explorer where only the first button loads and subsequent buttons do not appear. This issue is not present in other browsers.
To address these problems, I have created a div on the page where the button is generated and implemented the following script:
// JavaScript Document
function checkStatus(data, user) {
var result = null;
var scriptUrl = "../../templates/template/php/status.php?data="+data+"&user="+user;
jQuery.ajax({
url: scriptUrl,
type: 'GET',
dataType: 'html',
async: false,
success: function(data) {
result = data;
}
});
return result;
}
function setButton(data, user) {
var status = checkStatus(data, user);
if (status === '1') {
jQuery("#button" + data).removeClass("btn-primary").removeClass("btn-danger").addClass("btn-success").attr('value', 'aanwezig');
}
if (status === '0') {
jQuery("#button" + data).removeClass("btn-primary").removeClass("btn-success").addClass("btn-danger").attr('value', 'afwezig');
}
}
function changeStatus(data, user) {
var status = checkStatus(data, user);
if (status === '1') {
//afmelden
var scriptUrl = "../../templates/template/php/afmelden.php?data=" + data + "&user=" + user;
jQuery.ajax({
url: scriptUrl,
type: 'GET',
dataType: 'html',
async: false,
success: function() {
setButton(data, user);
}
});
}
if (status === '0') {
//aanmelden
var scriptUrl = "../../templates/template/php/aanmelden.php?data=" + data + "&user=" + user;
jQuery.ajax({
url: scriptUrl,
type: 'GET',
dataType: 'html',
async: false,
success: function() {
setButton(data, user);
}
});
}
}
function showButton(data, user) {
//set a button
jQuery("#" + data).replaceWith("<input type='submit' value='none' class='btn btn-primary' id='button" + data + "' />");
setButton(data, user);
jQuery("#button" + data).click(function() {
changeStatus(data, user);
});
}