#Help adding comments with AJAX

9 messages · Page 1 of 1 (latest)

wind lake
#

Hello, so im building a simple site that is a forum. It allows users to create threads and for users to reply to them.

I want to add functionality to the website so that a user can post a comment and its shown immedietly without requiring a page refresh.

Im just not sure the best to go about it, i understand i need to use AJAX and i have ajax code working. Just need to then update the data on the website itself. My replies container is quite big so i want to avoid just having javascript insert into this if possible.

Is there a way in JS for me to insert into the while look? Here is my current code for the replies container, which looks through each of the replies and shows them along with buttons for liking, disliking. Editing and Deleting. Then below this there is a box for users to write and post comments.

📎 message.txt
#

Here is my Javascript:

        <script type="text/javascript">
            function postComment() {
                console.log("Test")
                var body = $('#body').val();

                // Prepare the data
                var formData = {
                    body: body,
                };

                // Make an AJAX request
                $.ajax({
                    url: '{{ $thread->path() . '/replies'}}',
                    type: 'POST',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    },
                    success: function(response) {
                        console.log(response)                        // Update the DOM with new replies
                        Alpine.store('replies', response.replies);
                    },
                    error: function(error) {
                        console.error('Error posting comment:', error);
                    }
                });
            }
        </script>

I was thinking of using Alpine.Store here but am completley unsure. So please advise.

solemn walrus
#

What's your question?

wind lake
#

I have done some work and removed Alpine JS and now am just using jquery.

solemn walrus
# 
$('#replies-container').append("<div> ... </div>");
#

I would reach for Livewire or (Vue.js + Inertia) to build something like this

torpid ivy
#

Yeah, if you're using AlpineJS, then you may as well add Livewire into the mix (it's AlpineJS based as of V3)