Issue in defsnippet about enfocus HOT 15 CLOSED

I haven't used defsnippet much, but this exception usually occurs when you're trying to use DOM functions on an element, which is not yet in the DOM.

from enfocus.

I think the problem may be your top-navbar is not closed. It might be picking up the second on and your selection is failing because it doesn't contain what you want. Also I would use single quotes around 'left' in your selector but I don't think this is an issue.

from enfocus.

If I open up the file in the browser, and select the element using jquery works, so it means it is in the DOM, correct ?

Also the nav-link snippet works, which is actually a child of the above element in the DOM. Only no operations on the parent element which is done through the snippet top-navbar fails.

I have copied the complete code below -

(ns faiz.client.transforms
  (:require [enfocus.core :as ef])
  (:use-macros [enfocus.macros :only [append defsnippet content at set-attr]]))

(defn doc [] js/document) 

(def templ "templates/components.html")

(defsnippet nav-link templ ["top-navbar ul[data-navlinks=\"left\"]:first-child"]
  [{:keys [url text]}]
  ["a"] (set-attr :href url)
  ["a"] (content text))

(defsnippet top-navbar templ ["top-navbar"]
  [links]
  ["ul[data-navlinks=\"left\"]"] (content (map nav-link links)))

(defn init [title links]
  (at (doc)
         ["title"] (content "Faiz-ul-Mawaid-il-Burhaniyah - Poona Students")
         ["body > header"] (content top-navbar links)))

from enfocus.

Creighton and Sergei thanks for your responses.

Creighton I didnt understand what you meant by that the top-navbar is open ?

from enfocus.

sorry I meant the tag does not have a closing tag. Instead there is another tag where shoud occure.

from enfocus.

I am sorry I may be missing it, however the following does have the closing tag-

<ul data-navlinks="left" class="nav">
            <li><a href="#">Link</a></li>
</ul>

from enfocus.

sorry I just realized the code included with my last post did not show up.

<top-navbar>
...
<top-navbar>

instead of

<top-navbar>
...
</top-navbar>

from enfocus.

thanks for catching that. I fixed the tag issue and there was another small issue I fixed. Here is the new code -

(ns faiz.client.transforms
  (:require [enfocus.core :as ef])
  (:use-macros [enfocus.macros :only [append defsnippet content at set-attr html-content]]))

(defn doc [] js/document) 

(def templ "templates/components.html")

(defsnippet nav-link templ ["top-navbar ul[data-navlinks='left']:first-child"]
  [{:keys [url text]}]
  ["a"] (set-attr :href url)
  ["a"] (content text))

(defsnippet top-navbar templ ["top-navbar"]
  [links]
  ["ul[data-navlinks='left']"] (content (map nav-link links)))

(defn init [title links]
  (at (doc)
         ["title"] (content "Faiz-ul-Mawaid-il-Burhaniyah - Poona Students")
         ["body > header"] (content (top-navbar links))))

I get this error now -

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
create_hidden_domclient.js:30517
get_cached_snippetclient.js:30582
vec__33133__33134client.js:31509
top_navbarclient.js:31510
(anonymous function)client.js:31528
map__2client.js:10051
lazy_seq_valueclient.js:7420
cljs.core.LazySeq.cljs$core$ISeqable$_seq$arity$1client.js:7463
_seqclient.js:3318
seqclient.js:4414
dorun__1client.js:17383
dorunclient.js:17417
doall__1client.js:17430
doallclient.js:17440
initclient.js:31526
(anonymous function)

Any pointers to how I can debug this will be appreciated.

from enfocus.

Thanks for your suggestions. I was not able to resolve it client side, but created the snippet on the serve side using enlive and then passed it through ajax to client side, where it was inserted in the DOM using enfocus.

from enfocus.

Murtaza,
Sorry you have had so much trouble. I am glad you found a work around but I would love to try to figure out what went wrong and make sure its not a bug in the underlying structure. If possible can you post the html file your enlive snippet that worked and the enfocus snippet in a gist for me and I will take it off line and work out what went wrong. Thanks for working through all this and being patient, one thing this issue has made very clear we need better error handling and messages.

Creighton

from enfocus.

Creighton,

Appreciate the effort that you and the others are putting in and we are thankful for that.

Below is the gist for enlive and enfocus code that worked. In this I am retrieving the html fragment from server side - https://gist.github.com/2883717

The html document gist - https://gist.github.com/2883735

The code that didnt work was in which I was trying to generate the html fragment on the client side itself. The code was similar except the selectors.

Also if there are any sample projects, they would also be really helpful in learning the concepts that have been implemented by you guys in production. Like what clojurescriptone was suppose to do, but unfortunately its no longer being updated.

Thanks,
Murtaza

from enfocus.

I created "The Great Todo" application as a sample application for noir, enfocus and mongodb. It is a great place to start to see how I organised everything. Its a much simpler setup than clojurescriptone its only about 120 lines of code. You can find it here: https://github.com/ckirkendall/The-Great-Todo

from enfocus.

@leontalbot are you looking for an example app for enfocus work. The-Great-Todo is a an older app I created it can give you the basics but it might be better to take a look at chatter-box or the enfocus-site. The technology stack of the Great-To-Do is very out of date. The issue you are having is due to you starting monodb on the port the server is expected to run on. Leave monodb running on the default port and follow the instructions for starting the app in the readme.

$>lein cljsbuild once
$>lein run
Navigate to http://localhost:10012

You can find the documentation site here: http://ckirkendall.github.io/enfocus-site/index.html

and the code for it here: https://github.com/ckirkendall/enfocus-demo-site/blob/master/src/enfocus/demo/site.cljs

from enfocus.

@leontalbot - to understand the chatter-box you can see a video here: https://www.youtube.com/watch?v=jj6eQieGWqo

from enfocus.

Thanks so much for taking the time. Great video!

2014-08-09 18:31 GMT-04:00 Creighton Kirkendall [email protected]:

@leontalbot https://github.com/leontalbot - to understand the
chatter-box you can see a video here:
https://www.youtube.com/watch?v=jj6eQieGWqo

—
Reply to this email directly or view it on GitHub
#11 (comment).

from enfocus.