I have a page that contains mosaic of images with a button and when I click I open a popover. Until then okay, because this mosaic is generated by blade.php , of laravel 5. But I change the mosaic from the filters on the page itself and the popover stops working, being generated from the same "html code".
HTML HTML code, Stat
<div class="avancar-mosaico" >
<div id="wrapper">
<div class="row" style="margin: 0px;">
<div id="outer">
@foreach($Emp as $emp)
<div class="itemwrapper col-md-3 col-sm-3 col-xs-12" style="padding: 0px;">
<img src="{{asset('/images/mosaico')}}/{{$emp->numF1}}-{{$emp->eixo}}-0{{$emp->numP1}}.png" alt="Imagem do empreendimento" />
<figcaption>
<a href="{{route('empreendimentos.view', ['id' => $emp->idn_empreendimento])}}">{{$emp->obra}}</a>
@if($emp->distancia == null)
<span class="info-municipio">{{$emp->cidade}}, {{$emp->estado}}</span>
@else
<span class="info-municipio">{{$emp->distancia}}</span>
@endif
</figcaption>
<!--{{$barra = ($emp->execucao_fisica != 100) ? 'progress-bar-warning progress-extra': 'progress-bar-complete progress-extra'}}
{{$caminho = route('empreendimentos.view', ['id' => $emp->idn_empreendimento])."?ref=busca"}}-->
<div class="mosaico-botoes">
<a
data-template='
<div class="popover" role="tooltip">
<span class="glyphicon glyphicon-triangle-top seta-pop seta-pop-emp" aria-hidden="true"></span>
<div class="dbw-map-location-container" style="color:gray">
<div class="dbw-map-location-info">
<div class="dbw-map-location-info-details">
<div class="empreendimento_estagio_titulo">ESTÁGIO DA OBRA</div>
<center>
<div class="progress progress-extra-2" sytle ="width: 90px;">
<div class="progress-bar {{$barra}}" role="progressbar" aria-valuenow="{{round($emp->execucao_fisica)}}" aria-valuemin="0" aria-valuemax="100" style="width:{{$emp->execucao_fisica}}%">
</div>
</div>
<div class="row" style="text-align: left;margin-bottom: 20px;">
<div class="col-md-6" style="border: 0;">
<STRONG style="font-size: 24px" class = "empreendimento_perc_exec">{{round($emp->execucao_fisica)}}% • </STRONG>
</div>
<div style="font-size:14px;border: 0;padding-top: 14px;" class ="empreendimento_perc_status col-md-6">
{{$emp->estagio}}
</div>
</div>
<div class="row" style="text-align: left;margin-bottom: 20px;">
<div style="border: 0;" class="empreendimento_inicio_title col-md-6 col-sm-6 col-xs-6">
INICIO<br>
<u class="empreendimento_dates" style="font-size: 20.5px;">
{{format_date($emp->data_selecao)}}</u>
</div>
<div style="border: 0;" class="empreendimento_inicio_title col-md-6 col-sm-6 col-xs-6">
CONCLUSÃO<br>
<u class="empreendimento_dates" style="font-size: 20.5px;">
{{format_date($emp->data_conclusao)}}</u>
</div>
</div>
<center>
<a href={{$caminho}} class="btn btn-primary btn-xs btn-avancar">Saiba mais</a>
</center>
</center>
</div>
</div>
</div>
</div>'
data-content=' ' id="a3" style="cursor: pointer;width: 150px;" data-toggle="popover" data-placement="bottom">
<img src={{asset('images/icone-grafico.svg')}}>
</a>
<a
data-template='
<div class="popover popover-share" role="tooltip">
<span class="glyphicon glyphicon-triangle-top seta-pop seta-pop-share" aria-hidden="true"></span>
<div class="popover-arrow"></div>
<h3 class="popover-title"></h3>
<a class="avancar-sobre-compartihar" href="" target="_blank">
<img class="mosaico-share-icon" src={{asset("images/facebook.svg")}} ></img>
<u class="mosaico-share"> Facebook</u>
</a>
<a class="avancar-sobre-compartihar" href={{$caminho}} target="_blank">
<img class="mosaico-share-icon" src={{asset("images/permalink.svg")}} ></img>
<u class="mosaico-share"> Permalink</u>
</a>
</div>'
data-content=' ' class="icone-compartilhar" id="a3" style="cursor: pointer;" data-toggle="popover" data-placement="bottom">
<img src={{asset('images/icone-compartilhar.svg')}}>
</a>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
Next image of mosaic with popover by laravel blade:
Hereisajax,onlypartofthejavascriptfunctionthatisexecutedbychangingthevalueinthecombobox,iedynamic
$.ajax({type:'get',url:'populaMosaico',data:{'eixo':eixo,'uf':local,'lat':lat,'lng':lng},dataType:'json',success:function(data){try{vari=0;mosaico+='<divclass="row" style="margin: 0px;">'+
'<div id="outer">'; */
for(i in data){
if(data[i].execucao_fisica != 100){
var choice = 'progress-bar-warning progress-extra';
}else{
var choice = 'progress-bar-complete progress-extra';
}
if(data[i].obra.length > 50){
if(data[i].obra[50] == ' '){
obra = data[i].obra.slice(0, 50) + ' ...';
}else{
var resto = data[i].obra.slice(50, data[i].obra.length);
if(resto.substring(0, resto.indexOf(' ')) != '')
resto = resto.substring(0, resto.indexOf(' '));
obra = data[i].obra.slice(0, 50) + resto + ' ...';
}
}else{
obra = data[i].obra;
}
mosaico += '<div class="itemwrapper col-md-3 col-sm-3 col-xs-12" style="padding: 0px;">\n'+
'<img src="../images/mosaico/'+data[i].numF1+'-'+data[i].eixo+'-0'+data[i].numP1+'.png" alt="Imagem do empreendimento"/>\n'+
'<figcaption><a href="empreendimentos/'+data[i].idn_empreendimento+'/visualizar">'+obra+'</a>';
if(data[i].distancia == null){
var opt = data[i].cidade+','+data[i].estado;
mosaico += '<span class="info-municipio">'+opt+'</span></figcaption>\n';
}else{
var opt = data[i].distancia;
mosaico += '<span class="info-municipio"><span class="glyphicon glyphicon-screnshot"></span>'+opt+' KM</span></figcaption>\n';
}
mosaico += '<div class="mosaico-botoes">'+
'<a\n'+
'data-template=\'\n'+
'<div class="popover" role="tooltip">\n'+
'<span class="glyphicon glyphicon-triangle-top seta-pop seta-pop-emp" aria-hidden="true"></span>\n'+
'<div class="dbw-map-location-container" style="color:gray">\n'+
'<div class="dbw-map-location-info">\n'+
'<div class="dbw-map-location-info-details">\n'+
'<div class="empreendimento_estagio_titulo">ESTÁGIO DA OBRA</div>\n'+
'<center>\n'+
'<div class="progress progress-extra-2" sytle ="width: 90px;">\n'+
'<div class="progress-bar '+choice+'" role="progressbar" aria-valuenow="'+data[i].execucao_fisica+'" aria-valuemin="0" aria-valuemax="100" style="width:'+data[i].execucao_fisica+'%">\n'+
'</div>\n'+
'</div>\n'+
'<div class="row" style="text-align: left;margin-bottom: 20px;">\n'+
'<div class="col-md-6" style="border: 0;">\n'+
'<STRONG style="font-size: 24px" class = "empreendimento_perc_exec">'+data[i].execucao_fisica+'% • </STRONG>\n'+
'</div>\n'+
'<div style="font-size:14px;border: 0;padding-top: 14px;" class ="empreendimento_perc_status col-md-6">\n'+
data[i].estagio+
'</div>\n'+
'</div>\n'+
'<div class="row" style="text-align: left;margin-bottom: 20px;">\n'+
'<div style="border: 0;" class="empreendimento_inicio_title col-md-6 col-sm-6 col-xs-6">\n'+
'INICIO<br>\n'+
'<u class="empreendimento_dates" style="font-size: 20.5px;">'+data[i].data_selecao+'</u>\n'+
'</div>\n'+
'<div style="border: 0;" class="empreendimento_inicio_title col-md-6 col-sm-6 col-xs-6">\n'+
'CONCLUSÃO<br>\n'+
'<u class="empreendimento_dates" style="font-size: 20.5px;">\n'+
''+data[i].data_conclusao+'</u>\n'+
'</div>\n'+
'</div>\n'+
'<center>\n'+
'<a href="empreendimentos/'+data[i].idn_empreendimento+'/visualizar?ref=busca" class="btn btn-primary btn-xs btn-avancar">Saiba mais</a>\n'+
'</center>\n'+
'</center>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'</div>\'\n'+
'data-content=\' \' id="a3" style="cursor: pointer;width: 150px;" data-toggle="popover" data-placement="bottom" data-original-title data-title>'+
'<img src="../images/icone-grafico.svg">\n'+
'</a>\n'+
'<a \ndata-template=\'\n'+
'<div class="popover popover-share" role="tooltip">\n'+
'<span class="glyphicon glyphicon-triangle-top seta-pop seta-pop-share" aria-hidden="true"></span>\n'+
'<div class="popover-arrow"></div>\n'+
'<h3 class="popover-title"></h3>\n'+
'<a class="avancar-sobre-compartihar" href="" target="_blank">\n'+
'<img class="mosaico-share-icon" src="../images/facebook.svg"></img>\n'+
'<u class="mosaico-share"> Facebook</u>\n'+
'</a>\n'+
'<a class="avancar-sobre-compartihar" href="#" target="_blank">\n'+
'<img class="mosaico-share-icon" src="../images/permalink.svg"></img>\n'+
'<u class="mosaico-share"> Permalink</u>\n'+
'</a>\n'+
'</div>\n'+
'data-content=\' \' class="icone-compartilhar" id="a3" style="cursor: pointer;" data-toggle="popover" data-placement="bottom">\n'+
'<img src="../images/icone-compartilhar.svg">\n'+
'</a>\n'+
'</div>\n'+
'</div>\n';
}
/*mosaico += '</div>\n'+
'</div>\n';*/
$(document).find('#outer').html('');
$(document).find('#outer').append(mosaico);
}catch(err){
alert("Nenhuma obra encontrado para o filtro");
document.getElementsByClassName("avancar-header").style.display = 'none';
removido = true;
return;
}
},
error: function(){
}
});
The mosaic generated looks like this:
The mosaic generated is aesthetically the same, but the popover does not work when you click one of the two buttons next to the location. Could someone help me?