Здесь у меня есть установленный интервал , который, я думаю, перезагрузит страницу автоматически при получении данных.
здесь, пожалуйста, посмотрите мой пользовательский интерфейс и как я отображаю модал без обновления,и у меня есть соединение с базой данных, поэтому есть основание для того, как я вызову модальный , когда я отправляю кнопку, он вставит id, и что id будет сохранено вмодальный, так что модальный будет вызывать и отображать .
clickModal.php - здесь, где кнопка должна щелкнуть и запустит модальный режим и отобразит его без обновления наmy home.php
home.php - здесь модал должен всплывающее или отображаться, когда я нажимаю кнопку наclickModal.php
на данный момент он работает, но мне нужно обновить страницу на home.php, прежде чем модал появится или появится здесь мой код.
clickModal.php нажатие кнопки / ajax success.
Yes:
btnClass: 'btn-green',
action: function () {
$.ajax({
type: "POST",
url: "announcement.php",
data: {
addInfo: addInfo
},
dataType: "text",
success: function (data) {
window.location.replace("change-password.php");
},
error: function (err) {
console.log(err);
}
});
}
home.php
подключение к моей базе данных
$data = mysqli_query($con,"SELECT * FROM announcement");
$count = mysqli_num_rows($data);
мой скрипт
<script>
var still_fetching = false;
//fetch data every 3 seconds (3000)
setInterval(function(){
if (still_fetching) {
return;
}
still_fetching = true;
loadUsers();
}, 3000);
//need to update a bit this function
function loadUsers(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'home.php', true);
xhr.onload = function(){
if(this.status == 200){
var users = JSON.parse(this.responseText);
var output = '';
for(var i in users){
output += '<div id="myModal" class="modal" style="position:fixed; display: none; padding-top: 100px;'+
'left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); ">'+
'<div class="container" style="width: 100%">'+
'<div class="card col-12" style="background-color: red; color: white;">'+
'<div class="card-header">'+
'<p><h3 class="text-center">Announcement</h3></p>'+
'</div>'+
'<div class="card-body text-center">'+
'<p>Please click refresh button to resume after the announcement</p>'+
'</div>'+
'</div>'+
'</div>'+
'<img class="modal-content" id="img01">'+
'</div>';
}
document.getElementById('myModal').style.display='block';
still_fetching = false;
}
}
xhr.send();
}
</script>
что я простонеобходимо, чтобы модал отображался без какого-либо обновления при его запуске.