html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 id="app">This is clojure</h1>
<button "test" onclick="hi()">hello</button>
<script src="out/main.js" type="text/javascript"></script>
</body>
</html>
hello world file:
(ns hello-world.core)
(println "Hello world!")
(def hi []
(println "test")
)
Should "hi" not get invoked in this clojure script project?
No. Every reference in CLJS is namespaced. If anything it would be hello_world.core.hi() instead of just hi(). You should however never hook up events this way.
Instead change your HTML to <button id="test">hello</button> and then somewhere in your CLJS call this to add the actual event handler.
(let [el (js/document.getElementById "test")]
(.addEventListener el "click"
(fn [e]
(println "test")))
Related
I would like to get information when I put buttons, for this I use DOM, but I have errors, how can I solve this problems?
I tried to confirm if name is correct, and search about DOM, but I couldn't figure out it.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="uft-8">
<title>Pomodoro Timer</title>
</head>
<body>
<p class="menu">menu</p>
<p class="timer">0.00</p>
<button data-option='start' class="timer_button" >start</button>
<button data-option='stop' class="timer_button">stop</button>
<button data-option='reset' class="timer_button">reset</button>
<script>
const buttons = document.querySelectorAll('[data-option]');
function test(e){
console.log(e);
}
buttons.forEach(()=>buttons.addEventListener('click',test));
</script>
</body>
I would like to see the results in the console when I put the buttons.
buttons.forEach((button)=>button.addEventListener('click',test))
The buttons is a list. When you iterate over it with forEach you can get each button as the first argument of the method. And that is where you must attach the event handler.
I have a Smarty templte.
in its php file I registered a block function:
function test1($args){
$str="";
for($i=0;$i<$args['times'];$i++){
$str.="<font color='".$args['color']."' size='".$args['size']."'>".$args['con']."</font>"."<br>";
}
return $str;
}
// register block function
$smarty->registerPlugin('block' ,'hsp', 'test1');
and in the template:
<html>
<head>
<title>{$title}</title>
</head>
<body>
<button>
Click me
</button>
{hsp times="1" size="5" color="green" con="hello,world"}
{/hsp}
</body>
</html>
I have two questions,
why I access the smarty file there gets two hello,world?
{hsp times="1" size="5" color="green" con="hello,world"}
{/hsp}
you see there is only 1 times.
2.I want to click the button, then I invoke the function, how to realize this?
I have a view Email1.cshtml (Build Action=Embedded Resource):
#model Email1Model;
<html>
<head>
</head>
<body>
<h1>Hello, #Model.Name</h1>
</body>
</html>
I render the cshtml view to string using ViewRenderService. The only difference is that I use IRazorViewEngine.GetView() instead of FindView();
However, in the output I some application insights stuff:
<html> <head>
<script type="text/javascript">
var appInsights=window.appInsights||function(config){....);
window.appInsights=appInsights;
appInsights.trackPageView();
</script> </head> <body>
<h1>Hello, Liero</h1> </body> </html>
In the startup.cs:
services.AddApplicationInsightsTelemetry(opt => opt.InstrumentationKey = appInsightsKey);
Question:
How do I turn off the javascript in specific views that I render using ViewRenderService?
If you _layout.cshtml has #Html.Raw(JavaScriptSnippet.FullScript) that will inject application insights javascript into each page, you could try adding a conditional in _layout.cshtml using:
#if (condition true for instrumenting)
{
#Html.Raw(JavaScriptSnippet.FullScript)
}
I'm trying to generate an html file to a file. I'm using with-html-output-to-string, but I can't seem to figure out how to get the functionality to work. I'm not sure if I should use a file stream, with-open-file, and how to get the syntax to work. I've been messing with this for a day, but the code just doesnt run.
CL-USER> (who:with-html-output-to-string (out nil :prologue t :indent t)
(:html
(:head
(:title "home"))
(:body
(:p "Hello cl."))))
"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html>
<head>
<title>home
</title>
</head>
<body>
<p>Hello cl.
</p>
</body>
</html>"
I am relatively new to Clojurescript and have run into something that I am not quite sure what the problem is. I have a function in my clojurescript that adds a new script element to the document for loading the FB API for which the script never tries to even load. There is no activity for that resource. I have rewritten the example in javascript and it works. I have looked at the generated clojurescript code and it looks basically the same as the javascript code that I wrote. I have tried a few things but in the end nothing will get the browser to load the dynamic script via using ClojureScript.
My code is
(ns wearthisorthat.client.fblogin
(:require [goog.net.XhrIo :as xhr]
[cljs.reader :as cljrdr]
[clojure.browser.repl :as repl]
[domina.events :as ev]
[domina :as d]
[domina.css :as css]))
(defn load-fb-sdk [debug?]
(let [ id "facebook-jssdk"
debug-str (if debug? "/debug" "")
ref (d/by-id "fb-script")
_ (.log js/console "ref = " ref)
parent (.-parent ref)
el-id (d/by-id id)
element (d/string-to-dom (str "<script id=" id " async"
" src=//connect.facebook.net/en_US/all"
debug-str ".js></script>"))
_ (.log js/console element)]
(when-not el-id (d/insert-before! ref element))))
(defn ^:export fbcb []
(let [data {:appId "<myappid>",
:channelUrl "<my-channel>",
:status true,
:cookie true,
:xfbml true}]
(.log js/console "RRRRRRRRRRR")
(js/FB.init (clj->js data))))
;; Load the SDK's source Asynchronously
(.log js/console "RIGHT HERE")
(aset js/window "fbAsyncInit" fbcb)
(load-fb-sdk true)
My index.html (before the update from my cljs above)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script id="fb-script"></script>
<script type="text/javascript" src="js/wtot.js"></script>
</body>
</html>
After my cljs runs my document looks like this...
<!DOCTYPE html>
<!-- saved from url=(0037)http://localhost:3000/wtot/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<div id="fb-root"></div>
<script id="facebook-jssdk" async src="//connect.facebook.net/en_US/all/debug.js"></script>
<script id="fb-script"></script>
<script type="text/javascript" src="./index_files/wtot.js"></script>
</body>
</html>
Google network traffic shows only the index.html and the wtot.js being loaded and not the debug.js (there are not error but no references in the log to try and load debug.js). If I make the dynamic script element to be static by copying and pasting the dynamic element above into my index.html, then the code works as expected. And as stated earlier, if I make this all in javascript including the dynamic addition of the script element, it all works. What am I missing?
Just an idea: I've seen a couple pages about adding scripts dynamically and they all create a new script and append it as a child of the <HEAD>, not the <BODY>:
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'helper.js';
head.appendChild(script);