Top community members
All Wiki Articles Create Wiki Article

Have you ever heard about encyclopedia for code?

What about: Wiki for Code project?

* because I've tried to share code and my solutions on different services and it was removed or I was unwelcomed
   - maybe it wasn't good place, but this one is.

if you think you have solution that can help someone, you are welcome to share this solution - Click here

jQuery - html template with document ready function example

0 contributions
12 points

Using jQuery library it is necessary to wait until the Document Object Model (DOM) becomes ready. This article shows how to create simple html template for jQuery.

Note: read this article to know how to check if document is ready without jQuery.

1. ready method example

This example shows most commonly used approach to assign ready event. 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <script>

    $(document).ready(function() {
      	// this is place for jQuery based source code...
      	console.log('Document is ready to use jQuery!');
    });
   
  </script>
</body>
</html>

Notes:

  • $(document) can be replaced with¬†$('document'),
  • $(document).ready(...) can be used many times in sorce code executing some parts of code¬†if it makes code more clear - check last example in this article.

2. Alternative ready event callback example

This example shows second most commonly used approach to assign ready event. 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <script>

    $(function() {
      	// this is place for jQuery based source code...
      	console.log('Document is ready to use jQuery!');
    });
   
  </script>
</body>
</html>

3. Multiple ready method calls example

This example shows how to catch ready event many times.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <script>

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery - code 1!');
    });

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery - code 2!');
    });
   
  </script>
  <p>Some text here...</p>
  <script>

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery - code 3!');
    });
   
  </script>
</body>
</html>

Merged questions

  1. How to create HTML template using jQuery?
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more