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:
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?
$(".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>');
"afiliados_banners_service_get.php?produtos_id=" + JSON.stringify(dataform)
na consola? e o campodata:
diz a documentação que pode ser Type: PlainObject or String or Array, testa passar um objeto... algo comodata: {id: dataform},