DOMFetcher-Examples/test.html at master · kiandra/DOMFetcher-Examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
    <head>
        <link href="animate.min.css" rel="stylesheet" type="text/css" />
        <link href="curl.css" rel="stylesheet" type="text/css" />
        <link href="demo.css" rel="stylesheet" type="text/css" />
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="domfetch.js"></script>
        <script type="text/javascript">
            var domfetch = DOMFetch; //temporary hack
        </script>
    </head>
    <body>
        <div class="loading animated fadeInLeft">Loading...</div>
        <ul id="weather" class="tiles"></ul>

        <script type="text/javascript">

            DOMFetch.get({
                url: 'http://www.bom.gov.au',
                selector: '#forecasts table tr',
                type: 'outerhtml',
                runon: 'immediate',
                callback: function (result) {

                    $('.loading').addClass('fadeOutRight');

                    $.each(result, function (i, e) {
                        var $entry = $(e);

                        var $li = $('<li />').addClass('fadeInLeft animated');

                        $li.append($('<span />').addClass('max').text($('td:nth-child(2)', $entry).text()));
                        $li.append($('<span />').addClass('main').text($('td:nth-child(1)', $entry).text()));
                        $li.append($('<span />').addClass('summary').text($('td:nth-child(3)', $entry).text().replace('.', '')));
                        setTimeout(function () {
                            $('#weather').append($li);
                        }, 50);

                    });
                },
                error: function (errorMessage) {
                    $('.loading').text('Error!');
                }
            });

        </script>

    </body>
</html>