popup lightbox dinamic with ajax
Hello , recently I was approached and jquery ajax .
I'm making a call to a query from ajax to php .
It works and gives me what I need.
I did that a select onchange write in html a listview with filtering and simultaneously, in another div where I post the code to open the popup image.
unfortunately it does not behave as in the demo: photo lightbox .
But if the div with the big picture I put it directly in the html code , it works .
Below I post the code :
-
<ul id="articoli" data-role="listview" data-inset="true" data-split-theme="a" data-split-icon="gear" data-filter-placeholder="cerca" data-filter="true" style="max-height:300px; overflow:auto;"></ul>
<div id="foto"></div>
<script>
$('#gruppo').change(function() {
var gruppo = $("#gruppo").val();
$.ajax({
type: "POST",
url: "funzioni.php",
data: "gruppo=" + gruppo + "&database=<?= $database ?>",
dataType: "json",
success: function(msg)
{
$("#articoli").html(msg[0]);
$("#foto").html(msg[1]);
},
error: function()
{
alert("Chiamata fallita, si prega di riprovare..."); //sempre meglio impostare una callback in caso di fallimento
}
});
</script>
and function php:
-
function seleziona_articoli($id,$database,$connessione){
mysql_select_db($database,$connessione);
$elenco_articoli = '';
$gruppo_foto = '';
$query = "SELECT * FROM articoli WHERE gruppo_merceologico = '$id' order by descrizione ";
$result = mysql_query($query, $connessione) or die (mysql_error());
while($articoli = mysql_fetch_array($result)) {
$elenco_articoli .= '<li class="ui-li-has-alt ui-li-has-thumb ui-first-child ui-last-child"><a class="ui-btn" href="#popup'.$articoli['codice'].'" data-transition="fade" data-rel="popup" data-position-to="window" >
<img class="popphoto" src="images/goto.jpg" height="160" width="160">
<h2>'.$articoli['descrizione'].'</h2>
<p>'.$articoli['descrizione'].'</p></a>
<a href="#purchase" data-transition="pop" data-position-to="window" data-rel="popup" class="ui-btn ui-btn-icon-notext ui-icon-plus ui-btn-a">Purchase album</a>
</li>';
$gruppo_foto .= '<div id="popup'.$articoli['codice'].'" data-role="popup" data-theme="b" data-corners="false" data-overlay-theme="b">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" href="#" data-rel="back">Close</a><img class="popphoto" style="max-height: 512px;" alt="Paris, France" src="images/foto.jpg">
</div>';
}
$immagini = array($elenco_articoli,$gruppo_foto);
echo json_encode($immagini);
}
thanks for help