CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-modal
AndreaNobili
AndreaNobili

Reputation: 42957

Why I can't open a BootStrap modal performing also a jQuery callback function?

I am pretty new in JQuery and BootStrap and I have the following problem.

I have this BootStrap modal:

<div id="variazioneAnticipoModal" class="modal fade">
  <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>
        <h3 class="modal-title" style="color: #3b5a76;">Variazione Anticipo</h3>
      </div>
      <div id="modal-body" class="modal-body">       
        <div id="inserimentoVariazioneAnticipo">
          <div class="row">
            <div class="col-md-5">
              <p style="line-height: 200%;">Inserire la variazione dell'anticipo: </p>
            </div>
            <div class="col-md-7">
              <input id="variazioneAnticipo" class="rightAlligned form-control" style="width:50%" type="number" step="0.01" min="0" />
            </div>
          </div>
          <div id="variazioneAnticpoInvalida" class="alert alert-danger" role="alert" style="display: none; margin-top: 3%;">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only">Error:</span>
                            Il valore inserito non &egrave; valido
          </div>
        </div>

        <!-- Hidden by default: -->
        <div id="confermaVariazioneAnticipo" style="display: none;">
          <h3>Confermare variazione anticipo ?</h3>
        </div>          
      </div>

      <div class="modal-footer">
        <button id="chiudiVariaAnticipoButton" type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
        <button id="variaAnticipoButton" type="button" class="btn btn-primary">Varia anticipo</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Then I have this JQuery script that open the modal and that set a div that have to be shown and a div that have to be hidden when the modal is opened:

$('#variazioneAnticipoModal').modal('show'); 
$("#inserimentoVariazioneAnticipo").show();
$("#confermaVariazioneAnticipo").hide();

This works fine.

The problem is that I have tryied to restructure this simple JQuery code using the callback function concept.

So I have tried to do:

$('#variazioneAnticipoModal').on('show.bs.modal', function (e) {
  $("#inserimentoVariazioneAnticipo").show();
  $("#confermaVariazioneAnticipo").hide();  
});

but it can't work and the modal is not shown.

I also tryied to insert only an alert message in the callback function to debug purpose but still can't work. The alert popup is not shown and the modal is not opened.

Why? What am I missing? Is it better use the callback concept in this case or I can use the first working code? What is the difference from my first working example and the use of callback?

Upvotes: 0

Views: 1727

Answers (1)

Gen4ik
Gen4ik

Reputation: 380

I think you need to init the modal first.

Try to put: $('#variazioneAnticipoModal').modal(); before your code, like this:

 $('#variazioneAnticipoModal').modal();
 $('#variazioneAnticipoModal').on('show.bs.modal', function (e) {
        $("#inserimentoVariazioneAnticipo").show();
        $("#confermaVariazioneAnticipo").hide();

    });

show.bs.modal works while model dialog loading, shown.bs.modal worked to do any thing after loading. post rendering. But you need to init the modal first so that it will have those events.

Upvotes: 1

Related Questions