Pass values to the Bootstrap modal

Question

Dear colleagues.

I am wanting to pass the values coming from mysql database to bootstrap modal and after some searches,I found the code below:

<a href='#myModal'  data-id-pergunta='<?php echo $jm->IdCodFotos; ?>' type="button" class="btn btn-success"  data-toggle="modal" title="Alterar sua foto">Alterar</a>

Javascript:

$('#myModal').on('show.bs.modal', function(e) {
    var idPergunta = $(e.relatedTarget).data('id-pergunta');
    $(e.currentTarget).find('input[name="perguntaId"]').val(idPergunta);
});

Modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel">Alterar Foto</h4>
                                        </div>
                                        <div class="modal-body">
                                            <input type="text" id="perguntaId" name="perguntaId" class="form-control" value="">
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>

But unfortunately it’s not working!

Answer 1

Good morning.

I did it this way: At the click on the change image I give a Submit on the same page and check if in the load the element "Alteraimagem" is not empty.

Then I give a show in the modal. Look at something I did... it loads the video in the modal as you click on the video.

<form action="" method="post" role="form" name="cardiologiatipo01">
<input type="hidden" name="id" value="<?php echo $id; ?>"/>
<input type="hidden" type="text" name="txt_LogNome" value="<?php echo $logcrm.' - '.$logcpf; ?>" >
<input type="hidden" type="text" name="txt_LogVideo" id="txt_LogVideo" value="fellipeteste" >
<input type="hidden" type="text" name="txt_LogData" value="<?php echo date("d-m-Y"); ?>" >
<input type="submit" name="cardiologiatipo01" value="Assistir" class="btn btn-primary btn-xs pull-right">
</form>


<?php if ($postback && isset($_POST['txt_LogVideo'])) {
?>
<div class="videoview modal fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">&nbsp;</h4>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="500" height="300" src="//www.youtube.com/embed/<?php echo $_POST['txt_LogVideo'] ?>?amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
<?php } ?>