Open modal dynamic button loaded via ajax

Question

Open modal dynamic button loaded via ajax

Navigation

#1 by (1 votes)
#2 by (0 votes)

5

I'm having trouble opening a modal via a dynamically loaded button via ajax.

The following jquery code below opens the modal normally, assuming the button to be clicked was not loaded dynamically.

$('#idDivModal5').on('click', '.btn-cancelar-contrato', function(){   

// codigo aqui 

});

Once I generated the buttons via ajax, sending them to my result div, the buttons no longer worked.

HTML code:

<div id=resultado></div>

Include the div result in jquery, as shown below, but did not work:

$('#resultado#idDivModal5').on('click', '.btn-cancelar-contrato', function()    
{   

// codigo aqui 

});

The following is the code below:

 $('[data-load-remote]').on('click',function(e) {
   e.preventDefault();
   var $this = $(this);
   var remote = $this.data('load-remote');
   if(remote) {
    $($this.data('remote-target')).load(remote);
    }
 });

Ajax request:

$.ajax({
              type  : "POST",
              url   : "envia-buscar-contrato",
              data  : {var_radio:var_radio,var_valor:var_valor},
              datatype : 'html',
              success: function(data) {         

                    $("#form-buscar :input").prop("disabled", false);           
                    $('.bloquear2').hide();                     
                    $('#resultado').show(); 
                    $("#resultado").slideDown();
                    $("#resultado").html(data);
              }
            });          

 });

Modal skeleton idDivModal5:

<div id="idDivModal5" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
        </div>
    </div>
</div>

Button returned via ajax:

<div id="resultado">
<a class="botao-form" href='#idDivModal5' role='button' 
data-toggle='modal'                                                               
data-load-remote='cancelar-contrato/<?php echo $codigo_contrato;?>'
 data-remote-target='#idDivModal5 .modal-content' 
aria-hidden='true'>Cancelar contrato</a>
</div>

Remembering that when the above button is not loaded via ajax, it usually opens the modal idDivmodal5. From the moment I return the button via ajax, it does not open. Where am I going wrong?

ajax

asked by anonymous 10.10.2016 / 17:30

2 answers

Best DB structure with large number of data and filterable columns Heroku deploy with bower-rails

score 1 · Answer 1

As @Gabriel Rodrigues mentioned, your button is not in the DOM

An alternative is:

$(document).on('click', 'classDoBotão', function(){
    // codigo aqui
});

Explaining simply, jquery will now search all the buttons on the page with the class or id you pass within the second parameter, and perform its function

score 0 · Answer 2

Your problem is that the button was not loaded in the gift at the time you were creating the selector, so it still does not exist, to work around this problem you can use the bootstrap documentation.

In Modal you can use the show.bs.modal event that is when modal elements have already been loaded.

An example of this would be:

$('#idDivModal5').on('show.bs.modal', function () {
  $(".btn-cancelar-contrato").on('click',function(){
       // Modal disponivel e com click funcionando.
   });
})

Give a load event callback that will work as well.