Wapp

Check-in [ab89ab225b]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Improvements to the tableajax01.tcl example.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: ab89ab225b051a15e9e044a80b42daca261bcc41e0fe141521bc5d630ea332e3
User & Date: drh 2019-04-23 19:52:34
Context
2019-04-30
16:56
Add the wapptest.tcl script from SQLite to the list of real-world usage examples. check-in: b25a28b219 user: drh tags: trunk
2019-04-23
19:52
Improvements to the tableajax01.tcl example. check-in: ab89ab225b user: drh tags: trunk
19:35
Add a "self" page to the fileupload.tcl demo. check-in: cdd099b81e user: drh tags: trunk
Changes
Hide Diffs Side-by-Side Diffs Ignore Whitespace Patch

Changes to examples/tableajax01.tcl.

            1  +#!/usr/bin/wapptclsh
     1      2   # This script demonstrates how to receive bulk HTML content
     2      3   # (such as a complete <table>) and insert it in the middle
     3      4   # of the DOM using XMLHttpRequest
     4      5   #
     5      6   package require wapp
     6         -proc wapp-default {} {
            7  +proc common-header {} {
     7      8     wapp-trim {
     8      9       <html>
           10  +    <head>
           11  +    <meta name="viewport" content="width=device-width, initial-scale=1.0">
           12  +    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
           13  +    <link href="%url([wapp-param SCRIPT_NAME]/style.css)" rel="stylesheet">
     9     14       <body>
    10         -    <p>This application demonstrations how to use XMLHttpResult to obtain
           15  +  }
           16  +}
           17  +proc common-footer {} {
           18  +  wapp-trim {
           19  +    </body>
           20  +    </html>
           21  +  }
           22  +}
           23  +
           24  +proc wapp-default {} {
           25  +  common-header
           26  +  wapp-trim {
           27  +    <p>This application demonstrates how to use XMLHttpResult to obtain
    11     28       bulk HTML text (such as a large &lt;table&gt;) and then insert that
    12     29       text in the middle of the DOM.</p>
    13     30   
    14     31       <div id="insertionPoint"></div>
    15     32   
    16     33       <p><form id="theForm">
    17     34       Click the button 
    18     35       <input type="submit" id="theButton" value="Click Here">
    19     36       to cause content to be inserted above this paragraph and below
    20     37       the initial paragraph
    21     38       </form></p>
    22     39       <script src='%url([wapp-param SCRIPT_NAME]/script.js)'></script>
           40  +
           41  +    <p><a href='%html([wapp-param SCRIPT_NAME])/self'>Show the Wapp script
           42  +    that generates this page</a></p>
    23     43     }
           44  +  common-footer
    24     45   }
    25     46   
    26     47   # This is the javascript that takes control of the form and causes form
    27     48   # submissions to fetch and insert HTML text.
    28     49   #
    29     50   proc wapp-page-script.js {} {
    30     51     wapp-mimetype text/javascript
................................................................................
    60     81       <tr><th>Column 1<th>Column 2<th>Column 3
    61     82       <tr><td>1.1<td>1.2<td>1.3
    62     83       <tr><td>2.1<td>2.2<td>2.3
    63     84       <tr><td>%html($counter)<td><td><button id="insCancel">Cancel</button>
    64     85       </table>
    65     86     }
    66     87   }
           88  +
           89  +# The /self page that shows the text of this script.
           90  +#
           91  +proc wapp-page-self {} {
           92  +  wapp-cache-control max-age=3600
           93  +  common-header
           94  +  set fd [open [wapp-param SCRIPT_FILENAME] rb]
           95  +  set script [read $fd]
           96  +  close $fd
           97  +  wapp-trim {
           98  +    <h1>Wapp Script That Shows A Copy Of Itself</h1>
           99  +    <pre>%html($script)</pre>
          100  +  }
          101  +  common-footer
          102  +}
          103  +proc wapp-page-style.css {} {
          104  +  wapp-mimetype text/css
          105  +  wapp-cache-control max-age=3600
          106  +  wapp-trim {
          107  +    pre {
          108  +       border: 1px solid black;
          109  +       padding: 1ex;
          110  +    }
          111  +  }
          112  +}
          113  +
    67    114   wapp-start $argv