search

mario-goulart / awful

awful provides an application and an extension to ease the development of web-based applications in CHICKEN Scheme
http://wiki.call-cc.org/egg/awful
Other
75 stars 6 forks source link

(javascript-position 'bottom) doesn't work correctly #6

Closed ghost closed 5 years ago

ghost commented 5 years ago

Hi Mario,

I recently discovered your web framework and played a bit around with it - really awesome, well done! :-)

Maybe I did something wrong, but I think the (javascript-position 'bottom) does not always work correctly. I've created the following (not yet complete) page-template and it seems that the generated <script> code is always prepended to the contents:

(page-template
  (lambda (contents #!key css title doctype headers charset content-type literal-style? (html-attribs '()) (body-attribs '()))
    `(!doctype (@[html])
    (html
      (head
        (title ,title)
        (link (@[rel "stylesheet"][type "text/css"][href "https://fonts.googleapis.com/css?family=Roboto"]))
        (link (@[rel "stylesheet"][type "text/css"][href "static/frow.min.css"]))
        (link (@[rel "stylesheet"][type "text/css"][href "static/main.css"]))
        (meta (@[name "viewport"][content "width=device-width, initial-scale=1.0, shrink-to-fit=no"]))
        (meta (@[charset "utf-8"])))
      (body
        (div (@[class "frow-container"])
          (h1 ,title)
          (div (@[style "border: 1px solid red;"]) ,contents)
          (hr)
          (h1 "footer"))
        (script (@[type "text/javascript"][src "https://zeptojs.com/zepto.min.js"])))))))

As Zepto is included afterwards, the generated jQuery functions don't work properly. As a workaround, I set (javascript-position 'top) and placed the header parameter below the script tag.

Cheers David

mario-goulart commented 5 years ago

Hello David.

Thanks for your kind words and sorry for taking so long to reply.

I'm not sure I understand the problem you describe, but assuming you mean the position of the javascript code generated by ajax-related procedures, maybe it's more flexible to control exactly where you want the javascript code to be placed by referencing the page-javascript parameter explicitly. Here's an example based on your code:

(page-template
  (lambda (contents #!key css title doctype headers charset content-type literal-style? (html-attribs '()) (body-attribs '()))
    `((literal "<!DOCTYPE html>")
      (html
       (head
        (title ,title)
        (link (@[rel "stylesheet"][type "text/css"][href "https://fonts.googleapis.com/css?family=Roboto"]))
        (link (@[rel "stylesheet"][type "text/css"][href "static/frow.min.css"]))
        (link (@[rel "stylesheet"][type "text/css"][href "static/main.css"]))
        (meta (@[name "viewport"][content "width=device-width, initial-scale=1.0, shrink-to-fit=no"]))
        (meta (@[charset "utf-8"])))
      (body
        (div (@[class "frow-container"])
          (h1 ,title)
          (div (@[style "border: 1px solid red;"]) ,contents)
          (hr)
          (h1 "footer"))
        (script (@[type "text/javascript"][src "https://zeptojs.com/zepto.min.js"]))
        (script (@ (type "text/javascript"))
                ,(page-javascript)))))))

(define-page (main-page-path)
  (lambda ()
    (ajax "test" 'foo "click"
          (lambda ()
            "foo was clicked")
          target: "bar")
    `((div (@ (id "foo")) "click me")
      (div (@ (id "bar"))))))

If the example above does not address your problem, let me know.

P.S.: I changed the code that inserted the page doctype in your example.

ghost commented 5 years ago

Hi Mario,

no problem, thank your very much for your help!

I thought it would work out of the box as the egg documentation says

Possible values are top (in the page headers) and bottom (right before </body>).

but it works correctly now using page-javascript :-)

Cheers David