Menu
I am new to Clojure and I am trying to implement some ClojureScript functions in my project. I added [org.clojure/clojurescript "0.0-2138"] to my dependencies in project.clj. I tried for example:
(js/alert "Hello from ClojureScript.")
It says No such namespace: js!
What am I doing wrong? Can anyone help?
Here is my complete project.clj:
(defproject MyProject "0.1.0-SNAPSHOT"
:description "FIXME: write description"
:url "http://example.com/FIXME"
:license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"}
:dependencies [[org.clojure/clojure "1.5.1"][table "0.4.0"][cljs-uuid "0.0.4"][lein-swank "1.4.5"][midje "1.5.1"]
[mysql/mysql-connector-java "5.1.18"][org.clojure/java.jdbc "0.1.1"]
[ring/ring-jetty-adapter "1.1.6"]
[compojure "1.1.3"]
[hiccup "1.0.2"]
[org.clojure/clojurescript "0.0-2138"]
[domina "1.0.2"]
[prismatic/dommy "0.1.1"]]
:plugins [[lein-cljsbuild "0.3.4"]]
;; cljsbuild options configuration
:cljsbuild {:builds
[{;; CLJS source code path
:source-paths ["src/cljs"]
;; Google Closure (CLS) options configuration
:compiler {;; CLS generated JS script filename
:output-to "resources/public/js/test.js"
;; minimal JS optimization directive
:optimizations :whitespace
;; generated JS code prettyfication
:pretty-print true}}]}
)
This is the file where I am trying to put the ClojureScript function. I am using Eclipse and Clojure REPL.
(ns webapp.pages
(:use [compojure.core :only (defroutes GET)]
[ring.adapter.jetty :as ring])
(:require [clojure.java.jdbc :as sql])
(:require
[ring.util.response :as resp])
(:use [hiccup.page :only (html5 include-css include-js)])
(:use webapp.db)
)
(defn showAlert []
(js/alert "Hello from ClojureScript.")
)
(defn insert-user [firstname lastname email password sex date]
(sql/with-connection db
(sql/insert-values :users
[:name :lastName :email :password :birthDate :gender]
[firstname lastname email password date sex])
)
(resp/redirect "/")
(showAlert)
)
(defn index []
(html5
[:head
[:title "Kladionica"]
[:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]
(include-css "/public/css/bootstrap.min.css")
]
[:body
[:div {:class "modal fade" :id "myModal" :role "dialog" :aria-hidden "true"}
[:div {:class "modal-dialog"}
[:div {:class "modal-content"}
[:div {:class "modal-header"}
[:button {:type "button" :class "close" :data-dismiss "modal"}"x"]
[:h3 "Registracija"]
]
[:div {:class "modal-body"}
[:form {:action "/insert-user" :method "post" :class "form" :role "form"}
[:div {:class "row"}
[:div {:class "col-xs-6 col-md-6"}
[:input {:class "form-control" :style "margin-bottom: 10px;" :name "firstname" :placeholder "Ime" :type "text"}]
]
[:div {:class "col-xs-6 col-md-6"}
[:input {:class "form-control" :style "margin-bottom: 10px;" :name "lastname" :placeholder "Prezime" :type "text"}]
]
]
[:input {:class "form-control" :style "margin-bottom: 10px;" :name "email" :placeholder "Email" :type "email"}]
[:input {:class "form-control" :style "margin-bottom: 10px;" :name "password" :placeholder "Lozinka" :type "password"}]
[:input {:class "form-control" :style "margin-bottom: 10px;" :name "re-password" :placeholder "Ponovljena lozinka" :type "password"}]
[:label {:for ""} "Datum rodjenja"]
[:div {:class "row"}
[:div {:class "col-xs-4 col-md-4"}
[:select {:class "form-control" :name "month"}
[:option {:value "" :disabled "disabled" :selected "selected"} "Mjesec"]
[:option {:value "01"} "Januar"]
[:option {:value "02"} "Februar"]
[:option {:value "03"} "Mart"]
[:option {:value "04"} "April"]
[:option {:value "05"} "Maj"]
[:option {:value "06"} "Jun"]
[:option {:value "07"} "Jul"]
[:option {:value "08"} "Avgust"]
[:option {:value "09"} "Septembar"]
[:option {:value "10"} "Oktobar"]
[:option {:value "11"} "Novembar"]
[:option {:value "12"} "Decembar"]
]
]
[:div {:class "col-xs-4 col-md-4"}
[:select {:class "form-control" :name "day"}
[:option {:value "Day" :disabled "disabled" :selected "selected"} "Dan"]
(for [i (range 1 32)]
[:option {:value i} i]
(inc i))
]
]
[:div {:class "col-xs-4 col-md-4"}
[:select {:class "form-control" :name "year"}
[:option {:value "Year"} "Godina"]
(for [i (range 1900 2015)]
[:option {:value i} i]
(inc i))
]
]
]
[:label {:class "radio-inline"}
[:input {:type "radio" :name "sex" :id "maleId" :value "male"}]
"Musko"
]
[:label {:class "radio-inline"}
[:input {:type "radio" :name "sex" :id "femaleId" :value "female"}]
"Zensko"
]
[:br]
[:br]
[:button {:class "btn btn-lg btn-primary btn-block" :type "submit"} "Registruj se"]
]
]
[:div {:class "modal-footer"}
]
]
]
]
[:div {:class "navbar navbar-inverse navbar-static-top"}
[:div {:class "container"}
[:a {:href "#" :class "navbar-brand"} "TOP Kladionica"]
[:div {:class "navbar-collapse collapse"}
[:ul {:class "nav navbar-nav navbar-right"}
[:li [:a {:href "#myModal" :data-toggle "modal"} "Registracija"]]
[:li {:class "dropdown"}
[:a {:href "#" :class "dropdown-toggle" :data-toggle "dropdown" } "Login" [:b {:class "caret"}]]
[:ul {:class "dropdown-menu" :style "padding:15px;min-width:250px;"}
[:li
[:div{:class "row"}
[:div {:class "col-md-12"}
[:form {:class "form" :role "form" :method "post" :action "login" :accept-charset "UTF-8" :id "login-nav"}
[:div {:class "form-group"}
[:label {:class "sr-only" :for "inputEmail"} "Email adresa"]
[:input {:type "email" :class "form-control" :id "inputEmail" :placeholder "Email adresa" }]
]
[:div {:class "form-group"}
[:label {:class "sr-only" :for "inputPassword"} "Lozinka"]
[:input {:type "password" :class "form-control" :id "inputPassword" :placeholder "Lozinka" }]
]
[:div {:class "checkbox"}
[:label
[:input {:type "checkbox"} "Zapamti me"]
]
]
[:div {:class "form-group"}
[:button {:type "submit" :class "btn btn-success btn-block"} "Login"]
]
]
]
]
]
[:li {:class "divider"}]
[:li
[:input {:class "btn btn-primary btn-block" :type "button" :id "sign-in-google" :value "Google prijava"}]
[:input {:class "btn btn-primary btn-block" :type "button" :id "sign-in-twitter" :value "Twitter prijava"}]
]
]
]
]
]
]
]
[:div {:class "navbar navbar-default navbar-fixed-bottom"}
[:div {:class "alert alert-success alert-dismissable pull-right" :style "display:none"}
[:button {:type "button" :class "close" :data-dismiss "alert" :aria-hidden "true"} "x"]
[:strong "Uspijeh!"] "Uspjesno ste se registrovali!"
]
]
(include-js "//code.jquery.com/jquery-1.10.2.min.js")
(include-js "/public/js/bootstrap.js")
]
)
)
847
A couple of things here.
First of all, ClojureScript is a separate (but related) language with its own compiler, so you can't just put ClojureScript code in a Clojure file.
Second, ClojureScript needs to be compiled into JavaScript in order to do anything, and then that JavaScript needs to be executed by a JavaScript engine. You can do the compiling with the lein-cljsbuild plugin.
For a quick and easy introduction to ClojureScript, take a look at David Nolen's The Essence of ClojureScript. It will get you up and running in literally seconds, and you can take a look around the generated project.clj file to see how a project can be set up for ClojureScript if you're curious.
However, if you're very new to Clojure, it might be better to get comfortable with Clojure and Leiningen before jumping into ClojureScript. You don't have to, but it might be easier.
61
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
