CODEWITHSUNDEEP
phpjqueryhtmlweb
gabrielbuzzi
gabrielbuzzi

Reputation: 353

jQuery .html() doesn't work in IE8

I have an AJAX response that returns information using $_GET and is then set as the HTML of a container. This works in Chrome, Safari, FireFox, Opera, but not IE8.

$(function() {
  $('#content .entry-content a.mais-menos').click(
    function(){
      $('#content .entry-content a.mais-menos').css('background-position','bottom left');
      if($(this).siblings('.descricao-campanha').css('display')=='block'){
        $(this).css('background-position','bottom left');
        $(this).siblings('.descricao-campanha').slideUp(1000);

      }else{
        $('#content .entry-content .descricao-campanha').slideUp(1000);
        $(this).css('background-position','top left');
        $(this).siblings('.descricao-campanha').slideDown(1000);

        var mae = $(this).siblings('.descricao-campanha');
        var codigo = $(this).siblings('.cdPost').attr('value');

        if (mae.children('.carregando').is(":visible")){
          $.get('<?= get_bloginfo("url") ?>/get_associado.php', {cd:codigo}, function(retorno) {
            // mae.children('.carregando').hide();
            mae.html(retorno);
            // alert(retorno);
          });
        }
      }
      return false;
    }
  );
});

If I alert retorno I can see that the data has been returned, but when I append it to the div, it fails in IE8.

Can someone please help me understand why this fails and how to resolve it?

Check the error in this page http://www.superredems.com.br/associados/

This is what Retorno return, in case of no image.

<div class="clear"></div>
  <div class="descricao-mercado">
    Fone: 67 3245 3330<br />
    Praça Das Nações, 330
    Bairro Centro
    <a target='_blank' href='http://pt.wikipedia.org/wiki/Anast%C3%A1cio_%28Mato_Grosso_do_Sul%29' title='ANASTACIO - MS'>ANASTACIO - MS</a>
  </div>
  <div class="clear"></div>
  <p></p>
  <div class="clear"></div>
  <div class="imagens-destaque-associado">
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
</div>

Upvotes: 3

Views: 1264

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388326

There is an extra div closing tag in the response. Remove it, it will work fine

<div class="clear"></div>
<div class="descricao-mercado">
    Fone: 67 3239 1810<br />
    Av João Garcia De Souza, 46
    Bairro Jardim Nova Água Clara
    <a target='_blank' href='http://pt.wikipedia.org/wiki/%C3%81gua_Clara' title='ÁGUA CLARA - MS'>ÁGUA CLARA - MS</a>
</div>

<div class="clear"></div>
<p></p>
<div class="clear"></div>
<div class="imagens-destaque-associado">

<div class="clear"></div>
</div>

<div class="clear"></div>
</div> **<-- this is extra**

<script>
    $('img').parent('a').colorbox();
</script>

Upvotes: 2

Matt Cain
Matt Cain

Reputation: 5768

@PeteUh is exactly right. Here is the html you were trying to set when I gave it a try:

<div class="clear"></div>
<div class="descricao-mercado">
    Fone: 67 3239 1810<br />
    Av João Garcia De Souza, 46
    Bairro Jardim Nova Água Clara
    <a target='_blank' href='http://pt.wikipedia.org/wiki/%C3%81gua_Clara' title='ÁGUA CLARA - MS'>ÁGUA CLARA - MS</a>
</div>

<div class="clear"></div>
<p></p>
<div class="clear"></div>
<div class="imagens-destaque-associado">
    <div class="clear"></div>
</div>
<div class="clear"></div>
</div>

<script>
     $('img').parent('a').colorbox();
</script>

As you can see you have 1 too many closing div tags.

Upvotes: 2

Pete Uh
Pete Uh

Reputation: 630

When appending markup in IE8 you need to ensure that it is valid, this bug has been documented here and is usually caused by a tag not being closed.

Upvotes: 2

Related Questions