Skip to main content

Nested Comment Threads in Rails - Part 1 Discussion

General • Asked by Chris Oliver
C85c7ef0252dc3ee7f467dbd530fddee

Greate episode! If I should get this episode a couple of years ago, that may should saved my life jajaja!

So, this is the same logic you are using here in your post and epdisode comments?

Ce795239ba5dd2384fc2f88ffaff5451

Yep, pretty much.

C85c7ef0252dc3ee7f467dbd530fddee

Awesome! Thanks for sharing Chris!


Fab02c9dc32d2fde05fa35f05b60eaaa

Woohoo, thanks for doing this!


6908b1c7fd69d0a688a8f693b33fc679

Thanks Chris! . This is great!


B852b5af066cd67806d2c0ddb3a2da54

For some reason...you often create episodes just fitting in my current needs..thanks.


F81713f7cc7417fa1643b6feb2168ce3

Chris as part of the next part2 series, please add the ability to dynamically update without refreshing the page.... Best practice. As i am able to use the reply system, but i hate how the page has to refresh and i have been struggling to have it appear directly on the page without refreshing... That will be helpful!!

F81713f7cc7417fa1643b6feb2168ce3

any help on this topic will be helpful

Ce795239ba5dd2384fc2f88ffaff5451

I can cover that in a follow-up episode. 👍


F81713f7cc7417fa1643b6feb2168ce3

Thank you chris for the consideration!!! that why i re-joined:) when you cather to all your user needs, you build a loyal group of people... Thank i am looking forward for the episode... you know when that will be? :) excited!!!


51f6934bf5c59bf5686b190834d054ff

hi chris,

using the rails generate command below:
rails g model Comment user:references commentable:references{ploymorphic}:index parent_id:integer body:text

created the migration file:
class CreateComments < ActiveRecord::Migration[5.2]
def change
create_table :comments do |t|
t.references :user, foreign_key: true
t.references :commentable, ploymorphic: true, foreign_key: true
t.integer :parent_id
t.text :body

  t.timestamps
end

end
end

which failed " PG::UndefinedTable: ERROR: relation "commentables" does not exist "

i went through the github files and found that your migration file did not have the foreign_key: true on the commentable line. i reran the migration and it worked, but just out of curiosity why did the references create a foreign_key: true for my migration and not your migration.

cheers

gus

Ce795239ba5dd2384fc2f88ffaff5451

It looks like you spelled polymorphic wrong which might be why it threw that error.

51f6934bf5c59bf5686b190834d054ff

bugger! typing on the train LOL! thanks


F81713f7cc7417fa1643b6feb2168ce3

chris can we also cover auto scrolling when comment meets at end of page, if it has more comments that it will load as user scrolls? maybe on the main page or do it on a pop up when a user clocks view more comments it pops up and then they can see all the comments and as they reach bottom if there is more comment it scrolls?


F81713f7cc7417fa1643b6feb2168ce3

Chris for some reason, i can't get stimulus Reply effect to work.... I am able to hide the reply but clicking on it does not do anything .. it does not expand or collapse

This seems to work for me "visibility: hidden" instead of d-none

but when i click reply, that does not work. i stimulus js dont seem to work for me. any debugging tips?

Ce795239ba5dd2384fc2f88ffaff5451

I'd just throw some console.logs into your JS and see what's getting called and what's not. Then you can figure out what you are missing.


A35539287a7c2d04aa48982222dd3501

Hi Chris, would it be worth using the Ancestry gem for nested comments like this?
I've been questioning whether there would be any noticable benefits. Thanks for this!

Ce795239ba5dd2384fc2f88ffaff5451

Yep, you certainly could. If you need those features it'd be great. Otherwise, there's not a whole lot of difference.


472f33f5964998938e9fe925eb9ab366

Hello Christ
I'm using the simplemde editor on my rails 5.0 blog site. simplemde displayed fine under the comment until i added nested comments based on this tutorial. The problem now is only the first reply textarea has simplemde attached to it correctly. but after submiting a first comment when i click reply i just get a basic textarea without simplemde attached to it.
I'm trying to achieve exactly how simplemde is being used with nested comments tread here at goRails

This is what my posts.coffee look like

simplemde = null
cleanupSimpleMDE = ->
  if simplemde?
    simplemde.toTextArea()
    simplemde = null

$(window).on 'popstate', cleanupSimpleMDE
$(document).on 'turbolinks:before-visit', cleanupSimpleMDE

$(document).on 'turbolinks:load', ->
    $mde = $(".simplemde")
    QUEUE = MathJax.Hub.queue
    if $mde.length > 0
        $mde.each (_, el) ->
            simplemde = new SimpleMDE({
                element: el,
                    ......
            })

and my form partial looks looks like this

<%=form_for([commentable, Comment.new], local: true, html: {class: local_assigns[:class], data: {target: local_assigns[:target]}}) do |form| %>
    <p class="message-area"><%=form.text_area :content, class: "simplemde", id: "md-editor"%></p>
    <%=form.hidden_field :parent_id, value: local_assigns[:parent_id]%>
    <p><%=form.error_message_for(:content)%></p>
    <div class="">
        <span class="inline-block p-r-10">
            <%=form.submit "Post reply", class: "btn btn-primary", id: "submit_comment"%>
        </span>
    </div>
<% end %>

Is there something i'm missing? Thanks for your help


Ce795239ba5dd2384fc2f88ffaff5451

Hey Lunik,

It sounds like SimpleMDE is not getting attached to the hidden reply comment forms.

For GoRails, I had to do this, so it applies SimpleMDE to any visible forms and then it also applied it when you click the Reply link.

Apologizes for the messy code, this could use some refactoring. :)

simplemde = []

cleanupSimpleMDE = ->
  # Clean up if already exists
  if simplemde.length > 0
    for editor in simplemde
      editor.toTextArea()
    simplemde = []

addSimpleMDE = (field) ->
  editor = new SimpleMDE({
    autoDownloadFontAwesome: false,
    element: field,
    toolbar: ["bold", "italic", "heading", "|", "code", "quote", "unordered-list", "ordered-list", "clean-block", "|", "link", "image", "|", "preview", "side-by-side", "fullscreen", "guide"],
    spellChecker: false
    status: false
  })

  simplemde.push(editor)
  return editor

@setupEditors = ->
  for editor in $(".simplemde:visible")
    addSimpleMDE(editor)

  $("[data-behavior='show-comment-form']").on "click", (e) ->
    e.preventDefault()
    reply_link = $(this)
    reply_link.hide()

    form = reply_link.parents(".forum_post").first().find("[data-behavior='comment-form']")
    form.show()
    addSimpleMDE(form.find("textarea")[0])

$(window).on 'popstate', cleanupSimpleMDE
$(document).on 'turbolinks:before-visit', cleanupSimpleMDE

$(document).on 'turbolinks:load', @setupEditors
472f33f5964998938e9fe925eb9ab366

Hi Chris, Thank you so much for your quick response, let me try your solution, i will keep you updated.

472f33f5964998938e9fe925eb9ab366

Hey Chris, Just to let you know your code above was very helpful in fixing my problem with simplemde not being applied to the reply text area. It works now!
Many thanks :)


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 18,000+ developers who get early access to new screencasts, articles, guides, updates, and more.

By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

More of a social being? We're also on Twitter and YouTube.