JQuery .load() does not load correctly
<p>although I searched through existing threads for my problem I havent found a solution yet. I have a page which displays <em>reports</em>. The HTML of it looks like this:</p>

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

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

<p>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:</p>

<pre><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();
    }
});
</code></pre>

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