I am facing an issue with my Magnific Popup page:
function dataLink(){
$.magnificPopup.open({
items: {
src: 'datapage.html',
type: 'ajax'
},
closeOnContentClick : false,
closeOnBgClick :true,
showCloseBtn: false,
enableEscapeKey : false,
callbacks: {
open: function(){
$.magnificPopup.instance.wrap[0].addEventListener('focus', mpTable);
},
close: function(){
$.magnificPopup.instance.wrap[0].removeEventListener('focus', mpTable);
},
}
});
}
The datapage.html contains two tables that are initially hidden or shown based on the context (with data1table being visible and data2table hidden):
<div class="white-popup">
<table id="data1table" class="table1">
</table>
<table id="data2table" class="table2">
</table>
</div>
There is a button within table1 that switches the visibility to table2. In table2, there is also another button that triggers a JavaScript function to check and send data:
<input onclick="dataCheck()" type="button" value="Check Data" />
This function is defined as follows:
function dataCheck(){
if(datacheck[0]==false || datacheck[1]==false){
alert("Please enter data in all fields correctly.");
} else{
$.ajax({
url: 'dataconfirm.php',
type: "POST",
async: false,
data: {
},
dataType: 'json',
success: function(data){
alert("Thank you!");
localdata=data;
$.magnificPopup.close();
}
});
};
}
My challenge arises when clicking the button to execute dataCheck(); it reverts back to showing table1 without running the function. However, upon clicking the button a second time to display table2, the functionality of dataCheck() works as expected. I'm puzzled by this behavior and would appreciate any insights or suggestions to address this issue. Thank you!