Mixing
PHP - Ajax Auto Refresh Page when Data is Fetch
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
Here I have a set interval, which I think will reload the page automatically when data is fetched.
here please look my UI and how am i displaying the modal without refresh,and i have database connection so there is a basis on how i will trigger the modal when i submit the button it will insert an id and that id will be save in the modal so the modal will trigger and display.
clickModal.php - here is where the button should click and will trigger the modal and display it without refresh on my home.php
home.php - here is where the modal should popup or display when I click the button on clickModal.php
for now it is working but I need to refresh the page on home.php before the modal will display or pop up here is my code.
clickModal.php button click / 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
my database connection
$data = mysqli_query($con,"SELECT * FROM announcement");
$count = mysqli_num_rows($data);
my script
<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>
what I just need is to display the modal without any refresh when it is triggered.
javascript php jquery mysql ajax
edited Jan 3 at 5:18
Umar Abdullah
717419
|
show 2 more comments
Here I have a set interval, which I think will reload the page automatically when data is fetched.
here please look my UI and how am i displaying the modal without refresh,and i have database connection so there is a basis on how i will trigger the modal when i submit the button it will insert an id and that id will be save in the modal so the modal will trigger and display.
clickModal.php - here is where the button should click and will trigger the modal and display it without refresh on my home.php
home.php - here is where the modal should popup or display when I click the button on clickModal.php
for now it is working but I need to refresh the page on home.php before the modal will display or pop up here is my code.
clickModal.php button click / 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
my database connection
$data = mysqli_query($con,"SELECT * FROM announcement");
$count = mysqli_num_rows($data);
my script
<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>
what I just need is to display the modal without any refresh when it is triggered.
javascript php jquery mysql ajax
edited Jan 3 at 5:18
Umar Abdullah
717419
The problem statement is not clear please elaborate more.
– Googlian
Jan 3 at 6:32
main question here is how can i show the modal? or triggered it when i the ajax is success
– user10701881
Jan 3 at 6:34
So you need the model open once your ajax call success, without refreshing the page ?
– Googlian
Jan 3 at 6:38
You are CORRECT!! yep :)
– user10701881
Jan 3 at 6:38
Are you using Bootstrap 4. ?
– Googlian
Jan 3 at 6:39
|
show 2 more comments
Here I have a set interval, which I think will reload the page automatically when data is fetched.
here please look my UI and how am i displaying the modal without refresh,and i have database connection so there is a basis on how i will trigger the modal when i submit the button it will insert an id and that id will be save in the modal so the modal will trigger and display.
clickModal.php - here is where the button should click and will trigger the modal and display it without refresh on my home.php
home.php - here is where the modal should popup or display when I click the button on clickModal.php
for now it is working but I need to refresh the page on home.php before the modal will display or pop up here is my code.
clickModal.php button click / 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
my database connection
$data = mysqli_query($con,"SELECT * FROM announcement");
$count = mysqli_num_rows($data);
my script
<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>
what I just need is to display the modal without any refresh when it is triggered.
javascript php jquery mysql ajax
edited Jan 3 at 5:18
Umar Abdullah
717419
Here I have a set interval, which I think will reload the page automatically when data is fetched.
here please look my UI and how am i displaying the modal without refresh,and i have database connection so there is a basis on how i will trigger the modal when i submit the button it will insert an id and that id will be save in the modal so the modal will trigger and display.
clickModal.php - here is where the button should click and will trigger the modal and display it without refresh on my home.php
home.php - here is where the modal should popup or display when I click the button on clickModal.php
for now it is working but I need to refresh the page on home.php before the modal will display or pop up here is my code.
clickModal.php button click / 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
my database connection
$data = mysqli_query($con,"SELECT * FROM announcement");
$count = mysqli_num_rows($data);
my script
<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>
what I just need is to display the modal without any refresh when it is triggered.
javascript php jquery mysql ajax
javascript php jquery mysql ajax
edited Jan 3 at 5:18
Umar Abdullah
717419
edited Jan 3 at 5:18
Umar Abdullah
717419
edited Jan 3 at 5:18
Umar Abdullah
717419
edited Jan 3 at 5:18
Umar Abdullah
717419
edited Jan 3 at 5:18
Umar Abdullah
717419
717419
asked Jan 3 at 5:02
user10701881
The problem statement is not clear please elaborate more.
– Googlian
Jan 3 at 6:32
main question here is how can i show the modal? or triggered it when i the ajax is success
– user10701881
Jan 3 at 6:34
So you need the model open once your ajax call success, without refreshing the page ?
– Googlian
Jan 3 at 6:38
You are CORRECT!! yep :)
– user10701881
Jan 3 at 6:38
Are you using Bootstrap 4. ?
– Googlian
Jan 3 at 6:39
|
show 2 more comments
The problem statement is not clear please elaborate more.
– Googlian
Jan 3 at 6:32
main question here is how can i show the modal? or triggered it when i the ajax is success
– user10701881
Jan 3 at 6:34
So you need the model open once your ajax call success, without refreshing the page ?
– Googlian
Jan 3 at 6:38
You are CORRECT!! yep :)
– user10701881
Jan 3 at 6:38
Are you using Bootstrap 4. ?
– Googlian
Jan 3 at 6:39
The problem statement is not clear please elaborate more.
– Googlian
Jan 3 at 6:32
The problem statement is not clear please elaborate more.
– Googlian
Jan 3 at 6:32
main question here is how can i show the modal? or triggered it when i the ajax is success
– user10701881
Jan 3 at 6:34
main question here is how can i show the modal? or triggered it when i the ajax is success
– user10701881
Jan 3 at 6:34
So you need the model open once your ajax call success, without refreshing the page ?
– Googlian
Jan 3 at 6:38
So you need the model open once your ajax call success, without refreshing the page ?
– Googlian
Jan 3 at 6:38
You are CORRECT!! yep :)
– user10701881
Jan 3 at 6:38
You are CORRECT!! yep :)
– user10701881
Jan 3 at 6:38
Are you using Bootstrap 4. ?
– Googlian
Jan 3 at 6:39
Are you using Bootstrap 4. ?
– Googlian
Jan 3 at 6:39
|
show 2 more comments
1 Answer
1
active
oldest
votes
So your question is to open the modal once your Ajax call responded:
Your Ajax call should be:
$.get("youpage.php",{ bar: "foo"}, function(data, status){
// Trigger your modal
});
answered Jan 3 at 6:48
GooglianGooglian
1,6251719
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016599%2fphp-ajax-auto-refresh-page-when-data-is-fetch%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
So your question is to open the modal once your Ajax call responded:
Your Ajax call should be:
$.get("youpage.php",{ bar: "foo"}, function(data, status){
// Trigger your modal
});
answered Jan 3 at 6:48
GooglianGooglian
1,6251719
add a comment |
So your question is to open the modal once your Ajax call responded:
Your Ajax call should be:
$.get("youpage.php",{ bar: "foo"}, function(data, status){
// Trigger your modal
});
answered Jan 3 at 6:48
GooglianGooglian
1,6251719
add a comment |
So your question is to open the modal once your Ajax call responded:
Your Ajax call should be:
$.get("youpage.php",{ bar: "foo"}, function(data, status){
// Trigger your modal
});
answered Jan 3 at 6:48
GooglianGooglian
1,6251719
So your question is to open the modal once your Ajax call responded:
Your Ajax call should be:
$.get("youpage.php",{ bar: "foo"}, function(data, status){
// Trigger your modal
});
answered Jan 3 at 6:48
GooglianGooglian
1,6251719
answered Jan 3 at 6:48
GooglianGooglian
1,6251719
answered Jan 3 at 6:48
GooglianGooglian
1,6251719
answered Jan 3 at 6:48
GooglianGooglian
1,6251719
1,6251719
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016599%2fphp-ajax-auto-refresh-page-when-data-is-fetch%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The problem statement is not clear please elaborate more.
– Googlian
Jan 3 at 6:32
main question here is how can i show the modal? or triggered it when i the ajax is success
– user10701881
Jan 3 at 6:34
So you need the model open once your ajax call success, without refreshing the page ?
– Googlian
Jan 3 at 6:38
You are CORRECT!! yep :)
– user10701881
Jan 3 at 6:38
Are you using Bootstrap 4. ?
– Googlian
Jan 3 at 6:39