Bootstrap Modal remota con datetimepicker.. aiuto..

**DWolf** · 05-05-2015, 23:01

Salve a tutti...
Chiedo urgentemente aiuto a voi esperti..

Come da titolo sto cercando di aprire una modale con all'interno il contenuto di una pagina nella quale vi è un datapicker...
Nell'esempio ho solo una modale.. ma la pagina originale ha svariati bottoni con altrettante svariate modali... e tutte funzionano.

index.php

codice:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css">
</head>
<body>


<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#addUniModal" data-palconid="blabla">Aggiungi Unità</button>


<div class="modal fade" id="addUniModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap-datetimepicker.js"></script>


<script>


  $("#addUniModal").on("show.bs.modal", function (event) {
	var button = $(event.relatedTarget);
	var palconid = button.data('palconid');
	$(".modal-content").load("form/formUni.php?palconid="+palconid);
  })


</script>


</body>
</html>

formUni.php

codice:

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Modal Remota</title> 
    
</head>
<body>






        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">blablablablabla</h4>
        </div>			<!-- /modal-header -->
         <div class="modal-body">
      
            <form class="form-horizontal" method="post" action="add/addUni.php?<?php echo "palconid=".$_GET["palconid"];?>">
            <fieldset>
            
            <!-- Form Name -->
            <legend>Form Name</legend>
            
            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="uni_ind">Data Inserimento</label>
      
            <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
            </div>
         
            </div>
            
      
          </fieldset>
          </form>
      </div>			
<!-- /modal-body -->
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
        <button type="button" class="btn btn-primary">Salva</button>
    </div>			
 <!-- /modal-footer -->
   
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript">
	$(function () {
		$('#datetimepicker1').datetimepicker();
	});
</script>


</body>
</html>

I valori vengono trasferiti con successo tramite GET alla modale.. l'unico problema è il datetimepicker che nonostante sia visibile non vuole saperne di aprire il calendario quando viene cliccato il form..

Mi affido a voi.. sono due giorni che provo soluzioni di vario tipo..

**DWolf** · 06-05-2015, 17:22

Piccolo up...

**cavicchiandrea** · 06-05-2015, 21:10

forza il richiamo .datetimepicker() alla apertura della modale, prova anche a mettere il link alla pagina demo online

**DWolf** · 06-05-2015, 22:16

Grazie della risposta...
Nel creare una pagina demo per farti capire meglio la situazione.. mi sono accorto che stranamente nella demo funziona:
http://www.dthink.it/demo/

Quindi dopo una serie di tentativi.. cercando di cancellare vari script e non risolvendo nulla.. ho provato a cambiare la sistemazione delle modali...
Ebbene.. a quanto pare, se utilizzo questa sequenza:

codice HTML:

<div class="modal fade" id="addUniModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">    </div>  </div></div>


<div class="modal fade" id="addCondModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">    </div>  </div></div>


<div class="modal fade" id="cancCondModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">    </div>  </div></div>
<div class="modal fade" id="addPalModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">    </div>  </div></div><div class="modal fade" id="cancPalModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">    </div>  </div></div>

dove il DIV con id addUniModal (il div contenente il datetimepicker) viene messo primo ...
Se invece questo viene messo per ultimo il datetimepicker non funziona, come in questo esempio:
http://www.dthink.it/demo2/

Avete qualche idea sul perchè si comporta in questo modo?

Discussione: Bootstrap Modal remota con datetimepicker.. aiuto..

Strumenti discussione

Ricerca discussione

Visualizza

Bootstrap Modal remota con datetimepicker.. aiuto..

Permessi di invio