| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <title>Dojo Visual Loader Test</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 8 | @import "../../../dijit/themes/tundra/tundra.css"; |
|---|
| 9 | @import "../../../dijit/themes/dijit.css"; |
|---|
| 10 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 11 | @import "../Loader/Loader.css"; |
|---|
| 12 | </style> |
|---|
| 13 | |
|---|
| 14 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script> |
|---|
| 15 | <script type="text/javascript" src="../Loader.js"></script> |
|---|
| 16 | <script type="text/javascript"> |
|---|
| 17 | // dojo.require("dojox.widget.Loader"); |
|---|
| 18 | dojo.require("dojo.parser"); // scan page for widgets and instantiate them |
|---|
| 19 | |
|---|
| 20 | function getHoney(){ |
|---|
| 21 | // simple xhrGet example |
|---|
| 22 | var foo = dojo.xhrGet({ |
|---|
| 23 | url: 'honey.php?delay=0', |
|---|
| 24 | handleAs: 'text', |
|---|
| 25 | load: function(result){ |
|---|
| 26 | content.innerHTML = result; |
|---|
| 27 | } |
|---|
| 28 | }); |
|---|
| 29 | } |
|---|
| 30 | |
|---|
| 31 | function postHoney(){ |
|---|
| 32 | // simple xhrPost example |
|---|
| 33 | var foo = dojo.xhrPost({ |
|---|
| 34 | url: 'honey.php?delay=0', |
|---|
| 35 | handleAs: 'text', |
|---|
| 36 | load: function(result){ |
|---|
| 37 | content.innerHTML = result; |
|---|
| 38 | } |
|---|
| 39 | }); |
|---|
| 40 | } |
|---|
| 41 | |
|---|
| 42 | function alertMe(){ |
|---|
| 43 | console.log('subscription fired',arguments); |
|---|
| 44 | } |
|---|
| 45 | |
|---|
| 46 | var content = null; |
|---|
| 47 | dojo.addOnLoad(function(){ |
|---|
| 48 | |
|---|
| 49 | content = dojo.byId("dataholder"); |
|---|
| 50 | // FIXME: why aren't you working? |
|---|
| 51 | // var foo = dojo.subscribe("Loader",null,"alertMe"); |
|---|
| 52 | // console.log(foo); |
|---|
| 53 | |
|---|
| 54 | }); |
|---|
| 55 | </script> |
|---|
| 56 | </head> |
|---|
| 57 | <body class="tundra"> |
|---|
| 58 | <div id="globalLoader" dojoType="dojox.widget.Loader"></div> |
|---|
| 59 | |
|---|
| 60 | <!-- Other examples: |
|---|
| 61 | <div id="globalLoader" dojoType="dojox.widget.Loader" hasVisuals="false"></div> |
|---|
| 62 | <div id="globalLoader" dojoType="dojox.widget.Loader" hasVisuals="true" attachToPointer="false"></div> |
|---|
| 63 | --> |
|---|
| 64 | |
|---|
| 65 | <h1 class="testTitle">Dojox xhrListener test</h1> |
|---|
| 66 | |
|---|
| 67 | <a href="javascript:getHoney();">start xhrGet demo</a> |
|---|
| 68 | <a href="javascript:postHoney();">start xhrPost demo</a> |
|---|
| 69 | |
|---|
| 70 | <p>No additional code is required except for the existance of a |
|---|
| 71 | dojoType="dojox.widget.Loader" node. It will listen for the start |
|---|
| 72 | and end of xhr* requests (via _ioSetArgs [ugh] and Deferred.prototype._fire .. |
|---|
| 73 | </p> |
|---|
| 74 | |
|---|
| 75 | <br> |
|---|
| 76 | <div id="dataholder" style="float:left; height:300px; overflow:auto; width:400px; border:1px solid #ccc; "></div> |
|---|
| 77 | <!-- make me a scrollbar. a Taaaaaall scrollbar --> |
|---|
| 78 | <div style="float:left; height:2000px; width:1px; overflow:hidden">spacer</div> |
|---|
| 79 | |
|---|
| 80 | </body> |
|---|
| 81 | </html> |
|---|
