1

Olá, tenho uma página "estática" (entre aspas pq ela é dinamicamente gerada pelo PHP, mas vamos dizer estática aos olhos do JavaScript) e estou tentando criá-la dinamicamente, pois ela se tornará um widget para outros sites.

Primeiramente faço um append em uma div estática com todo o conteúdo que sempre vai ser o mesmo, após isso faço uma requisição ajax para pegarr as informações vindas do banco de dados e dou um append em uma div que foi gerada dinamicamente antes. O problema é que ela não funciona da mesma forma que deveria funcionar se estivesse estática. Todo o HTML que eu utilizo é o mesmo da página estática. Tanto que ao pegar o código fonte do DOM, os dois são exatamente iguais.

Já comentei todo o código que roda depois disso em ambos os casos, deixando apenas o HTML gerado e o CSS funcionando, mas mesmo assim parte do conteúdo do ajax não é mostrado. Em nenhum momento eu uso IDs, apenas classes.

Segue exemplos:
JavaScript:

$(document).ready(function() 
  {
    var num_prod = 1;
    for (var i = 0; i < num_prod; i++)
    {
      $("#banner_"+(i+1)).append('<div class="div_triangle"><span class="span_price preco"><ul class="preco_ul"></ul></span><div class="div_scroll"><ul class="div_scroll_ul"></ul></div>');
    };
    var dataform = <? echo json_encode($id_produtos)?>;
    $.ajax({
      type: "POST",
      url: "afiliados_banners_service_get.php?produtos_id="+JSON.stringify(dataform),
      data: dataform,
      dataType: "json",
      error: function(data)
      {
        alert("Erro");
      },
      success: function(data)
      {
        var produtos = new Array;
        for (var i = 0; i < data.length; i++)
        {
          produtos[i] = new Array;
          $.each(data[i], function(key, value)
          {
            produtos[i][key] = value;
          });
        };
        for (var i = 0; i < data.length; i++)
        {
          //esse append abaixo não aparece na tela, mas é gerado no DOM
          $(".preco_ul").append('<li class="preco_li"><span class="span_de">De: R$'+produtos[i]['preco']+'<br></span><span class="span_por">Por: R$'+produtos[i]['preco_para']+'</span></li>');
          //Nesse append o visual não fica igual na página estática.
          $(".div_scroll_ul").append('<li class="div_scroll_li"><img class="img_prod div_scroll_img" src="produtos/'+produtos[i]['img1']+'_2.jpg"></li>');
        };
      }
    });
  });

CSS:

