Run javascript after page load

Question

setup_account ui-mobile-viewport ui-overlay-c

When a page i make loads like this:

var location    =   location.href+"&rndm="+2*Math.random()+" #updatecomment0>*"
$("#updatecomment0").load(location, function(){});

I have multiple scripts running on the updatecomment0 div:

<div id="updatecomment0">
    <div id="javascript1">hi</div>
    <div style="float:right;" class="javascript2">delete</div>
</div>

I don't know how to make this other JavaScripts run after page load.
Can someone please tell me how to with this.
Thank you

Why is everything in boldface? We can read normal font weights too ;) — Blender
– Blender, Commented Apr 1, 2011 at 5:50

Chetan · Accepted Answer · 2011-04-01 05:36:40Z

12

Use $(document).ready().

answered Apr 1, 2011 at 5:36

Chetan

48.4k32 gold badges110 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

emco Over a year ago

Will this work even when the content is loaded after the main page?

Chetan Over a year ago

How are you loading the new content?

emco Over a year ago

Let's suppose the content is loaded using the onClick event of some element. Will this work?

Chetan Over a year ago

Not exactly sure what your question is. $(document).ready(handlerFunction) will simply execute the handlerFunction when the document is loaded. If you want something to happen to the content loaded using onClick, you can just specify that in the onClick handler.

Benyamin Over a year ago

i use this before $(document).ready() but it not working. the sample layout above, i try with a simple javascript .hide div after .load and it works. thank you

Sreekumar P · Accepted Answer · 2011-04-01 05:45:02Z

5

Use jQuery, you can do this very easily.

jQuery(document).ready(function(){
    alert('Your DOM is ready.Now below this u can run all ur javascript');
});

answered Apr 1, 2011 at 5:45

Sreekumar P

6,06812 gold badges62 silver badges84 bronze badges

2 Comments

Benyamin Over a year ago

yes, i try . i dont know the different between $(document).ready(function(){ with jQuery(document).ready(function(){ . but i will try it again

Sreekumar P Over a year ago

there is not difference. $ is just a alias of jQuery

GMasucci · Accepted Answer · 2013-03-11 15:57:54Z

3

Here is a sample layout for you

<script type="text/javascript">
    $(document).ready(function(){
        /// here you can put all the code that you want to run after page load
        function Javascript1(){
            //code here
        }

        function Javascript2(){
            // code here
        }

        $("#btnOK").live('click',function(){
            // some codes here
            Javascript1();
            Javascript2();
        });

    });
</script>

<div id="MyDiv">
    <input type="button" id="btnOK" value="OK"/>
</div>

edited Mar 11, 2013 at 15:57

GMasucci

2,90224 silver badges42 bronze badges

answered Apr 1, 2011 at 6:37

Ian Jasper

3,0787 gold badges39 silver badges60 bronze badges

1 Comment

Ian Jasper Over a year ago

@Benyamin please mark this post as the answer or whichever answer that you think solved your problem. thank you! :D

xkeshav · Accepted Answer · 2011-04-01 05:40:43Z

2

write code inside ready

jQuery(document).ready(function(){

// write here
});

suggestion : use live or bind

answered Apr 1, 2011 at 5:40

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

1 Comment

Benyamin Over a year ago

yes, i change $(document).ready(function(){ to jQuery(document).ready(function(){

ravndal · Accepted Answer · 2011-04-01 05:49:38Z

1

Unless you need javascript to do something before the page is loaded, add your scripts to the bottom om the html document, just before the body end tag. The page will load faster, and you can do whatever you need to, right in the js file, without the document ready functions.

If the scripts is the last to load, the DOM is already guaranteed to be "ready".

edited Apr 1, 2011 at 5:49

answered Apr 1, 2011 at 5:38

ravndal

2251 silver badge7 bronze badges

1 Comment

Benyamin Over a year ago

yes, some of the javascript i need to do something before the page is loaded. i try jQuery(document).ready(function(){ and with .live sample layout and so far is good

mferly · Accepted Answer · 2014-12-01 01:51:58Z

1

$(window).load(function() {
    // code here
});

answered Dec 1, 2014 at 1:51

mferly

1,6561 gold badge13 silver badges19 bronze badges

1 Comment

Hector Over a year ago

I needed to resize some elements based on the height of another. This worked for me if you're trying something similar.

ryvasquez · Accepted Answer · 2014-12-01 02:28:36Z

1

$(document).ready() is all you needed.

answered Dec 1, 2014 at 2:28

ryvasquez

1588 bronze badges

Comments

sth · Accepted Answer · 2011-12-02 15:57:39Z

0

You can make JavaScript wait for a specified time using the setTimeout method:

.setTimeout("name_of_function()",time_in_millis);

edited Dec 2, 2011 at 15:57

sth

231k56 gold badges288 silver badges370 bronze badges

answered Apr 1, 2011 at 6:37

ravi

11

Comments

Matteo · Accepted Answer · 2012-03-19 12:58:56Z

0

I hope this can help you too, I had a similar issue and I fixed it by calling the following just after loading the content in the page (like after an AJAX request for a page to be shown inside a div):

(function($) {
 $(document).ready(function() {
  // your pretty function call, or generic code
 });
}(jQuery));

Remember to not call this in the document you load, but in the function that load it, after it as been loaded.

answered Mar 19, 2012 at 12:58

Matteo

1,2192 gold badges30 silver badges50 bronze badges

Comments

Josh Reeves · Accepted Answer · 2013-05-10 19:58:35Z

0

Using vanilla Javascript, this can done thusly:

<html>
<head>
<script type="text/javascript">

// other javascript here

function onAfterLoad() { /*...*/ }

// other javascript here

</script>
</head>
<body>

<!-- HTML content here -->

<!-- onAfterLoad event handling -->
<div style="display:none;"><iframe onload="onAfterLoad();"></iframe></div>
</body>
</html>

answered May 10, 2013 at 19:58

Josh Reeves

1

Collectives™ on Stack Overflow

Run javascript after page load

10 Answers 10

5 Comments

2 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

5 Comments

2 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Related