HTML structure disturbed after ajax response

Question

I am using django 1.5, python 2.7 and jquery 1.9. Though this question is primarily related to javascript.

My html code is as below. This forms a list of objects like:

<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">

Now when I get some more data in through ajax, the structure formed is something like this:

<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
    <div class="item cls"> #new div
        <div class="item cls"> #new div
                <div class="item cls"> #new div
                        <div class="item cls"> #new div

HTML:

{% for obj in objs %}        
        <div class="item cls">
            <div class="alpha"><a href="#"><img src="{{ STATIC_URL }}img/107.png" /></a></div>
            <div class="span6" id="abc_{{ obj.id }}">
            <h2 class="Title"><a href="#">{{ obj.t }}</a></h2>
            <p>{{ obj.a }}</p>

            <div class="tags">
            <a href="#"><i class="icon"></i> Intel</a>
            <a href="#"><i class="icon"></i> Architecture</a>
            </div>

           <a href="#" class="btn"><i class="icon"></i> Upload </a>
           <a href="#" class="btn"><i class="icon"></i> Download </a>
          </div>
        </div>
{% endfor %}

AJAX SUCCESS:

for(var i = 0; i < response.length; i++){
    var divs = document.getElementsByClassName('item');
    divs[parseInt(divs.length)-1].innerHTML = '<div class="item cls"><div class="alpha"><a href="#"><img src="{{ STATIC_URL }}img/107.png" /></a></div><div class="span6" id="abc_' + response[i].id + '"><h2 class="Title"><a href="#">' + response[i].t + '</a></h2><p>' + response[i].a + '</p><div class="tags"><a href="#"><i class="icon"></i> Intel</a><a href="#"><i class="icon"></i> Architecture</a></div><a href="#" class="btn"><i class="icon"></i> Upload </a><a href="#" class="btn"><i class="icon"></i> Download </a></div></div>'

There is some problem in the line where I append the code in the innerHTML. Don't understand what that is. Please help!!!

You're probably missing a `` somewhere. And instead of doing a single-liner of markup, you could parse it only once storing it inside of a jQuery object then just clone it and set the values obtained from your ajax request. — Fabrício Matté, Apr 11 '13 at 07:51
Can you be more precise? I have tried to put my for loop in a div with class itemContainer. Still the innerHTML is a problem — Zain Khan, Apr 11 '13 at 08:20
Can you give us the exact HTML generated code (not just the main divs) so as we can have more clues to search the problem source — Robin Leboeuf, Apr 11 '13 at 08:28
The problem source is innerHTML, I have simplified much of the query. — Zain Khan, Apr 11 '13 at 08:54

score 0 · Answer 1 · answered Apr 11 '13 at 13:12

I solved this by adding a div outside my django template for loop

<div class="itemContainer">
        #previous HTML code
</div>

Now in the ajax success function I wrote

for(var i = 0; i < response.length; i++){
    var divs = $('.itemContainer')[0].innerHTML;
    $('.itemContainer')[0].innerHTML = divs.concat('//structure to concatenate');
}

I am not happy with the methodolody but still works for me. Any better answers/fixes will be appreciated.

Andrew Senner · Answer 2 · 2013-04-11T14:30:13.010

You're inserting the ajax response "into" the last div.. That's why your structure is hosed. Since you're using jQuery, take advantage of the ".insertAfter" method. For example:

var div = jQuery('<div/>', {
    html: '<innerhtmlhere>'
});
div.insertAfter($('.item').last());

Give that a shot and let me know your results.

or for an even quicker implementation: (if your response text is clean)

$("<responsetexthere>").insertAfter($('.item').last());

Docs: http://api.jquery.com/jQuery/#jQuery2

HTML structure disturbed after ajax response

2 Answers2