@font-face {
        font-family: 'roboto_slabregular';
        src: url('fonts/roboto/RobotoSlab-Regular-webfont.eot');
        src: url('fonts/roboto/RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
                 url('fonts/roboto/RobotoSlab-Regular-webfont.woff') format('woff'),
                 url('fonts/roboto/RobotoSlab-Regular-webfont.ttf') format('truetype'),
                 url('fonts/roboto/RobotoSlab-Regular-webfont.svg#roboto_slabregular') format('svg');
        font-weight: normal;
        font-style: normal;
}
body,html{ margin:0}

#banner_1 {width:120px;height:400px; background:#FFFFFF; cursor:pointer; position:absolute}


.div_scroll { width:160px; height:160px; margin:20px 0 0 20px; padding:0; overflow:hidden}
.div_scroll_ul { display:inline-block;list-style:none; margin:0; padding:0; width:1850px;}
.div_scroll_li { display:inline-block;list-style:none; margin-right:20px}
.div_scroll_img{ height:160px;}
.preco_ul { display:inline-block;list-style:none; margin:0; padding:0; width:1450;}
.preco_li { display:inline-block;list-style:none; margin-right: 20px}


.img_logo{ position:absolute; margin:2px; z-index:101}
.p_phrase{ position:absolute; z-index:101;font-family: 'Droid Sans', verdana, sans-serif; font-size:16px; font-weight:700; color:#209b7a; margin-left:10px; display:none}
.phrase_impact{ color:#0b614a}
.div_triangle{ position:absolute; width:65px; height:42px; background:#ff6600; z-index:102; right:3px;}
.div_triangle_bottom{ margin-top:42px; width: 0;height: 0;border-style: solid;border-width: 15px 32.5px 0 32.5px;border-color: #ff6600 transparent transparent transparent;}
.span_price{ position:absolute; margin-top:2px; width:100%; font-family:roboto_slabregular; font-size:12px; text-align:center; color:#fff}
.span_de{ color:rgba(255,255,255,.8);text-decoration:line-through; font-size:11px}
.div_slogan{ position:absolute; width:100%; padding:6px 0 6px 0; background:rgba(255,255,255,.7); margin-top:105px; font-family: 'Droid Sans', verdana, sans-serif; font-size:16px; font-weight:700; color:#0b614a; text-align:center; z-index:103}
.div_slogan span{font-size:12px; color:#209b7a}
.div_bottom{ position:absolute; bottom:5px; width:100%; text-align:center; font-family: 'Droid Sans', verdana, sans-serif; font-size:12px; color:#bb1e39; z-index:104}
.div_bottom:hover{ color:#840002; text-decoration:underline}
.div_bottom span{ color:#911228}
.div_bottom span:hover{ color:#840002}

Só tirei algumas partes do primeiro append, que era um pouco grande, mas resolvi deixar todo o CSS para se o problema estiver nele.

Seguem imagens da renderização:

Estático:
Imagem do widget Estático

Dinâmico:
Imagem do widget Dinâmico

Óbvio que apaguei o logo da empresa e o site. Está desse jeito pois comentei todo o JavaScript que vem depois do Ajax que termina de ajeitar o conteúdo, assim não tendo como ver o problema do segundo append do Ajax, mas o JavaSscript que vem após vai sair do escopo da pergunta.
Notem que no estático os preços (primeiro append do Ajax) aparecem, porém no dinâmico não.

O único jeito de deixá-los exatamente iguais é comentando todo o css. Aí consigo ver o primeiro append do Ajax.

Isso me leva a crer que o problema está de alguma forma relacionado ao CSS, pois o DOM dos 2 é idêntico.

E antes que venham me falar para adicionar o css após a criação dos elementos, eu já tentei isso.

Alguém saberia me dizer se adicionar novo conteúdo pelo ajax à conteúdo também criado dinamicamente traz algum problema?

Edit:

Encontrei o problema. Notem que a classe preco_ul tem um item (width:1450px) ao final dela. Por algum motivo na versão dinâmica o tamanho do container com essa classe não obedecia o tamanho do container pai/mãe. Então refaço minha pergunta:

Alguém sabe o motivo de na versão estática o container com tamanho maior ao do pai, obedece o tamanho deste, porém quando adicionado dinamicamente um container com tamanho maior ao do pai ele não obedece o tamanho deste?

9
  • Troca as duas últimas linhas do append por essas e diga o que acontece: $(".preco_ul").append('<li class="preco_li"><span class="span_de">De: R$' + produtos[i]["preco"] + '<br></span><span class="span_por">Por: R$' + produtos[i]["preco_para"] + '</span></li>'); //Nesse append o visual não fica igual na página estática. $(".div_scroll_ul").append('<li class="div_scroll_li"><img class="img_prod div_scroll_img" src="produtos/' + produtos[i]["img1"] + '_2.jpg"></li>'); Commented 25/03/2015 às 17:40
  • O problema não está na sintaxe, os elementos são criados no DOM, mas o primeiro append do ajax não aparece na tela e o segundo não se comporta como deveria, fica maior do que deveria. Mas só para garantir eu adicionei os espaços na concatenação que você sugeriu, porém continua a mesma coisa.
    – Rafael
    Commented 25/03/2015 às 17:48
  • Acredito que tenha algo a ver com o CSS, mas também já tentei de tudo e nada funciona =/
    – Rafael
    Commented 25/03/2015 às 17:49
  • Não, já tentei de tudo, modifiquei css, tentei adicionar o css após a criação dos elementos com .css entre várias outra coisas, mas nada resolve =/
    – Rafael
    Commented 25/03/2015 às 19:04
  • O que dá "afiliados_banners_service_get.php?produtos_id=" + JSON.stringify(dataform) na consola? e o campo data: diz a documentação que pode ser Type: PlainObject or String or Array, testa passar um objeto... algo como data: {id: dataform},
    – Sergio
    Commented 25/03/2015 às 19:31

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .