6

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

Improve this question
2
  • 1
    Use the callback function of .load.
    – emco
    Commented Apr 1, 2011 at 5:36
  • 1
    Why is everything in boldface? We can read normal font weights too ;)
    – Blender
    Commented Apr 1, 2011 at 5:50

10 Answers 10

Reset to default
12

Use $(document).ready().

Improve this answer
5
  • Will this work even when the content is loaded after the main page?
    – emco
    Commented Apr 1, 2011 at 5:42
  • How are you loading the new content?
    – Chetan
    Commented Apr 1, 2011 at 5:43
  • Let's suppose the content is loaded using the onClick event of some element. Will this work?
    – emco
    Commented Apr 1, 2011 at 5:54
  • 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.
    – Chetan
    Commented Apr 1, 2011 at 5:59
  • 1
    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
    – Benyamin
    Commented Apr 2, 2011 at 19:25
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');
});
Improve this answer
2
  • yes, i try . i dont know the different between $(document).ready(function(){ with jQuery(document).ready(function(){ . but i will try it again
    – Benyamin
    Commented Apr 2, 2011 at 19:52
  • there is not difference. $ is just a alias of jQuery
    – Sreekumar P
    Commented Nov 12, 2017 at 3:26
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>
Improve this answer
1
  • @Benyamin please mark this post as the answer or whichever answer that you think solved your problem. thank you! :D
    – Carls Jr.
    Commented Jul 5, 2016 at 2:42
2

write code inside ready

jQuery(document).ready(function(){

// write here
});

suggestion : use live or bind

Improve this answer
1
  • yes, i change $(document).ready(function(){ to jQuery(document).ready(function(){
    – Benyamin
    Commented Apr 2, 2011 at 19:58
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".

Improve this answer
1
  • 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
    – Benyamin
    Commented Apr 2, 2011 at 19:57
1 
$(window).load(function() {
    // code here
});
Improve this answer
1
  • I needed to resize some elements based on the height of another. This worked for me if you're trying something similar.
    – Hector
    Commented Dec 15, 2015 at 19:48
1

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

Improve this answer
0

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

.setTimeout("name_of_function()",time_in_millis);
Improve this answer
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.

Improve this answer
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>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.