How to use Jquery in Yesod Haskell

Asked

Viewed 43 times

0

I am just trying to display a div with the login fields

{-# LANGUAGE NoImplicitPrelude #-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TemplateHaskell #-}
{-# LANGUAGE QuasiQuotes #-}
{-# LANGUAGE MultiParamTypeClasses #-}
{-# LANGUAGE TypeFamilies #-}
module Handler.Share where

import  Import
import  Text.Lucius
import Database.Persist.Postgresql

menu :: Widget
menu = [whamlet|
    <nav .navbar .navbar-default .navbar-fixed-top>
      <div .container-fluid>
        <div .navbar-header>
          <button type="button" .navbar-toggle .collapsed data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span .sr-only>Toggle navigation</span>
            <span .icon-bar></span>
            <span .icon-bar></span>
            <span .icon-bar></span>

        <div .collapse .navbar-collapse id="bs-example-navbar-collapse-1">
          <ul .nav .navbar-nav .navbar-right>
            <li>
              <a>
                Cadastrar-se
            <li>
              <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
        addStylesheet $ StaticR css_bootstrap_css
        addScriptRemote "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
        toWidgetHead [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")

And returns: Uncaught Referenceerror: $ is not defined

haskell

1 answer

0

I learned that I should use only 'toWidget' instead of 'toWidgetHead' for the script to load at the bottom of the page and not at the beginning.

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")

Browser other questions tagged haskell

You are not signed in. Login or sign up in order to post.