Quip Threaded Comment Reply Form on same page

1,145 Posts

donshakespeare Reply #21, 8 years, 9 months ago

I have that kind of refreshing thing incase the world fails, then there is some fallback.
But what fields are you talking about? The Quip fields or/and recaptcha?

You may use HTML5 required attr or JS to speed-bump forgetful users.
And maybe try this http://formvalidation.io/examples/validating-google-recaptcha/

Demo:
http://www.leofec.com/modx-revolution/using-only-one-form-in-modx-quip-comments.html
Go ahead and forget to enter the right recaptcha value

References (see what this guy did) I don't know if it will help you
http://cmhworks.com/blogs/2015/07/09/responsive-modx-quip/
http://forums.modx.com/thread/96540/using-only-one-form-in-modx-quip-comments---like-wordpress#dis-post-528023

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.

1,118 Posts

dubbs Reply #22, 8 years, 9 months ago

Quote from: donshakespeare at Jul 14, 2015, 02:31 PM

I have that kind of refreshing thing incase the world fails, then there is some fallback.
But what fields are you talking about? The Quip fields or/and recaptcha?

You may use HTML5 required attr or JS to speed-bump forgetful users.
And maybe try this http://formvalidation.io/examples/validating-google-recaptcha/

Demo:
http://www.leofec.com/modx-revolution/using-only-one-form-in-modx-quip-comments.html
Go ahead and forget to enter the right recaptcha value

References (see what this guy did) I don't know if it will help you
http://cmhworks.com/blogs/2015/07/09/responsive-modx-quip/
http://forums.modx.com/thread/96540/using-only-one-form-in-modx-quip-comments---like-wordpress#dis-post-528023

Hi, I just mean, when you throw the Reply Form into a modal, if the user does not enter their name, email or comment, then the validation fails, and instead of adding in the error states to the modal window, it instead loads the Reply Form resource page itself - I'd like to have the validation checked and passed back into the modal - therefore not moving the user out of the modal....

1,145 Posts

donshakespeare Reply #23, 8 years, 9 months ago

Ideally you want your user to never reach the Quip's validation error, that is, you want to force your own validation.

However if you still want to use Quip's validation error, check if your modal plugin accepts url parameters, some do, or just create your on JS event listener.

Example, my Quip form is hidden with an accordion, which also has the error divs (of course you can use CSS/JS to relocate these divs o the fly, to make the error visible whether or not the accordion is closed or not - or in your case, a modal window)

This accordion can be expanded or collapsed programmatically via a url parameter.
In the Quip's form action url, I appended ?ddPostComment=0
So in full, reply-form.html?quip_thread=article-b114-1516&quip_parent=1439?ddPostComment=0

If ddPostComment equals zero, the accordion will expand transitionally.
This ensures that the accordion is expanded whenever a comment is made or rejected, that is, when a post is made and the page refreshes.

Let me know if this is not a clear explanation.

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.

1,118 Posts

dubbs Reply #24, 8 years, 9 months ago

Quote from: donshakespeare at Jul 14, 2015, 07:33 PM

Ideally you want your user to never reach the Quip's validation error, that is, you want to force your own validation.

However if you still want to use Quip's validation error, check if your modal plugin accepts url parameters, some do, or just create your on JS event listener.

Example, my Quip form is hidden with an accordion, which also has the error divs (of course you can use CSS/JS to relocate these divs o the fly, to make the error visible whether or not the accordion is closed or not - or in your case, a modal window)

This accordion can be expanded or collapsed programmatically via a url parameter.
In the Quip's form action url, I appended ?ddPostComment=0
So in full, reply-form.html?quip_thread=article-b114-1516&quip_parent=1439?ddPostComment=0

If ddPostComment equals zero, the accordion will expand transitionally.
This ensures that the accordion is expanded whenever a comment is made or rejected, that is, when a post is made and the page refreshes.

Let me know if this is not a clear explanation.

Thanks - I think I follow your idea - but in practical terms, I am unsure how to make it work... wink

I am using FancyApps to create the modal, just launching a modal window with the Post Reply resource within it.

The button which launches the modal has code like this <a href="*/blog-post-reply.html?quip_approved=1&quip_thread=article-b32-172&quip_parent=70"> So I pass the relevant details to the Quip Post Reply page and that all works well.

