cljs-ajax example
This commit is contained in:
parent
f5b014864f
commit
f10870268e
23
resources/public/html/cljs-ajax.html
Normal file
23
resources/public/html/cljs-ajax.html
Normal file
|
@ -0,0 +1,23 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src="https://borkdude.github.io/scittle/js/scittle.js" type="application/javascript"></script>
|
||||
<script src="https://borkdude.github.io/scittle/js/scittle.cljs-ajax.js" type="application/javascript"></script>
|
||||
<script type="application/x-scittle">
|
||||
(require '[ajax.core :refer [GET]])
|
||||
|
||||
(defn handler [response]
|
||||
(js/alert (str response)))
|
||||
|
||||
(defn make-request []
|
||||
(GET "html/cljs-ajax.html" {:handler handler}))
|
||||
|
||||
;; export function to use from JavaScript:
|
||||
(set! (.-make_request js/window) make-request)
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="make_request()">
|
||||
Click me!
|
||||
</button>
|
||||
</body>
|
||||
</html>
|
|
@ -6,6 +6,7 @@
|
|||
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
|
||||
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
|
||||
<script src="js/scittle.reagent.js" type="application/javascript"></script>
|
||||
<script src="js/scittle.cljs-ajax.js" type="application/javascript"></script>
|
||||
<script type="application/x-scittle">
|
||||
(defn my-alert []
|
||||
(js/alert "You clicked!"))
|
||||
|
@ -25,6 +26,17 @@
|
|||
|
||||
(rdom/render [my-component] (.getElementById js/document "app"))
|
||||
|
||||
(require '[ajax.core :refer [GET]])
|
||||
|
||||
(defn handler [response]
|
||||
(js/alert (str response)))
|
||||
|
||||
(defn make-request []
|
||||
(GET "html/cljs-ajax.html" {:handler handler}))
|
||||
|
||||
;; export function to use from JavaScript:
|
||||
(set! (.-make_request js/window) make-request)
|
||||
|
||||
(def code-tags (.querySelectorAll js/document "code[data-type='scittle']"))
|
||||
|
||||
(require '[goog.object :as gobject])
|
||||
|
@ -38,6 +50,7 @@
|
|||
(set! (.-innerText code) response)
|
||||
(.highlightElement js/hljs code))))
|
||||
(.send req)))
|
||||
|
||||
</script>
|
||||
|
||||
<script src="cljs/script.cljs" type="application/x-scittle"></script>
|
||||
|
@ -98,6 +111,18 @@
|
|||
|
||||
<div id="app"></div>
|
||||
|
||||
<a name="cljs-ajax"></a>
|
||||
<h2><a href="#cljs-ajax">Cljs-ajax plugin</a></h2>
|
||||
|
||||
To enable <a href="https://github.com/JulianBirch/cljs-ajax">cljs-ajax</a>,
|
||||
in addition to <tt>scittle.js</tt>, you need to include <tt>scittle.cljs-ajax.js</tt>:
|
||||
|
||||
<pre><code data-type="scittle" data-src="html/cljs-ajax.html" class="html"></code></pre>
|
||||
|
||||
<button onclick="make_request()">
|
||||
Click me!
|
||||
</button>
|
||||
|
||||
<a name="examples"></a>
|
||||
<h2><a href="#examples">Examples</a></h2>
|
||||
<ul>
|
||||
|
|
|
@ -21,8 +21,9 @@
|
|||
(def html-source-dir (fs/file "resources" "public" "html"))
|
||||
(def html-target-dir (fs/file "gh-pages" "html"))
|
||||
(fs/create-dirs html-target-dir)
|
||||
(doseq [html ["export.html" "reagent.html"]]
|
||||
(fs/copy (fs/file html-source-dir html) html-target-dir))
|
||||
(doseq [html ["export.html" "reagent.html" "cljs-ajax.html"]]
|
||||
(fs/copy (fs/file html-source-dir html) html-target-dir
|
||||
{:replace-existing true}))
|
||||
|
||||
(def style-source-dir (fs/file "resources" "public" "css"))
|
||||
(def style-target-dir (fs/file "gh-pages" "css"))
|
||||
|
|
Loading…
Reference in a new issue