Javascript e modal bootstrap

[manitta]

Ho creato un bottone per la creazione di un box modale tramite bootstrap che passa variabili di un prodotto tramite il data-*

<button id="bottonI" type="button" class="btn btn-success" data-toggle="modal" 
data-target="#exampleModal" 
data-nome="'.$riga[1].'" 
data-categoria="'.$riga[2].'" 
data-condizione="'.$riga[3].'" 
data-immagine="'.$riga[4].'" 
data-informazioni="'.$riga[5].'"
>Info</button>

Il bottone si collega ad uno script javascript:

$('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var nome = button.data('nome');
        var modal = $(this);
    
    var button = $(event.relatedTarget);
        var categoria= button.data('categoria');
        var modal = $(this);
    
    var button = $(event.relatedTarget);
        var condizione= button.data('condizione');
        var modal = $(this);
    
    var button = $(event.relatedTarget);
        var immagine= button.data('immagine');
        var modal = $(this);
    
    var button = $(event.relatedTarget);
        var informazioni= button.data('categoria');
        var modal = $(this);
    
        modal.find('.modal-title').text(nome);
        
    });

all'interno della variabile "immagine" c'è il percorso dell'immagine che andrà poi posizionata all'interno del modal, però non ho la minima idea di come si possa mettere un'immagine tramite il javascript...
Questo è invece il modal di riferimento:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel"></h4>
            </div>
            <div class="modal-body">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">immagine:</label>
                        <img src="QUA CI ANDREBBE IL LINK ALL IMMAGINE" height="10%" width="40%">
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
    </div>

[ciro78]

se in

data-immagine

hai l'uri dell'immagine non serve altro che una cosa del tipo

$("#idImmagine").attr("src",uri);

questo in genere. non mi sono messo ad analizzare il tuo codice...

[manitta]

Quello che viene inviato da data-immagine è l'URL
Esempio, data-immagine="./esempio.jpg"
Dovrei farla così?
$("immagine").attr("src",url);
E per farla mettere sul modal?

[ciro78]

Ciao,
per il codice usa il tag code. Sei nuovo quindi passi.

tu ricavi l'uri in questo modo

var immagine= button.data('immagine');

la modal deve essere

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel"></h4>
            </div>
            <div class="modal-body">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">immagine:</label>
                        <img src="QUA CI ANDREBBE IL LINK ALL IMMAGINE" id="mioId"  height="10%" width="40%">
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
    </div>

quindi

$("#mioId").attr("src",immagine);

occhio al grassetto

[manitta]

Ho modificato lo script javascript come hai detto tu
<code>
var button = $(event.relatedTarget);
var immagine= button.data('immagine');
var modal = $(this);
var immagine= button.data('immagine');
$("#mioId").attr("src",immagine);

modal.find('.modal-title').text(nome);
</code>

e il modal inserendo la parte del imm code da te scritta
<code>
<div class="form-group">
<label for="recipient-name" class="control-label">immagine:</label>
<img src="" id="mioId" height="10%" width="40%">
</div>
</code>
e messo un immagine in ogni percorso possibile per essere sicuro ma l'unica cosa che visualizzo alla pressione del bottone e alla visualizzazione del modal è la finestrella predefinita delle img

Cattura.PNG

[manitta]

Ho risolto cosi
Modal:

<div class="modal-body">
                <img src="" alt="" id="img">
 </div>

Javascript:

var button = $(event.relatedTarget);
        var immagine= button.data('immagine');
        var modal = $(this);
	
	$(".modal-body #img").attr("src", 'prodotti/' + immagine);

[ciro78]

Ho risolto cosi
Modal:

<div class="modal-body">
                <img src="" alt="" id="img">
 </div>

Javascript:

var button = $(event.relatedTarget);
        var immagine= button.data('immagine');
        var modal = $(this);
    
    $(".modal-body #img").attr("src", 'prodotti/' + immagine);

puoi modificare in questo modo

$("#img").attr("src",'prodotti/'+ immagine);

basta che id="img" sia univoco