What changes do I need to make to the Post Reply page to sort as per your suggestion then?

1,145 Posts

donshakespeare Reply #25, 8 years, 9 months ago

Is your modal window getting Quip replyto page via AJAX or iframe?
Is your replyto form same as main comment form?

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.

1,118 Posts

dubbs Reply #26, 8 years, 9 months ago

Quote from: donshakespeare at Jul 15, 2015, 07:36 AM

Is your modal window getting Quip replyto page via AJAX or iframe?
Is your replyto form same as main comment form?

Hi - Using Ajax, and the replyto form is very similar to the original yes. Only difference being I don't want the preview functionality - rest is as per the default.

Code to call in the Modal is:

<a class="various fancybox.ajax blogReplyBtn" href="*/blog-post-reply.html?quip_thread=article-b32-174&quip_parent=78">Reply to this comment</a>

And code on the replyto page is:

[[+preview]]
<span class="quip-success" id="quip-success-[[+idprefix]]">[[+successMsg]]</span>
 
<form id="quip-add-comment-[[+idprefix]]" action="[[+url]]#quip-comment-preview-box-[[+idprefix]]" method="post">
<div class="quip-comment quip-add-comment">
    <input type="hidden" name="nospam" value="" />
    <input type="hidden" name="thread" value="[[+thread]]" />
    <input type="hidden" name="parent" value="[[+parent]]" />
    <input type="hidden" name="auth_nonce" value="[[+auth_nonce]]" />
    <input type="hidden" name="preview_mode" value="[[+preview_mode]]" />
 
     <div class="quip-fld">
        <label for="quip-comment-name-[[+idprefix]]">[[%quip.name? &namespace=`quip` &topic=`default`]]:<span class="quip-error">[[+error.name]]</span></label>
        <input type="text" name="name" id="quip-comment-name-[[+idprefix]]" value="[[+name]]" class="formField" />
        <br />
    </div>
     
    <div class="quip-fld">
        <label for="quip-comment-email-[[+idprefix]]">[[%quip.email]]:<span class="quip-error">[[+error.email]]</span></label>
        <input type="text" name="email" id="quip-comment-email-[[+idprefix]]" value="[[+email]]" class="formField" />
        <br />
    </div>
     
    <div class="quip-fld">
        <label for="quip-comment-website-[[+idprefix]]">[[%quip.website]]:<span class="quip-error">[[+error.website]]</span></label>
        <input type="text" name="website" id="quip-comment-website-[[+idprefix]]" value="[[+website]]" class="formField" />
        <br />
    </div>
 
    <div class="quip-fld">
        <label for="quip-comment-notify-[[+idprefix]]">[[%quip.notify_me]]:<span class="quip-error">[[+error.notify]]</span></label>
        <input class="tickBox" type="checkbox" value="1" name="notify" id="quip-comment-notify-[[+idprefix]]" [[+notify:if=`[[+notify]]`:eq=`1`:then=`checked="checked"`]] />
        <br />
    </div>
 
    <div class="quip-fld recaptcha">
    [[+quip.recaptcha_html]]
    <span class="quip-error">[[+error.recaptcha]]</span>
    </div>
     
     
    <p><span class="quip-allowed-tags">[[%quip.allowed_tags? &tags=`[[++quip.allowed_tags:htmlent]]`]]</span>[[%quip.comment_add_new]]<span class="quip-error">[[+error.comment]]</span></p>
    <textarea name="comment" id="quip-comment-box-[[+idprefix]]" rows="5" class="formField">[[+comment]]</textarea>
     
    <!--<button type="submit" name="[[+preview_action]]" value="1">[[%quip.preview]]</button>-->
    [[+can_post:is=`1`:then=`<button type="submit" name="[[+post_action]]" value="1">[[%quip.post]]</button>`]]
     
    <br class="clear" />
</div>
</form>

[ed. note: dubbs last edited this post 8 years, 9 months ago.]

137 Posts

miomir.dancevic Reply #27, 7 years, 1 month ago

How did you managed to get all treath on one page?

<a href="www.play2web.com" title="izrada web sajtova">Izrada web sajtova</a>

Answered Quip Threaded Comment Reply Form on same page