Question

although I searched through existing threads for my problem I havent found a solution yet. I have a page which displays reports. The HTML of it looks like this:

<div class="reports-body" report-id="4">
    <!--Some HTML-->
    <div class="comments-title">
        <h3>3 Comments</h3>
    </div>
    <div class="comments">
        <!--The Comments-->
    </div>
</div>
<div class="reports-body" report-id="5">
    <!--Some HTML-->
    <div class="comments-title">
        <h3>3 Comments</h3>
    </div>
    <div class="comments">
        <!--The Comments-->
    </div>
</div>
<div class="reports-body" report-id="6">
    <!--Some HTML-->
    <div class="comments-title">
        <h3>3 Comments</h3>
    </div>
    <div class="comments">
        <!--The Comments-->
    </div>
</div>
etc...

Every reports-body has a commentbox, where a user can write a comment to this specific report. Now I want to reload the reports-body everytime after a user has submitted a comment. The reason why I wanted to reload the whole reports-body is, that the number in the comments-title needs also be refreshed, since the number is increased.

Unfortunatley my code doesn’t really work ~.~ My skills are not good enough to see the problem thats why I asked you for help. Here is the jquery code:

// defined earlier
var parent = $(this).closest('form')
// ...

$.ajax({
    type: 'post',
    dataType: 'json',
    url: webroot + 'reports_comments/add',
    data: data,
    beforeSend: function(XMLHttpRequest) {
        ajaxloader.show();
    },
    success: function(data) {
        if(data.status == 'success') {
            var server = data.server;
            var id = data.id;
            var summoner = data.summoner;
            var url = webroot + '/summoner/' + server + '/' + id + '-' + summoner;
            var rb = parent.parents('.reports-body');

            rb.load(url + ' .reports-body[report-id=' + rb.attr("report-id"));
        } else {
            parent.find('#ReportsCommentContent').css("border", "2px solid #BB1A11");
        }
    },
    error: function(request) {
        alert("Request Error.");
    },
    complete: function() {
        ajaxloader.hide();
    }
});

After submitting the comment, the reports-body disappears instead of getting reloaded. I hope you can help me.

Answer 1

You’ve forgot a bracket int the called URL.

rb.load(url + ' .reports-body[report-id=' + rb.attr("report-id"));

rb.load(url + ' .reports-body[report-id=' + rb.attr("report-id")+']');