jQuery on yesod haskell

Question

I'm new on functional programming. New on Haskell and Yesod.

I'm just only trying to show a 'div' with login form

(Sorry, but english is not my first language)

module Handler.Share where

import  Import
import  Text.Lucius

menu :: Widget
menu = [whamlet|
<a onclick="showlogin()">
  Entrar
  <div #login>
    <h2>
      Login
      <p>Usuário:
      <p>Senha:
      <p>
        <a>
            Esqueci minha senha
        <br>
        <a>
            Novo cadastro

|]

getShareR :: Handler Html
getShareR = do
    defaultLayout $ do
        addScriptRemote "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
        toWidgetHead [julius|    
          function showlogin(){
            $("#login").show("slow");
          }
        |]
        toWidget $ $(luciusFile "templates/share.lucius")
        $(whamletFile "templates/share.hamlet")

Return: Uncaught ReferenceError: $ is not defined

Answer 1

I learned to use 'toWidget' instead 'toWidgetHead' to load the script at the end of the page.

getShareR :: Handler Html
getShareR = do
    defaultLayout $ do
        addStylesheet $ StaticR css_bootstrap_css
        addScriptRemote "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
        toWidget [julius|
          $(document).mouseup(function (e) {
            var div = $("#login");
            if (!div.is(e.target) && div.has(e.target).length === 0) {
                if (div.is(':visible')) {
                    div.toggle("slow");
                }
            }
          });

          function showlogin(){
            $("#login").show("slow");
          }
        |]
        toWidget $ $(luciusFile "templates/share.lucius")
        $(whamletFile "templates/share.hamlet")