jQuery question (load quip reply form with ajax)

358 Posts

Uncle68 Reply #1, 13 years, 1 month ago

EDIT: Solved this in a better way, my way below was stupid. I now just make a clone of the existing reply form on the page and set the value for the hidden input named "parent" to the correct number and it works fine.

Still would like to know why the form loaded twice in my original code below, but not important.

------

Hi there all web dev experts!

This is a jQuery question, but as usual I only trust Modx people so I ask here instead of in the jQuery forums.

I’m a jQuery beginner so this should probably be easy to answer...

I’m trying to load the Quip reply form into the page where the comments are. This is for when someone answers to some comment already made by someone other, threaded reply. I need to display the reply form just under the existing comment in the middle of the comment tree.

I have the separate quip answer page setup as usual:

[[!Quip? &somestuffhere=``]]

[[!QuipReply]]

Everything is working as it should without the ajax part.

To load the reply form into the page where the comments are I use this js code:

   $(".quip-reply-link a").click(function(){
       //Find out what div to insert reply form after:
       thisdiv = $(this).closest('.quip-comment-body');
       // Create a new div to insert:
       newdiv = $('<div id="newdiv">Load the reply form into this div</div>');
       // Insert the div:
       thisdiv.after(newdiv);
       // Load the reply form into the new div (hardcoded "get" data for testing):
       newdiv.load('http://www.mysite.com/quipreply.html?quip_thread=cmt2438&quip_parent=7298 #quip-reply-form');
       return false;
   });

The form is loadning fine, but: It loads twice! I get two identical reply forms in the new div.

Would be nice if someone could tell me what I’m doing wrong...

Also, if someone have a suggestion of doing this in a better way, it would be nice too. Perhaps I just should load a reply form and set the correct post url without using the separate quip reply page?

Even if so, still would like to know why the form is loading twice, need to get better with jQuery...

Thanks!

41 Posts

Nick2687 Reply #2, 12 years, 3 months ago

Hey Uncle68 can you provide an example of what you did to get this to work. I'm attempting something similar and have not quite got it figured out.

Cheers.

1,098 Posts

microcipcip Reply #3, 12 years, 2 months ago

Hi Uncle68, I am also interested in your solution, share please (:

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

433 Posts

michelle84 Reply #4, 11 years, 5 months ago

I know this post is old, but I just figured out how to do this so I thought I'd post my solution here. Uncle68's post pointed me in the right direction.

I use this jquery to insert the reply form (on document ready):

$('.quip-reply-link a').toggle(function() {
            
      // find ID of parent
      var parentId = $(this).closest('li').attr('id');
            
      // strip the word 'qcom' from parent li (to get number of comment)
      idNumber = parentId.replace('qcom', '');   
            
      //add div with replyform (get the html from the 'normal' commentform at the bottom of the page)
      $(this).after('<div class="quickReplyForm">'+$(".commentForm").html()+'</div>');  
            
      // give hidden parent input field value of current parent
      $(".quickReplyForm input[name=parent]").val(idNumber);
            
      // remove all other open forms
      var currentReply = $(this).next('.quickReplyForm');
      $('.quickReplyForm').not(currentReply).remove();
            
      return false;
      
    }, function(){
         
         // on toggle: remove form
         $(".quickReplyForm").remove();
               
    });

In short, I copy the html from the 'normal' comment form on the bottom of the page and place this after the selected 'reply to this comment' link, and change the hidden input field with 'parent' to the id of the current comment so the reply will be placed in the right place. Because the normal reply link works when there is no javascript, this is an accessible solution as well. (the 'return false' makes the normal link behaviour not occur).

BTW I'm not a Jquery expert so maybe there are better ways to do this, but it works for me

http://www.vierkante-meter.nl

215 Posts

designcouch Reply #5, 10 years, 4 months ago

Just wanted to say thank you, Michelle. Your solution is really quite nice (and more efficient than my own).

Jesse Couch
MODX Aficionado, Front-End Designer & Developer
http://www.designcouch.com