Run script just when div with #id is loaded in DOM [duplicate] - javascript

This question already has an answer here:
How to catch creation of DOM elements and manipulate them with jQuery
(1 answer)
Closed 9 years ago.
How can i run js-script just when div with #id is loaded in DOM ?
For what this is for me? Because i run js-script before document.ready() for div with #id, and i am not sure if this div with #id already exist.
ADDITIONAL
problem : when i put script in document.ready(), it is visible what willbe if i don't add this script for some seconds, but then - all is allright. So i write script outside of document.ready() and this helps. But i'm not sure that this will work every time.

If the div is loaded with the page, putting your code inside the document.ready will do. If it is loaded via Ajax or other, then after inserting the div, call the wanted code on it.

Yes you can use this one
$(document).ready(function(){
//Your code...
});

Related

Why script element created via innerHTML does not get executed when appended to DOM, while the same script created via document.createElement does? [duplicate]

This question already has answers here:
script tag create with innerHTML of a div doesn't work
(3 answers)
Closed 5 years ago.
(Please do not mark this question as a duplicate to Can scripts be inserted with innerHTML? because it is not.)
I wonder why a script element created via innerHTML does not get executed when appended to DOM:
container=document.createElement('div');
container.innerHTML='<script>alert()</'+'script>';
document.body.appendChild(container.firstChild);
... while the same script created via document.createElement gets executed when appended to DOM:
script=document.createElement('script');
script.innerHTML='alert()';
document.body.appendChild(script);
It looks to me as inconsistency: in both cases I append a script element (which looks the same), so I do not understand why appending the same script gives different results depending on how this script was generated.
When you create a 'script' tag, the browser evaluate the script expression but when you create a 'div' tag, even if a script is inside the browser won't evaluate that script.
By default, when you append an element after the DOM loads, the browser won't check/run if you add a script inside UNLESS it is a script pure element.

async javascript in head section work only after refresh page [duplicate]

This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 6 years ago.
i'm trying to load javascript asynchronous in the head section. After page loading in developer console i have error that "jQuery is not defined". After one or two refreshes scripts load and work perfectly. Without "async" inside script tag also works. Why this happens and is there any way to fix this. Thanks in advance
As Dellirium said, JQuery needs to be placed before the javascript code that requires it. You could try placing the JQuery in the <head> and the script you're running at the end of the body tag <body>.
You could add a function to be executed when jQuery is loaded.
<script src="jquery.js&callback=start"</script>
In which &callback=start executes the start() function in your actual javascript file, which you can use to wrap your code around.
function start() {
/* your code */
}
The reason jQuery couldn't be found the first times is because your browser caches the jQuery when it is fully loaded. It has to load the entire file the first time you actually visit or force-reload the page.
When you use async on a script tag, the script can execute in any order, at any point during the page load, which is why your scripts work only sometimes. You trade away knowing the order of execution for slightly faster page loads. This usually requires that the scripts you load do not depend on each other or an elaborate loading scheme - usually using one callback function that runs without async and invokes your code when dependencies report they're available.
You should consider if async is really the right option for your setup.

Applying javascript to a dynamically added element

I've searched other articles and jQuery documentation, but have not quite found (or understood) the solution I need.
I'm including Sharing buttons on our site using another online service. The procedure is to add a snippet of HTML (a closed with a specific class name) and include a call to their Javascript file.
<div class="specific_class_name"></div>
<script type="text/javascript" src="path to script.js#pubid=my-account-id" async="async"></script>
This works well on pages for which I have access to edit HTML and include scripts.
My challenge is how to include the Share buttons on pages for which I only have access to run Javascript and not to include specific HTML. I can add the closed element using jQuery .append and include the Javascript call, but this does not work as needed. If I inspect the page after it is fully loaded, I see that the dynamic element has been added correctly and the script has been called. Viewing the Page Source, the is not present.
Of course, I have no means of editing this service's script. I need the called script to find the dynamic element either during or following page load, not following any user / mouse action.
Thanks for any feedback.
Create the div and then use the getScript command to include it like:
$(window).on('load', function(){
$('<div class="class_name"></div>').appendTo("someIDyouhave");
$.getScript('path to script.js#pubid=my-account-id');
});
http://api.jquery.com/jquery.getscript/
Have you tried something like this? Append the element and then add a click event?
$(function() {
var appendedElement = $('<div id="myID"></div>')
$('.specific_class_name').append(appendedElement).on('click', '#myID', function(){
whatever();
});
});
This should work.

Load java Script at the end of page. why? [duplicate]

This question already has answers here:
Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?
(7 answers)
Closed 8 years ago.
I have listen a lot that we should always load the java script at the end of the page why we should do that. If i write the java script at starting of the page how it will make the difference?
If you write javascript at the start of the page, than you'll not be able to access the DOM elements, directly.
However when you use it at bottom, all the elements will have been rendered and you can use them.
In the first case, you would need something like this:
window.onload = function(){
document.getElementById('id');
}
But in the second case, you need just:
document.getElementById('id');
Also, if you have scripts at the start of the page, it will block the UI from rendering.
If you're using JS to manipulate the DOM, you'll want the page to be loaded before the script is run - usually this means placing the script after the page content.
However, if the Javascript is in response to say an onClick event, you shouldn't need to put it at the base of the page.

Alternative position of script that needs to come after specific HTML element?

Sorry I couldn't articulate my question accurately.
I have a jQuery script that needs to be placed below the HTML element it is applied to and not in the head. IE 6 and IE 7 are generating operation aborted message since the script is not a directly child of Body tag. This seems to be a well known bug on IE.
I do not have the privilege to keep the script tag as a direct child of Body tag. Either it should be inside tag or it should be in the head. If I have it in the head, it obviously doesn't trigger since it should be below the HTML element it is applied to.
What are my options in this case?
Thanks!
Put it in the head, and move your code inside a document.ready handler, like this:
$(document).ready(function(){
// your code here
});
This way, your code will only run after the full HTML has been parsed.
You can write the code within head...Just need to write it inside the document ready block, so that it gets executed only after your DOM is ready..
$(document).ready(function(){.....your code......}
Hope that helps. Thank you.

Categories