0

I have basic feedback section, where people can post comments and replies to comments. When a comment is posted dynamically, I cannot reply to it because it is dynamically generated content. When the page is refreshed, you can reply to the comment. I tried with the selector parameter, but I cant get it to work. My question is, what should the selector be? What id?

$(function () {
    const $replyForm = $('#send-reply-form');

    $replyForm.on('submit', function (event) {
        event.preventDefault();
        const dataToSend = $replyForm.serialize();

        const dataArray = $replyForm.serializeArray();
        var feedbackId = dataArray[0].value;

        const feedbackParentElement = $('#' + feedbackId);

        $.post($replyForm.attr('action'), dataToSend, function (serverData) {
            $('#send-reply-form')[0].reset();
            $(feedbackParentElement).prepend(serverData);
        })
    })
})

Comment html

@model FeedbackViewModel

<div class="comment-list">
    <div class="single-comment justify-content-between d-flex feedbackCom">
        <div class="user justify-content-between d-flex">
            <div class="thumb">
                <img src="~/images/blog/c3.jpg" alt="">
            </div>
            <div class="desc">
                <h5>
                    <a href="#">@Model.Name</a>
                </h5>
                <p class="date">@Model.CreatedOn.Value.ToLongDateString()</p>
                <p class="comment">
                    @Model.Comment
                </p>
            </div>
        </div>
        <div class="reply-btn">
            <div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="replyModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="replyModalLabel">Submit Feedback</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="send-reply-form" asp-action="AddReply" asp-controller="Business" asp-area="Business">
                                <input type="hidden" name="feedbackparentId" id="feedbackparentId"/>
                                <input type="hidden" name="businessid" value="@Model.Business.Id" />
                                @Html.AntiForgeryToken()

                                <div class="form-group form-inline">
                                    <div class="form-group col-lg-6 col-md-6 name">
                                        <input type="text" name="authorName" class="form-control col-form-label" id="name" placeholder="Enter Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Name'">
                                    </div>
                                    <div class="form-group col-lg-6 col-md-6 email">
                                        <input type="email" name="email" class="form-control" id="email" placeholder="Enter email address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <textarea class="form-control mb-10" rows="5" name="comment" placeholder="Message" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Message'"
                                              required=""></textarea>
                                </div>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Send Feedback</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <button id="reply-button" type="button" class="btn btn-primary float-right" data-toggle="modal" data-target="#replyModal" data-id="@Model.Id">Reply</button>
        </div>
    </div>
</div>
<div class="comment-list left-padding" id="@Model.Id">
    @foreach (var reply in Model.Replies.OrderByDescending(r => r.CreatedOn))
    {
        <partial name="_ReplySectionPartial" model="reply" />
    }
</div>

Reply html

@model FeedbackViewModel

<div class="single-comment replyComment justify-content-between d-flex">
    <div class="user justify-content-between d-flex">
        <div class="thumb">
            <img src="~/images/blog/c6.jpg" alt="">
        </div>
        <div class="desc">
            <h5>
                <a href="#">@Model.Name</a>
            </h5>
            <p class="date">@Model.CreatedOn.Value.ToLongDateString()</p>
            <p class="comment">
                @Model.Comment
            </p>
        </div>
    </div>
</div>
bob
  • 4,282
  • 2
  • 22
  • 30
Tihomir Todorov
  • 77
  • 2
  • 7
  • First of all **id should be unique** so don't use the same id for more than one element .. Second take a look at [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Mohamed-Yousef Jun 09 '19 at 01:15
  • I have checked that before posting this and couldnt get it to work. – Tihomir Todorov Jun 09 '19 at 01:19
  • If you've just one form with id `#send-reply-form` then use `$(document).on('submit' , '#send-reply-form' , function(event){` instead of `$replyForm.on('submit', function (event) {` If you've duplicated id you need to use classes instead of ids then use the same method as I mentioned before – Mohamed-Yousef Jun 09 '19 at 01:27
  • I have tried that and it does not work, the page form is not sending data to the server. And this is the only item that uses this id. – Tihomir Todorov Jun 09 '19 at 01:46

0 Answers0