-1
I have a page that contains mosaic of images with a button and when I click I open a Popover. Until then ok, because this mosaic is generated by Blade.php, of Laravel 5. But I change the mosaic from filters on the page itself and the Popover stops working, which is generated from the same html "code".
Code of Blade.php (HTML), that is to say, static:
<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>
Follow image of the mosaic with Popover by the Laravel street:
Here follows the ajax, only part of the function javascript which is executed by changing the value in the combobox,:
$.ajax({
type: 'get',
url : 'populaMosaico',
data: {'eixo': eixo, 'uf': local,'lat':lat,'lng':lng},
dataType:'json',
success: function(data){
try{
var i = 0;
mosaico += '<div class="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 is like this:
The generated mosaic looks aesthetically the same, but the Popover does not work by clicking one of the two buttons next to the location. Someone could help me?