This question already has answers here:
execute function after complete page load [duplicate]
(16 answers)
Closed 3 years ago.
I am in need of some JS assistance.
I need to run some code after the DOM was updated.
For example: when I click a button, it fires a function. I need to run that function code and when the DOM is fully updated, run some more code. How could I go about doing this in a clean fashion?
I am sure this is relatively simple but I am drawing blanks. I am using jQuery.
$('.btn').click(function() {
do some stuff
// then ensure dom has fully updated and do some more????
})
DOM updates are synchronous. Just put the code where your comment is.
Related
This question already has an answer here:
How to attach js/css to a StreamField block when it is rendered?
(1 answer)
Closed 4 years ago.
I want to create a block that is going to utlize some js/css from a CDN, and possibly some custom js code just before the </body>. I do not want these loaded unless the block is used on the current page. Is there a way I can check if the block has been used, or even better, have the block tell the base.html file that it is being used?
If you already have jQuery in your project, the easiest way to do this will be with getScript. Documentation is here: https://api.jquery.com/jquery.getscript/
With plain JS, you have to jump through slightly more hoops and create a <script> tag that you then append to the document:
var dynamically_loaded_js = document.createElement('script');
dynamically_loaded_js.setAttribute('src','http://example.com/dynamically_loaded.js');
document.body.appendChild(dynamically_loaded_js);
This question already has answers here:
Do you ever need to specify 'javascript:' in an onclick?
(8 answers)
Closed 8 years ago.
Can someone please explain the difference between:
onclick="javascript:fnName(this);"
...and...
onclick="fnName(this);"
Is there any performance hit? or when to use what?
Not actually, and usually you don't write the first one. Because onclick handler is handled by the JavaScript, so calling JavaScript to handle it won't be a good bet.
In the context of event attributes it's completely useless. It's mainly used inside of the href attribute and allows you to create a pseudo-onclick event:
click me
Also you can just put it in the location input in your browser and run scripts. It's simillar to the console input.
Edit: I realized it's not really useless but it has completely different usage than you would thought. In the context of these event attributes it behaves like in a normal code and so it's a label. Try this:
<div onclick="javascript:while(true){while(true){alert('hello');break javascript;}}">click me</div>
This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 3 months ago.
Sorry if this is incredibly obvious, but I have no idea why this isn't working.
I'm trying to create a jsFiddle. However, I don't seem to be able to attach any of the javscript to any of the elements. For example, onclick is not calling my js function.
It doesn't get any simpler than this fiddle. I copy-pasted it from the W3 editor where it works just fine - click the button, get alert!
<button onclick="myFunction()">Click me</button>
function myFunction() {alert("sss");}
http://jsfiddle.net/tpip/NYkQN/2/
What am I missing here??
Just change the way the JavaScript block is loaded to no wrap (head)
The standard setting here is that the JS is wrapped(!) to be run after the DOM has loaded. That means the function is not defined in global scope but inside the wrapper. Inline event handlers only work with globally defined functions though!
When setting to no wrap (head) the JS is loaded in the <head> and is not wrapped.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Say I have an HTML page where a few elements have some JQuery functions.
One of those functions calls another HTML file if an image is clicked. The called HTML file echoes some HTML to the screen. Some of this HTML has JQuery functions.
If I want those JQuery functions to work, do I have to include them on the called page, or do I only need them on the original HTML page?
If you still don't understand, hopefully this will help:
Page 1 has a function that calls Page 2.
Page 2 echoes HTML back and some elements within the HTML have JQuery functions which are already programmed on Page 1.
Do I have to include the actual JQuery on Page 2 as well or will it work if I just have the JQuery on Page 1?
Please help.
You have to use delegated event handlers for your elements when loading dynamically, i.e.
$(document).on("click", ".your-element-class", function(){ // or id(#)
// code
});
This way, you can keep all of your javascript code (event handlers) in the main page and all elements loaded dynamically into the DOM will work.
Check jQuery on.
If I understand you correctly. I believe you load some HTML using AJAX and you want to trigger some JQuery functions on AJAX load content. If my assumption is correct you could use something like
$(".my-ajax-loaded-content").on("click", function(){
//do something
});
Important thing is using on (jQuery 1.7+) which bind to AJAX loaded content
This question already has answers here:
how to use simple html dom get a div inner text
(4 answers)
Closed 9 years ago.
How to get inner text of a DIV controller using java script?
The short answer:
document.getElementById("id-of-div").innerText
The long answer, given that you've tagged the question with asp.net-mvc-3, is that this will be run in the browser, not on the server (where ASP.NET runs). There is no immediate way to get content from the browser to the server without sending a request. I'm guessing that you may want to make an ajax call to a new controller action from the page, but this depends on when the text changes, and what you want to do with it.
Suppose you have a div declared as:
<div id="someDiv">
some content goes here
</div>
You can get its value by:
// javascript
document.getElementById("someDiv").innerHTML
// jquery
$("#someDiv").html()