Quip how to have a reply link and inline form for threading

[wemyssweb]

I would like some advice on how to change threaded comments so that i do not need a new page.
Just have it appear below the comment with a reply link or button so that it is hidden.

[halftrainedharry]

It seems that the difference between a threaded and a non-threaded comment is just the value of the input field “parent” in the form.

<input type="hidden" name="parent" value="0" />

The value is “0” if the comment is not a reply to another comment, else the value is the id of the comment you reply to.

With some Javascript code it should be possible to read the “quip_parent” parameter from the reply-link and write it to input-field “parent” in the form.

<span class="quip-reply-link"><a href="index.php?id=123&quip_thread=mythread&quip_parent=20">Reply</a></span>

Here is some jQuery code to illustrate my point.

[[!Quip? &thread=`mythread` &replyResourceId=`123`]]
<br />
[[!QuipReply? &thread=`mythread`]]

<script>
$(function() {
    //helper function to get a parameter from a url
    function getUrlParameter(sParam, sPageURL)
    {
    	var sURLVariables = sPageURL.split('&');
    	for (var i = 0; i < sURLVariables.length; i++)
    	{
    		var sParameterName = sURLVariables[i].split('=');
    		if (sParameterName[0] == sParam)
    		{
    			return sParameterName[1];
    		}
    	}
    }    
    
    //new click-handler for reply-links
    $(".quip-reply-link a").click(function(e) {
        e.preventDefault();
		
        //extract quip_parent from href
        var parent = getUrlParameter('quip_parent',$(this).attr("href"));		
		//set parent in the form
		$("input[name='parent']").val(parent);
		
		//scroll to form
		$('html, body').animate({
            scrollTop: $("#quip-add-comment-qcom").offset().top
        }, 500);
	});
});
</script>

[wemyssweb]

Interesting, but cannot get it working.
Is this supposed to scroll the reply form 500px from the top?
Will have a look at the PHP and JavaScript code.
Do not know much about ext.js.

[halftrainedharry]

This example uses jQuery not Ext.js.
If you don’t already use jQuery than you have to download it or rewrite the code to use only plain javascript.

<script src="jquery-3.5.1.min.js"></script>

When you click on a “reply”-link, it scrolls to the form that is at the bottom of the page. (500 is the time in milliseconds it takes to finish the scroll-animation). This is just an example. The important part is to change the value of the “parent” field. A better solution is probably to change the CSS of the form to position: fixed; (like in this forum) and then show/hide it with $("#quip-add-comment-qcom").slideUp(); respectively $("#quip-add-comment-qcom").slideDown(); in jQuery.

[wemyssweb]

Got it working, was using slim jquery!
Sorry it does not work, still opens form in a new page?
An ideal solution would be to have jquery insert the form where the reply link is like in twitter!
Is this working for you on Modx?

[halftrainedharry]

@wemyssweb

An ideal solution would be to have jquery insert the form where the reply link is

You can achieve this, when you replace the code that scrolls to the form with this code:

//move form to position after reply link
$(this).parents(".quip-comment-text").after($("#quip-add-comment-qcom"));

@wemyssweb

Is this working for you on Modx?

Yes, it work on my installation. Are there any errors in the console of the developer tools in the browser?

[wemyssweb]

Will check when i get home.
Do i need to remove the comment resource and change the snippet property?

[halftrainedharry]

No need to remove the “reply resource”. You have to keep the &replyResourceId-property or else the snippet call won’t create reply-links.

[[!Quip? &thread=`mythread` &replyResourceId=`123`]]
[[!QuipReply? &thread=`mythread`]]

Also, make sure to use the default templates for &tplComment and &tplAddComment so that the class/id-selectors in the code match the markup.

[wemyssweb]

Was working then got this error in frontend?
This thread has been closed from taking new comments.

[halftrainedharry]

The snippet QuipReply has a property &closeAfter that defines the number of days at which the thread will automatically close after it was created. The default is 14 days. Set the property to 0 to leave the thread open indefinitely.

[wemyssweb]

Thanks so much for your help.
I was having another issue with the reply links not showing.
Checked all relevant code for errors.
Went into quip comment back end and deleted threads.
Then my reply links appeared.