Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Home Page</title>
- <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
- </head>
- <body>
- ...
- <ul class="list-unstyled" id="itemList">
- <!-- JQuery function will be called when DOM is ready -->
- </ul>
- ...
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
- <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">/script>
- <script src="my.js"></script>
- <script>
- $( document ).ready("fillInData('text.json')");
- </script>
- </body>
- </html>
- function fillInData (dataFile) {
- // remove any existing content
- var ft = $('#itemList');
- ft.empty();
- // populate new stuff from a co-located JSON file
- var htmlString = "";
- $.getJSON(dataFile, function(data) {
- $.each(data.items, function(i, item) {
- htmlString += '<li>' + item.name + ...;
- ...
- htmlString += '</li>'
- });
- });
- ft.innerHTML = htmlString;
- }
- $(document).ready(function() {
- fillInData('text.json');
- });
- $.getJSON(dataFile, function(data) {
- var htmlString = "";
- $.each(data.items, function(i, item) {
- htmlString += '<li>' + item.name + ...;
- ...
- htmlString += '</li>'
- });
- ft.html(htmlString); // it's a jQuery object, and it's async
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement