Pass parameters to Modal in jQuery

Asked

Viewed 2,126 times

5

I have the following button:

echo '<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-cliente='.$r->idCliente.' data-datainicial='.$_GET['data_inicial'].' data-datafinal='.$_GET['data_final'].' data-target="#myModal">Boleto</button>';

I would like to recover data-cliente, data-datainicial, data-datafinal and places it within the modal div:

<div...>
        <div class="modal-footer">
          <a href="teste/cliente/datainicial/datafinal"><button type="button" class="btn btn-danger" data-dismiss="modal">Gerar PDF</button></a> <---- Aqui preciso recuperar estas 3 variaveis. 
          <a href="teste/cliente/datainicial/datafinal"><button type="button" class="btn btn-primary" data-dismiss="modal">Enviar E-Mail</button></a> <---- Aqui preciso recuperar estas 3 variaveis. 
        </div>
</div>

How can I recover this data?

2 answers

2


I couldn’t find a way to tell which button opened the dialog, but using a variable to pass this element is already possible. So test:

var handler;
$("#dialog").dialog({
    autoOpen: false
}).on("dialogopen", function (event, ui) {
    var $btn = $(handler);
    var id = $btn.data('cliente');
    var dataInicial = $btn.data('datainicial');
    var dataFinal = $btn.data('datafinal');
    var buttons = $(event.target).find('.btn').attr({
        'data-cliente': id,
        'data-datainicial': dataInicial,
        'data-datafinal': dataFinal
    });
});;


$('.btn').click(function () {
    handler = this;
    $('#dialog').dialog('open');
});

I’ll explain later the code, now I took longer than I expected and I was in a hurry to get out...

  • But then how I recover the variables inside the modal?

  • @Andrébaill depends a little on what you want to do. If you explain better how you need these data I can adapt. The answer as it stands is what’s in the fields data- to new fields data- in the HTML where you said you needed it.

1

I got the solution this way, in case someone needs it too:

<script>
    $(document).ready(function(){
        $(".boleto_campo").click(function(){ 
            $("#cliente").val($(this).data('cliente'));
            $("#datainicial").val($(this).data('datainicial'));
            $("#datafinal").val($(this).data('datafinal'));
            var cliente = $(this).data('cliente');
            var datainicial = $(this).data('datainicial');
            var datafinal = $(this).data('datafinal');
            $("#form_modal").modal('show');

            $(".gerar_pdf").click(function(){
                $('#myModal').modal('hide');
                window.location.href = "<? echo base_url('boleto/gerar/'); ?>/" + cliente + "/" + datainicial + "/" + datafinal;    
            });
        });
    });
</script>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.