This question already has answers here:
refresh DOM after append element
(5 answers)
Closed 8 years ago.
UPDATE
I think I have to be a little more precise.
I have this long running code that adds content to my DIVs.
This is an example of the code:
m = jQuery('#test').clone();
//do some work
jQuery('#test2').append(m);
The Problem is that this can really take a while because sometimes I am adding 100 items. And the content only appears on the page after all 100 items have been added. So the user had to wait like 30 seconds or so.
What I would like to is to update the #test2 - DIV after adding 10 elements or so and then continue adding elements
Is there a way to refresh the DOM or (better) refresh the test2 - DIV and then continue adding Elements ?
OLD Description
I have a long running jQuery method that clones DIVs and appends them to the page.
It looks like this:
m = jQuery('#test').clone();
//do some work
jQuery('#test2').append(m);
This code is called several times (sometimes up to 100 times) and it takes pretty long for the content to appear in the page.
Is there a way to refresh the dom and print the content onto the page so that the user is not getting bored because nothing happens ?
You can do what you want using setTimeout. It's like the same logic we use for doing animations.
// Code goes here
function load(index) {
var m = jQuery('#test').clone();
m.html("Element" + index)
jQuery('#test2').append(m);
if(index < 100) {
setTimeout(function() {
load(index + 1);
},100);
}
}
$(document).ready(function(){
load(0);
});
here is a plunker
This is not exactly what you want, but why don't you put a spinner on your page whilst this is loading, which then goes away when the operations are done? It may be a cleaner method of doing things rather than the page just randomly refreshing for the user whilst they are using it.
Related
This question already has answers here:
Javascript For loop appends same element once
(2 answers)
Closed 4 months ago.
I'm doing a timetable and to do list website. So, I basically add divs for each timetable block. I've used this tutorial on yt (https://youtu.be/MkESyVB4oUw) for the timetable blocks. (At 24:03) So in HTML there's inputs in a form and he uses the constant "form" for it and uses an addEventListener submit. I've used this and all my timetable blocks work fine. I can add multiple blocks and everything works well.
After that I made a to do / goals section and I decided to take the "form" into my own hands. So I did:
// I tried const and var and the same thing happened
const todoAdd = document.querySelector("#new-todo"); // This is the button
const weekDiv = document.querySelector("#week-divs");
const todoDiv = document.createElement('div');
todoDiv.classList.add("todo-div");
This is what I did for the time blocks and it worked, and then I added:
todoAdd.onclick = function(){
weekDiv.appendChild(todoDiv);
}
When I do it like this, the div is added once and that's it. If I keep clicking the div just gets replaced again and again.
I figured this out mid-writing it. Because when the addEventListener starts for the form, that's when I did all the appending. So the simple solution to this was simply adding the createElement inside the function.
todoAdd.onclick = function(){
const todoDiv = document.createElement('div');
todoDiv.classList.add("todo-div");
weekDiv.appendChild(todoDiv);
}
I probably could've realised this sooner if I wasn't so confused about it actually working just once. I thought there was something missing instead of a simple mistake. I'm guessing it only appends once because it is only read once, while in an onclick function or addEventListener it always loops and re-reads it right? That's my thoughts. Hope this helps someone maybe.
Good day everybody,
I'm trying to get an element by its ID in javascript and it returns me null.
Actually this element isn't fully load when the DOM is because of the plugin Restrict Content Pro (where the targeted element is from) making request after page is loaded (see the ref. image below).
The temporary solution I wrote is basically a 2 sec setTimeOut on the getElementByID function which is kind of ... brutal. ☺
If the plugin takes more than 2 sec to load, it won't work.
So, my question is : do you know any way to properly do so?
Something like
- while returns null
try to get it
- when returns element
stop the loop
good to know : document.onload or window.onlaod won't work since the plugin loads element after the page is fully display.
Thanks in advance!
my solution:
do {
var getId = getElementByID();
if(getID!=null){
// to do
}
}
while (getId==null);
started programming javascript a few months ago. I've been using the 'document.write()' command initially but having it wipe my html each time it's used is a little counterproductive.
Using the getElementByID("div's ID").innerHTML = or anything you think is better, what would effectively run this code but add it to whatever's currently in the div, not replace it.
x = x + 1
document.write( "you have clicked this button" + x + "times")
So like after 3 clicks it should say:
you have clicked this button 1 times
you have clicked this button 2 times
you have clicked this button 3 times
Thanks very much.
element.insertAdjacentHTML('beforeend', htmlString);
Where element is a reference to a DOM element (e.g. returned from document.getElementById).
Demo
insertAdjacentHTML Reference
Note: though element.innerHTML += htmlString is also possible, it is usually a bad practice as all of the element's innerHTML would be re-parsed into new DOM elements, trashing out the old elements and their attached listeners/data.
Did you try console.log(""). the console.log() is used to display your string on the console of your chrome or firefox browser. Right Click on the browser and select inspect element, then select console tab on topright. any errors in the page and any function called on console will be displayed here
I'm using this code to refresh a div every 10 seconds:
<script type="text/javascript">
setInterval(function(){
$('#feed').load('forum.php #feed').fadeIn("slow");
}, 10000);
</script>
Works great, except the first load (after 10 seconds) makes a duplicate of this div, so it's one sitting atop the other. After that, the div refreshes properly every 10 seconds, without making any more duplicates.
Any ideas what's wrong with my code? The div is:
<div id="feed">... stuff ... </div>
Thanks!
From the jQuery docs:
When this method executes, it retrieves the content of ajax/test.html,
but then jQuery parses the returned document to find the element with
an ID of container. This element, along with its contents, is inserted
into the element with an ID of result, and the rest of the retrieved
document is discarded.
So you are inserting the same element into the page multiple times.
Try changing your selector to
$('#feed').load('forum.php #feed>*').fadeIn("slow");
This was an issue with vBulletin's sidebar code - I broadened the refresh div to encompass the entire sidebar, instead of just the "Recent Posts" block. Just wanted to post here on the unlikely chance that anyone has the exact same issue.
Thank you everyone for your help!
I have some images from another source that need to refresh from their offsite source every 30 seconds. I would like to use JavaScript to accomplish this so as to avoid an entire page reload.
Presently I've attempted something similar to this question: "reloading a page after every 10 sec in rails 3.1"
(This is a Rails application, but I probably don't need a Rails specific answer in this case.)
Notwithstanding, I am ending up with no appreciable result when I add a div around the link + image nor when I add a div to the image itself. I have attempted both solutions in this example by creating a element-reload.js.
The first solution that's marked as the answer simply reloads the page with nearly all of the page elements absent. The second solution makes the image that I'm trying to refresh actually disappear upon first refresh when I surround the link + image with a div, but when I place the id upon which it's acting on the actual image tag, it yields nothing.
I'm sure I'm missing something rather simple since JS is not a strong suit for me at the moment.
Finally, I do have a number of sources to refresh and would like to see an example of performing this for a class vs an id if possible, but having more granular control over each one may be best in the end for varied times for the refreshes.
If you're up for jQuery, this can be done quite easily:
$(function() {
setInterval(function() {
$('img').each(function() {
$this = $(this);
$this.attr('src', $this.getAttribute('src') + '?timestamp=' + new Date().getTime());
console.log($this.prop('src'));
});
}, 30 * 1000);
});
In order to prevent browser caching, you have to fool the browser and load the image with a GET request variable timestamp. It doesn't matter what the parameter is, but the image will load brand-new and not from cache because the URL changes.
jQuery is famous for its use of CSS-like selectors.
Replace $('img') with one of these:
$('img.yourClassName'); // Class
$('#your_id, #another_id, ...'); // ID(s). Omit the comma for a single id
$('img[id^="common_base_id"]'); // Selects all images with an id that starts with "common_base_id".
There's also the :not() selector, which can filter your results:
$('img.yourClassName:not(.do-not-reload)');
$('img.yourClassName:not([src="img/spinner-skip.gif"])');