Mixing
Refreshing div or page once with JS or jQuery / Ajax
So I want to reload the div or web page only once for a Flask web app I am working on but as I don't know JS well I am stuck with a loop instead of it refreshing just once.
Why am I trying to do this?
Before getting to this page a user inputs data and it does calculations and then through Selenium, it does a website screenshot the process takes too long so when the user hits enter it does the calcs and then redirects to the new page once on that page I call a fx that submits in the background via ajax the selenium function, a gif is loaded instead of the screenshot.
The goal is that once the ajax route completes, the div or page reloads only once to replace the gif and shows the screenshot (which I did through if/else in Jinja) Hope that made sense if not let me know.
This is the div I want to work on
<div id="siteimg" class="c">
{% if a.imgofsite != "" %}
<img class="c" src="{{ url_for('static', filename = '' + a.imgofsite ) }}" style="overflow: hidden;">
{% else %}
<img class="c" src="{{ url_for('static', filename = 'img/load.gif') }}" style="overflow: hidden;">
<h5 class="c" style="overflow: hidden;">RENDERING SCREENSHOT</h5>
{% endif %}
Below is the JS I am using to submit the form and then call it.
<script type="text/javascript">
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
});
}
</script>
<script>img_load();</script>
What I have tried:
This put me in a continuous loop
location.reload(true);
This gave me no response when I added it to the ajax call block
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
This one put me in a continuous loop as well
$("#siteimg").load(location.href + " #siteimg");
javascript jquery ajax
edited Nov 21 '18 at 14:45
davidism
63.6k12166184
asked Nov 21 '18 at 14:30
Jason MartinezJason Martinez
2817
add a comment |
So I want to reload the div or web page only once for a Flask web app I am working on but as I don't know JS well I am stuck with a loop instead of it refreshing just once.
Why am I trying to do this?
Before getting to this page a user inputs data and it does calculations and then through Selenium, it does a website screenshot the process takes too long so when the user hits enter it does the calcs and then redirects to the new page once on that page I call a fx that submits in the background via ajax the selenium function, a gif is loaded instead of the screenshot.
The goal is that once the ajax route completes, the div or page reloads only once to replace the gif and shows the screenshot (which I did through if/else in Jinja) Hope that made sense if not let me know.
This is the div I want to work on
<div id="siteimg" class="c">
{% if a.imgofsite != "" %}
<img class="c" src="{{ url_for('static', filename = '' + a.imgofsite ) }}" style="overflow: hidden;">
{% else %}
<img class="c" src="{{ url_for('static', filename = 'img/load.gif') }}" style="overflow: hidden;">
<h5 class="c" style="overflow: hidden;">RENDERING SCREENSHOT</h5>
{% endif %}
Below is the JS I am using to submit the form and then call it.
<script type="text/javascript">
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
});
}
</script>
<script>img_load();</script>
What I have tried:
This put me in a continuous loop
location.reload(true);
This gave me no response when I added it to the ajax call block
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
This one put me in a continuous loop as well
$("#siteimg").load(location.href + " #siteimg");
javascript jquery ajax
edited Nov 21 '18 at 14:45
davidism
63.6k12166184
asked Nov 21 '18 at 14:30
Jason MartinezJason Martinez
2817
add a comment |
So I want to reload the div or web page only once for a Flask web app I am working on but as I don't know JS well I am stuck with a loop instead of it refreshing just once.
Why am I trying to do this?
Before getting to this page a user inputs data and it does calculations and then through Selenium, it does a website screenshot the process takes too long so when the user hits enter it does the calcs and then redirects to the new page once on that page I call a fx that submits in the background via ajax the selenium function, a gif is loaded instead of the screenshot.
The goal is that once the ajax route completes, the div or page reloads only once to replace the gif and shows the screenshot (which I did through if/else in Jinja) Hope that made sense if not let me know.
This is the div I want to work on
<div id="siteimg" class="c">
{% if a.imgofsite != "" %}
<img class="c" src="{{ url_for('static', filename = '' + a.imgofsite ) }}" style="overflow: hidden;">
{% else %}
<img class="c" src="{{ url_for('static', filename = 'img/load.gif') }}" style="overflow: hidden;">
<h5 class="c" style="overflow: hidden;">RENDERING SCREENSHOT</h5>
{% endif %}
Below is the JS I am using to submit the form and then call it.
<script type="text/javascript">
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
});
}
</script>
<script>img_load();</script>
What I have tried:
This put me in a continuous loop
location.reload(true);
This gave me no response when I added it to the ajax call block
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
This one put me in a continuous loop as well
$("#siteimg").load(location.href + " #siteimg");
javascript jquery ajax
edited Nov 21 '18 at 14:45
davidism
63.6k12166184
asked Nov 21 '18 at 14:30
Jason MartinezJason Martinez
2817
So I want to reload the div or web page only once for a Flask web app I am working on but as I don't know JS well I am stuck with a loop instead of it refreshing just once.
Why am I trying to do this?
Before getting to this page a user inputs data and it does calculations and then through Selenium, it does a website screenshot the process takes too long so when the user hits enter it does the calcs and then redirects to the new page once on that page I call a fx that submits in the background via ajax the selenium function, a gif is loaded instead of the screenshot.
The goal is that once the ajax route completes, the div or page reloads only once to replace the gif and shows the screenshot (which I did through if/else in Jinja) Hope that made sense if not let me know.
This is the div I want to work on
<div id="siteimg" class="c">
{% if a.imgofsite != "" %}
<img class="c" src="{{ url_for('static', filename = '' + a.imgofsite ) }}" style="overflow: hidden;">
{% else %}
<img class="c" src="{{ url_for('static', filename = 'img/load.gif') }}" style="overflow: hidden;">
<h5 class="c" style="overflow: hidden;">RENDERING SCREENSHOT</h5>
{% endif %}
Below is the JS I am using to submit the form and then call it.
<script type="text/javascript">
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
});
}
</script>
<script>img_load();</script>
What I have tried:
This put me in a continuous loop
location.reload(true);
This gave me no response when I added it to the ajax call block
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
This one put me in a continuous loop as well
$("#siteimg").load(location.href + " #siteimg");
javascript jquery ajax
javascript jquery ajax
edited Nov 21 '18 at 14:45
davidism
63.6k12166184
asked Nov 21 '18 at 14:30
Jason MartinezJason Martinez
2817
edited Nov 21 '18 at 14:45
davidism
63.6k12166184
asked Nov 21 '18 at 14:30
Jason MartinezJason Martinez
2817
edited Nov 21 '18 at 14:45
davidism
63.6k12166184
edited Nov 21 '18 at 14:45
davidism
63.6k12166184
edited Nov 21 '18 at 14:45
davidism
63.6k12166184
63.6k12166184
asked Nov 21 '18 at 14:30
Jason MartinezJason Martinez
2817
asked Nov 21 '18 at 14:30
Jason MartinezJason Martinez
2817
asked Nov 21 '18 at 14:30
Jason MartinezJason Martinez
2817
2817
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
I guess you need to update the content of your div with the received data something like:
<script>
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
success: function(response) {
$('#siteimg').append(response);
},
error: function(jqXHR, exception) {
console.log('Ajax status: ' + jqXHR.status + ', error: ' exeption);
}
});
}
</script>
answered Nov 21 '18 at 15:26
Anderson Alberto Ochoa EstupiaAnderson Alberto Ochoa Estupia
97
This seemed right but getting a 302 error
– Jason Martinez
Nov 21 '18 at 15:43
Take a look at the modified answer @JasonMartinez
– Anderson Alberto Ochoa Estupia
Nov 21 '18 at 15:58
<script> var delayInMilliseconds = 60000; // 1 min function img_load() { $.ajax({ type: 'POST', url: '/siteimage/{{ a._id }}', }, setTimeout(function() { $('#siteimg').load(document.URL + ' #siteimg'); }, delayInMilliseconds) ) } img_load() </script> I got it to work with this.
– Jason Martinez
Nov 22 '18 at 4:07
add a comment |
So I figured it out. First, let me say thank you to all who were providing answers and editing to assist me in this issue.
For right now this is my solution. If any issues come up with this I definitely will add that info.
Once I am done with this project I definitely will be doing some JS/jQuery and Ajax courses.
<script>
var delayInMilliseconds = 60000; // 1 min
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
},
setTimeout(function() {
$('#siteimg').load(document.URL + ' #siteimg');
}, delayInMilliseconds)
)
}
img_load()
</script>
answered Nov 22 '18 at 4:10
Jason MartinezJason Martinez
2817
add a comment |
Does this help?
SetTimeout is will recall the ajax specific to the div siteimg after 2 seconds.
setTimeout(function() {
$.get(window.location.href + " #siteimg", function(data) {
//empty old contents
$('#siteimg').empty().append($(data).find('#siteimg').children());
//recall after contents are emptied
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}'
});
$('#siteimg').append("<img src='https://www.w3schools.com/w3css/img_lights.jpg'>");
$('#siteimg').append(
"<img src='https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg'>"
);
});
console.log($("#text").html());
}, 2000);answered Nov 21 '18 at 15:03
Olayinka OOlayinka O
488216
Doesn't work stays in a loop, remember I said i want it to refresh only once and doesn't refresh the div nor page. But thank you for the try.
– Jason Martinez
Nov 21 '18 at 15:11
Does clearing the divs content work? this is just an example, Run sample in your project...
– Olayinka O
Nov 21 '18 at 15:44
add a comment |
What if you use the browsers sessionStorage to track if the page was reloaded or not after the first visit.
At the end of your html insert the following js:
<script type="text/javascript">
if (!sessionStorage.getItem('reloaded')) {
// Page was not reloaded until last visit: do some stuff
sessionStorage.setItem('reloaded', true); // remeber the following reload for the next time
setTimeout(function () {
window.location.reload();
}, 100);
}else{
// Page was reloaded: clear your flag for the next visit
sessionStorage.removeItem('reloaded');
}
</script>
If you chose to show a modal that the user informs about the reload (what would good practise in my opinion) you should increase the setTimeout value from 100 to maybe 2500.
You can try it here (with addional console output): http://fiddle.bplaced.net/53414316/
Edit:
After reading your question again what you need is an ajax request. Reloading your site is just a workaround.
Although my solution should do what you have ask for - Andersons answer is what you should look for.
answered Nov 21 '18 at 15:31
Michael PMichael P
323116
I tried this code in addition to mine like this but it did nothing.
– Jason Martinez
Nov 21 '18 at 15:51
I had a typo insessionStorage. The flag has never been set :) fixed now
– Michael P
Nov 21 '18 at 16:19
Just tried it doesn't do anything and I tried it in Chrome and Firefox. Thanks anyway.
– Jason Martinez
Nov 22 '18 at 3:47
The code works, maybe you did not recognize the refresh. Here is an example with 5 seconds delay and additional console output: fiddle.bplaced.net/53414316
– Michael P
Nov 22 '18 at 11:24
Thanks but I fixed it already
– Jason Martinez
Nov 22 '18 at 14:48
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%2f53414316%2frefreshing-div-or-page-once-with-js-or-jquery-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
I guess you need to update the content of your div with the received data something like:
<script>
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
success: function(response) {
$('#siteimg').append(response);
},
error: function(jqXHR, exception) {
console.log('Ajax status: ' + jqXHR.status + ', error: ' exeption);
}
});
}
</script>
answered Nov 21 '18 at 15:26
Anderson Alberto Ochoa EstupiaAnderson Alberto Ochoa Estupia
97
This seemed right but getting a 302 error
– Jason Martinez
Nov 21 '18 at 15:43
Take a look at the modified answer @JasonMartinez
– Anderson Alberto Ochoa Estupia
Nov 21 '18 at 15:58
<script> var delayInMilliseconds = 60000; // 1 min function img_load() { $.ajax({ type: 'POST', url: '/siteimage/{{ a._id }}', }, setTimeout(function() { $('#siteimg').load(document.URL + ' #siteimg'); }, delayInMilliseconds) ) } img_load() </script> I got it to work with this.
– Jason Martinez
Nov 22 '18 at 4:07
add a comment |
I guess you need to update the content of your div with the received data something like:
<script>
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
success: function(response) {
$('#siteimg').append(response);
},
error: function(jqXHR, exception) {
console.log('Ajax status: ' + jqXHR.status + ', error: ' exeption);
}
});
}
</script>
answered Nov 21 '18 at 15:26
Anderson Alberto Ochoa EstupiaAnderson Alberto Ochoa Estupia
97
This seemed right but getting a 302 error
– Jason Martinez
Nov 21 '18 at 15:43
Take a look at the modified answer @JasonMartinez
– Anderson Alberto Ochoa Estupia
Nov 21 '18 at 15:58
<script> var delayInMilliseconds = 60000; // 1 min function img_load() { $.ajax({ type: 'POST', url: '/siteimage/{{ a._id }}', }, setTimeout(function() { $('#siteimg').load(document.URL + ' #siteimg'); }, delayInMilliseconds) ) } img_load() </script> I got it to work with this.
– Jason Martinez
Nov 22 '18 at 4:07
add a comment |
I guess you need to update the content of your div with the received data something like:
<script>
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
success: function(response) {
$('#siteimg').append(response);
},
error: function(jqXHR, exception) {
console.log('Ajax status: ' + jqXHR.status + ', error: ' exeption);
}
});
}
</script>
answered Nov 21 '18 at 15:26
Anderson Alberto Ochoa EstupiaAnderson Alberto Ochoa Estupia
97
I guess you need to update the content of your div with the received data something like:
<script>
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
success: function(response) {
$('#siteimg').append(response);
},
error: function(jqXHR, exception) {
console.log('Ajax status: ' + jqXHR.status + ', error: ' exeption);
}
});
}
</script>
answered Nov 21 '18 at 15:26
Anderson Alberto Ochoa EstupiaAnderson Alberto Ochoa Estupia
97
edited Nov 21 '18 at 15:57
answered Nov 21 '18 at 15:26
Anderson Alberto Ochoa EstupiaAnderson Alberto Ochoa Estupia
97
answered Nov 21 '18 at 15:26
Anderson Alberto Ochoa EstupiaAnderson Alberto Ochoa Estupia
97
answered Nov 21 '18 at 15:26
Anderson Alberto Ochoa EstupiaAnderson Alberto Ochoa Estupia
97
97
This seemed right but getting a 302 error
– Jason Martinez
Nov 21 '18 at 15:43
Take a look at the modified answer @JasonMartinez
– Anderson Alberto Ochoa Estupia
Nov 21 '18 at 15:58
<script> var delayInMilliseconds = 60000; // 1 min function img_load() { $.ajax({ type: 'POST', url: '/siteimage/{{ a._id }}', }, setTimeout(function() { $('#siteimg').load(document.URL + ' #siteimg'); }, delayInMilliseconds) ) } img_load() </script> I got it to work with this.
– Jason Martinez
Nov 22 '18 at 4:07
add a comment |
This seemed right but getting a 302 error
– Jason Martinez
Nov 21 '18 at 15:43
Take a look at the modified answer @JasonMartinez
– Anderson Alberto Ochoa Estupia
Nov 21 '18 at 15:58
<script> var delayInMilliseconds = 60000; // 1 min function img_load() { $.ajax({ type: 'POST', url: '/siteimage/{{ a._id }}', }, setTimeout(function() { $('#siteimg').load(document.URL + ' #siteimg'); }, delayInMilliseconds) ) } img_load() </script> I got it to work with this.
– Jason Martinez
Nov 22 '18 at 4:07
This seemed right but getting a 302 error
– Jason Martinez
Nov 21 '18 at 15:43
This seemed right but getting a 302 error
– Jason Martinez
Nov 21 '18 at 15:43
Take a look at the modified answer @JasonMartinez
– Anderson Alberto Ochoa Estupia
Nov 21 '18 at 15:58
Take a look at the modified answer @JasonMartinez
– Anderson Alberto Ochoa Estupia
Nov 21 '18 at 15:58
<script> var delayInMilliseconds = 60000; // 1 min function img_load() { $.ajax({ type: 'POST', url: '/siteimage/{{ a._id }}', }, setTimeout(function() { $('#siteimg').load(document.URL + ' #siteimg'); }, delayInMilliseconds) ) } img_load() </script> I got it to work with this.
– Jason Martinez
Nov 22 '18 at 4:07
<script> var delayInMilliseconds = 60000; // 1 min function img_load() { $.ajax({ type: 'POST', url: '/siteimage/{{ a._id }}', }, setTimeout(function() { $('#siteimg').load(document.URL + ' #siteimg'); }, delayInMilliseconds) ) } img_load() </script> I got it to work with this.
– Jason Martinez
Nov 22 '18 at 4:07
add a comment |
So I figured it out. First, let me say thank you to all who were providing answers and editing to assist me in this issue.
For right now this is my solution. If any issues come up with this I definitely will add that info.
Once I am done with this project I definitely will be doing some JS/jQuery and Ajax courses.
<script>
var delayInMilliseconds = 60000; // 1 min
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
},
setTimeout(function() {
$('#siteimg').load(document.URL + ' #siteimg');
}, delayInMilliseconds)
)
}
img_load()
</script>
answered Nov 22 '18 at 4:10
Jason MartinezJason Martinez
2817
add a comment |
So I figured it out. First, let me say thank you to all who were providing answers and editing to assist me in this issue.
For right now this is my solution. If any issues come up with this I definitely will add that info.
Once I am done with this project I definitely will be doing some JS/jQuery and Ajax courses.
<script>
var delayInMilliseconds = 60000; // 1 min
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
},
setTimeout(function() {
$('#siteimg').load(document.URL + ' #siteimg');
}, delayInMilliseconds)
)
}
img_load()
</script>
answered Nov 22 '18 at 4:10
Jason MartinezJason Martinez
2817
add a comment |
So I figured it out. First, let me say thank you to all who were providing answers and editing to assist me in this issue.
For right now this is my solution. If any issues come up with this I definitely will add that info.
Once I am done with this project I definitely will be doing some JS/jQuery and Ajax courses.
<script>
var delayInMilliseconds = 60000; // 1 min
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
},
setTimeout(function() {
$('#siteimg').load(document.URL + ' #siteimg');
}, delayInMilliseconds)
)
}
img_load()
</script>
answered Nov 22 '18 at 4:10
Jason MartinezJason Martinez
2817
So I figured it out. First, let me say thank you to all who were providing answers and editing to assist me in this issue.
For right now this is my solution. If any issues come up with this I definitely will add that info.
Once I am done with this project I definitely will be doing some JS/jQuery and Ajax courses.
<script>
var delayInMilliseconds = 60000; // 1 min
function img_load() {
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}',
},
setTimeout(function() {
$('#siteimg').load(document.URL + ' #siteimg');
}, delayInMilliseconds)
)
}
img_load()
</script>
answered Nov 22 '18 at 4:10
Jason MartinezJason Martinez
2817
answered Nov 22 '18 at 4:10
Jason MartinezJason Martinez
2817
answered Nov 22 '18 at 4:10
Jason MartinezJason Martinez
2817
answered Nov 22 '18 at 4:10
Jason MartinezJason Martinez
2817
2817
add a comment |
add a comment |
Does this help?
SetTimeout is will recall the ajax specific to the div siteimg after 2 seconds.
setTimeout(function() {
$.get(window.location.href + " #siteimg", function(data) {
//empty old contents
$('#siteimg').empty().append($(data).find('#siteimg').children());
//recall after contents are emptied
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}'
});
$('#siteimg').append("<img src='https://www.w3schools.com/w3css/img_lights.jpg'>");
$('#siteimg').append(
"<img src='https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg'>"
);
});
console.log($("#text").html());
}, 2000);answered Nov 21 '18 at 15:03
Olayinka OOlayinka O
488216
Doesn't work stays in a loop, remember I said i want it to refresh only once and doesn't refresh the div nor page. But thank you for the try.
– Jason Martinez
Nov 21 '18 at 15:11
Does clearing the divs content work? this is just an example, Run sample in your project...
– Olayinka O
Nov 21 '18 at 15:44
add a comment |
Does this help?
SetTimeout is will recall the ajax specific to the div siteimg after 2 seconds.
setTimeout(function() {
$.get(window.location.href + " #siteimg", function(data) {
//empty old contents
$('#siteimg').empty().append($(data).find('#siteimg').children());
//recall after contents are emptied
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}'
});
$('#siteimg').append("<img src='https://www.w3schools.com/w3css/img_lights.jpg'>");
$('#siteimg').append(
"<img src='https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg'>"
);
});
console.log($("#text").html());
}, 2000);answered Nov 21 '18 at 15:03
Olayinka OOlayinka O
488216
Doesn't work stays in a loop, remember I said i want it to refresh only once and doesn't refresh the div nor page. But thank you for the try.
– Jason Martinez
Nov 21 '18 at 15:11
Does clearing the divs content work? this is just an example, Run sample in your project...
– Olayinka O
Nov 21 '18 at 15:44
add a comment |
Does this help?
SetTimeout is will recall the ajax specific to the div siteimg after 2 seconds.
setTimeout(function() {
$.get(window.location.href + " #siteimg", function(data) {
//empty old contents
$('#siteimg').empty().append($(data).find('#siteimg').children());
//recall after contents are emptied
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}'
});
$('#siteimg').append("<img src='https://www.w3schools.com/w3css/img_lights.jpg'>");
$('#siteimg').append(
"<img src='https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg'>"
);
});
console.log($("#text").html());
}, 2000);answered Nov 21 '18 at 15:03
Olayinka OOlayinka O
488216
Does this help?
SetTimeout is will recall the ajax specific to the div siteimg after 2 seconds.
setTimeout(function() {
$.get(window.location.href + " #siteimg", function(data) {
//empty old contents
$('#siteimg').empty().append($(data).find('#siteimg').children());
//recall after contents are emptied
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}'
});
$('#siteimg').append("<img src='https://www.w3schools.com/w3css/img_lights.jpg'>");
$('#siteimg').append(
"<img src='https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg'>"
);
});
console.log($("#text").html());
}, 2000);setTimeout(function() {
$.get(window.location.href + " #siteimg", function(data) {
//empty old contents
$('#siteimg').empty().append($(data).find('#siteimg').children());
//recall after contents are emptied
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}'
});
$('#siteimg').append("<img src='https://www.w3schools.com/w3css/img_lights.jpg'>");
$('#siteimg').append(
"<img src='https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg'>"
);
});
console.log($("#text").html());
}, 2000);setTimeout(function() {
$.get(window.location.href + " #siteimg", function(data) {
//empty old contents
$('#siteimg').empty().append($(data).find('#siteimg').children());
//recall after contents are emptied
$.ajax({
type: 'POST',
url: '/siteimage/{{ a._id }}'
});
$('#siteimg').append("<img src='https://www.w3schools.com/w3css/img_lights.jpg'>");
$('#siteimg').append(
"<img src='https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg'>"
);
});
console.log($("#text").html());
}, 2000);answered Nov 21 '18 at 15:03
Olayinka OOlayinka O
488216
edited Nov 22 '18 at 7:36
answered Nov 21 '18 at 15:03
Olayinka OOlayinka O
488216
answered Nov 21 '18 at 15:03
Olayinka OOlayinka O
488216
answered Nov 21 '18 at 15:03
Olayinka OOlayinka O
488216
488216
Doesn't work stays in a loop, remember I said i want it to refresh only once and doesn't refresh the div nor page. But thank you for the try.
– Jason Martinez
Nov 21 '18 at 15:11
Does clearing the divs content work? this is just an example, Run sample in your project...
– Olayinka O
Nov 21 '18 at 15:44
add a comment |
Doesn't work stays in a loop, remember I said i want it to refresh only once and doesn't refresh the div nor page. But thank you for the try.
– Jason Martinez
Nov 21 '18 at 15:11
Does clearing the divs content work? this is just an example, Run sample in your project...
– Olayinka O
Nov 21 '18 at 15:44
Doesn't work stays in a loop, remember I said i want it to refresh only once and doesn't refresh the div nor page. But thank you for the try.
– Jason Martinez
Nov 21 '18 at 15:11
Doesn't work stays in a loop, remember I said i want it to refresh only once and doesn't refresh the div nor page. But thank you for the try.
– Jason Martinez
Nov 21 '18 at 15:11
Does clearing the divs content work? this is just an example, Run sample in your project...
– Olayinka O
Nov 21 '18 at 15:44
Does clearing the divs content work? this is just an example, Run sample in your project...
– Olayinka O
Nov 21 '18 at 15:44
add a comment |
What if you use the browsers sessionStorage to track if the page was reloaded or not after the first visit.
At the end of your html insert the following js:
<script type="text/javascript">
if (!sessionStorage.getItem('reloaded')) {
// Page was not reloaded until last visit: do some stuff
sessionStorage.setItem('reloaded', true); // remeber the following reload for the next time
setTimeout(function () {
window.location.reload();
}, 100);
}else{
// Page was reloaded: clear your flag for the next visit
sessionStorage.removeItem('reloaded');
}
</script>
If you chose to show a modal that the user informs about the reload (what would good practise in my opinion) you should increase the setTimeout value from 100 to maybe 2500.
You can try it here (with addional console output): http://fiddle.bplaced.net/53414316/
Edit:
After reading your question again what you need is an ajax request. Reloading your site is just a workaround.
Although my solution should do what you have ask for - Andersons answer is what you should look for.
answered Nov 21 '18 at 15:31
Michael PMichael P
323116
I tried this code in addition to mine like this but it did nothing.
– Jason Martinez
Nov 21 '18 at 15:51
I had a typo insessionStorage. The flag has never been set :) fixed now
– Michael P
Nov 21 '18 at 16:19
Just tried it doesn't do anything and I tried it in Chrome and Firefox. Thanks anyway.
– Jason Martinez
Nov 22 '18 at 3:47
The code works, maybe you did not recognize the refresh. Here is an example with 5 seconds delay and additional console output: fiddle.bplaced.net/53414316
– Michael P
Nov 22 '18 at 11:24
Thanks but I fixed it already
– Jason Martinez
Nov 22 '18 at 14:48
add a comment |
What if you use the browsers sessionStorage to track if the page was reloaded or not after the first visit.
At the end of your html insert the following js:
<script type="text/javascript">
if (!sessionStorage.getItem('reloaded')) {
// Page was not reloaded until last visit: do some stuff
sessionStorage.setItem('reloaded', true); // remeber the following reload for the next time
setTimeout(function () {
window.location.reload();
}, 100);
}else{
// Page was reloaded: clear your flag for the next visit
sessionStorage.removeItem('reloaded');
}
</script>
If you chose to show a modal that the user informs about the reload (what would good practise in my opinion) you should increase the setTimeout value from 100 to maybe 2500.
You can try it here (with addional console output): http://fiddle.bplaced.net/53414316/
Edit:
After reading your question again what you need is an ajax request. Reloading your site is just a workaround.
Although my solution should do what you have ask for - Andersons answer is what you should look for.
answered Nov 21 '18 at 15:31
Michael PMichael P
323116
I tried this code in addition to mine like this but it did nothing.
– Jason Martinez
Nov 21 '18 at 15:51
I had a typo insessionStorage. The flag has never been set :) fixed now
– Michael P
Nov 21 '18 at 16:19
Just tried it doesn't do anything and I tried it in Chrome and Firefox. Thanks anyway.
– Jason Martinez
Nov 22 '18 at 3:47
The code works, maybe you did not recognize the refresh. Here is an example with 5 seconds delay and additional console output: fiddle.bplaced.net/53414316
– Michael P
Nov 22 '18 at 11:24
Thanks but I fixed it already
– Jason Martinez
Nov 22 '18 at 14:48
add a comment |
What if you use the browsers sessionStorage to track if the page was reloaded or not after the first visit.
At the end of your html insert the following js:
<script type="text/javascript">
if (!sessionStorage.getItem('reloaded')) {
// Page was not reloaded until last visit: do some stuff
sessionStorage.setItem('reloaded', true); // remeber the following reload for the next time
setTimeout(function () {
window.location.reload();
}, 100);
}else{
// Page was reloaded: clear your flag for the next visit
sessionStorage.removeItem('reloaded');
}
</script>
If you chose to show a modal that the user informs about the reload (what would good practise in my opinion) you should increase the setTimeout value from 100 to maybe 2500.
You can try it here (with addional console output): http://fiddle.bplaced.net/53414316/
Edit:
After reading your question again what you need is an ajax request. Reloading your site is just a workaround.
Although my solution should do what you have ask for - Andersons answer is what you should look for.
answered Nov 21 '18 at 15:31
Michael PMichael P
323116
What if you use the browsers sessionStorage to track if the page was reloaded or not after the first visit.
At the end of your html insert the following js:
<script type="text/javascript">
if (!sessionStorage.getItem('reloaded')) {
// Page was not reloaded until last visit: do some stuff
sessionStorage.setItem('reloaded', true); // remeber the following reload for the next time
setTimeout(function () {
window.location.reload();
}, 100);
}else{
// Page was reloaded: clear your flag for the next visit
sessionStorage.removeItem('reloaded');
}
</script>
If you chose to show a modal that the user informs about the reload (what would good practise in my opinion) you should increase the setTimeout value from 100 to maybe 2500.
You can try it here (with addional console output): http://fiddle.bplaced.net/53414316/
Edit:
After reading your question again what you need is an ajax request. Reloading your site is just a workaround.
Although my solution should do what you have ask for - Andersons answer is what you should look for.
answered Nov 21 '18 at 15:31
Michael PMichael P
323116
edited Nov 22 '18 at 11:25
answered Nov 21 '18 at 15:31
Michael PMichael P
323116
answered Nov 21 '18 at 15:31
Michael PMichael P
323116
answered Nov 21 '18 at 15:31
Michael PMichael P
323116
323116
I tried this code in addition to mine like this but it did nothing.
– Jason Martinez
Nov 21 '18 at 15:51
I had a typo insessionStorage. The flag has never been set :) fixed now
– Michael P
Nov 21 '18 at 16:19
Just tried it doesn't do anything and I tried it in Chrome and Firefox. Thanks anyway.
– Jason Martinez
Nov 22 '18 at 3:47
The code works, maybe you did not recognize the refresh. Here is an example with 5 seconds delay and additional console output: fiddle.bplaced.net/53414316
– Michael P
Nov 22 '18 at 11:24
Thanks but I fixed it already
– Jason Martinez
Nov 22 '18 at 14:48
add a comment |
I tried this code in addition to mine like this but it did nothing.
– Jason Martinez
Nov 21 '18 at 15:51
I had a typo insessionStorage. The flag has never been set :) fixed now
– Michael P
Nov 21 '18 at 16:19
Just tried it doesn't do anything and I tried it in Chrome and Firefox. Thanks anyway.
– Jason Martinez
Nov 22 '18 at 3:47
The code works, maybe you did not recognize the refresh. Here is an example with 5 seconds delay and additional console output: fiddle.bplaced.net/53414316
– Michael P
Nov 22 '18 at 11:24
Thanks but I fixed it already
– Jason Martinez
Nov 22 '18 at 14:48
I tried this code in addition to mine like this but it did nothing.
– Jason Martinez
Nov 21 '18 at 15:51
I tried this code in addition to mine like this but it did nothing.
– Jason Martinez
Nov 21 '18 at 15:51
I had a typo in
sessionStorage. The flag has never been set :) fixed now– Michael P
Nov 21 '18 at 16:19
I had a typo in
sessionStorage. The flag has never been set :) fixed now– Michael P
Nov 21 '18 at 16:19
Just tried it doesn't do anything and I tried it in Chrome and Firefox. Thanks anyway.
– Jason Martinez
Nov 22 '18 at 3:47
Just tried it doesn't do anything and I tried it in Chrome and Firefox. Thanks anyway.
– Jason Martinez
Nov 22 '18 at 3:47
The code works, maybe you did not recognize the refresh. Here is an example with 5 seconds delay and additional console output: fiddle.bplaced.net/53414316
– Michael P
Nov 22 '18 at 11:24
The code works, maybe you did not recognize the refresh. Here is an example with 5 seconds delay and additional console output: fiddle.bplaced.net/53414316
– Michael P
Nov 22 '18 at 11:24
Thanks but I fixed it already
– Jason Martinez
Nov 22 '18 at 14:48
Thanks but I fixed it already
– Jason Martinez
Nov 22 '18 at 14:48
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%2f53414316%2frefreshing-div-or-page-once-with-js-or-jquery-ajax%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
