Blog Reply

Ajax Import

'use strict';

$(document).ready(function() {
	var openedReplyUrl = null;
	var openedReplyComment = null;
	$('.comment').each(function (index, commentElement) {
		$(commentElement).find('.reply').click(function (e) {
			var replyUrl = $(commentElement).attr('reply-url');
			if(openedReplyUrl == replyUrl) {
				return;
			}
			if(openedReplyUrl != null) {
				$(openedReplyComment).find('#commentForm').remove();
			}
			$.ajax({
				url: replyUrl,
				context: document.body
			}).done(function (html) {
				$(commentElement).append(html);
				openedReplyComment = commentElement;
				openedReplyUrl = replyUrl;
			});
			e.preventDefault();
		});
	});
})

Handler

module Handler.BlogReply where

import Import
import Data.Time
import Yesod.Auth

entryForm :: Maybe User -> Maybe CommentId -> Form Comment
entryForm user maybeCommentId = renderDivs $ Comment
    <$> pure maybeCommentId -- Parent
    <*> aopt textField (fieldSettingsLabel MsgTitle) Nothing
    <*> pure user -- User
    <*> areq htmlField (fieldSettingsLabel MsgContents) Nothing
    <*> lift (liftIO getCurrentTime)

getBlogReplyR :: Maybe CommentId -> Handler Html
getBlogReplyR maybeCommentId = do
    authId <- maybeAuthId
    user <- case authId of
      Just authId' -> runDB $ get authId'
      Nothing -> return Nothing

    (formWidget, formEnctype) <- generateFormPost $ entryForm user maybeCommentId
    let ham = [whamlet|
          <form #commentForm method=post action=@{BlogR maybeCommentId}#form enctype=#{formEnctype}>
            ^{formWidget}
            <input type="submit" value="Submit">
        |]

    pc <- widgetToPageContent ham

    giveUrlRenderer $ pageBody pc

HTML Form

<form id="commentForm" method="post" action="http://centrinia.ddns.net/blog/$1#form" enctype="application/x-www-form-urlencoded"><input type="hidden" name="_token" value="zUjsq5pUHC">
<div class="optional"><label for="h2">Title</label><input id="h2" name="f2" type="text" value=""></div><div class="required "><label for="h3">Contents</label><textarea id="h3" name="f3"></textarea></div>
<input type="submit" value="Submit">
</form>