Giovanni Palerma Giovanni Palerma -4 years ago 110
Ajax Question

Unexpected result appending HTML via ajax

I have to dynamically create a series of HTML blocks like this one:

<div class="col-md-4 gal-gd text-center wow fadeInUpBig animated animated" data-wow-delay="0.4s">
<a href="images/r2.jpg" class="b-link-stripe b-animate-go swipebox">
<div class="gallery-gal-effect slow-zoom horizontal">
<div class="img-box"><img src="images/r2.jpg" alt=" " /></div>
<div class="gallery-text-box">
<div class="gallery-gal-text">
<h4>Title</h4>
<span class="separator"></span>
<p>Description.</p>
<span class="separator"></span>
<p><a href="#">Cancella</a></p>
<span class="separator"></span>
</div>
</div>
</div>
</a>
</div>


This is how I'm trying to achieve it, inside an ajax request:

success: function (response, status) {
$.each(response, function (i, item) {
$('#output')
.append('<div class="col-md-4 gal-gd text-center wow fadeInDownBig animated animated" data-wow-delay="0.4s"><a href="' + item.path + '" class="b-link-stripe b-animate-go swipebox"><div class="gallery-gal-effect slow-zoom horizontal"><div class="img-box"><img src="' + item.path + '" alt=""></img></div><div class="gallery-text-box"><div class="gallery-gal-text"><h4>' + item.title + '</h4><span class="separator"></span><p>' + item.descrizione + '</p><span class="separator"></span><p><a href="#" onclick="cancella('+item.id+');">Elimina</a></p><span class="separator"></span></div></div></div></a></div>');


This is my HTML:

<div id="output">
<!-- ajax request -->
</div>


The problem is, I don't know the reason, the appended code looks like this:

<div class="col-md-4 gal-gd text-center wow fadeInDownBig animated animated" data-wow-delay="0.4s">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>
<div class="gallery-gal-effect slow-zoom horizontal">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg">
<div class="img-box">
<img src="images/r2.jpg" alt="">
</div>
</a>
<div class="gallery-text-box">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>
<div class="gallery-gal-text">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg">
<h4>Title</h4>
<span class="separator"></span>
<p>Description</p>
<span class="separator"></span>
</a>
<p>
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>
<a href="#" >Other things</a>
</p>
<span class="separator"></span>
</div>
</div>
</div>
</div>


As you can see

<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>


repeats 5 times instead of twice, which generates 5 times the same image in my gallery.

Why? What's wrong here?

Answer Source

You have an <a> element nested inside another <a> element. This is not allowed. I can't even guess what that's supposed to mean.

The HTML5 spec. says:

4.3.6.1 The a element

...

Content Model:
Transparent, but there must be no interactive content descendant.

where interactive content includes the a element.

I'm guessing that jQuery's (or the browser's) HTML parser will try to insert additional opening and closing tags in order to make sense of the HTML, and instead ends up with the bizarre result that you have shown.

There's also another error: The </img> tag is not allowed in HTML.

3.2.2.2 Void Elements

...

In HTML, [...] The end tag must be omitted because the element is automatically closed by the parser.


You need to find a way to rework your HTML into something that is structurally sound if you want predictable results.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download