Modal Ajax - body bianco

Bunz

Nuovo Utente
28 Giu 2016
10
1
3
43
Salve! ho un problema con il modal ajax, vi sposto un po di codice per intenderci meglio.
PHP:
//ciclo giorni del mese
for($i=1; $i<$numMonth+1; $i++){
                $giorno = $y.'-'.$m.'-'.$i;
                echo '<button type="button" data-toggle="modal" data-target="#view-calendar" data-id="'.$giorno.'" id="getCalendar">'.$giorno.'</button>';
            }

//ciclo utenti
while($ROWdb= $db->fetch($RISdb) ){
                echo '<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#view-modal" data-id="'.$ROWdb['idUser'].'" id="getUser" >'.$ROWdb['nome'].'</button
> ';
            }

questi due cicli aprono dei modal

HTML:
<!-- modal user-->        
<div id="view-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"><i class="glyphicon glyphicon-user"></i> Dettaglio Turno</h4>
            </div>

            <div class="modal-body">

                <div id="modal-loader" style="display: none; text-align: center;">
                       <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
                    <span class="sr-only">Loading...</span>
                </div>

                <!-- content will be load here -->                        
                <div id="dynamic-content"></div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>
<!-- /.modal td -->


<!-- modal calendar -->        
<div id="view-calendar" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"  >
    <div class="modal-dialog" style="width:98%">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"><i class="glyphicon glyphicon-calendar"></i> Dettaglio Turno Giornaliero</h4>
            </div>

            <div class="modal-body">

                <div id="modal-loader" style="display: none; text-align: center;">
                       <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
                    <span class="sr-only">Loading...</span>
                </div>

                <!-- content will be load here -->                        
                <div id="dynamic-content"></div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>
<!-- /.modal calendar -->

Codice:
<script>

$(document).ready(function(){
   
    //DETAILS CALENDAR TD
    $(document).on('click', '#getUser', function(e){
       
        e.preventDefault();
       
        var uid = $(this).data('id');   // it will get id of clicked row
       
        $('#dynamic-content').html(''); // leave it blank before ajax call
        $('#modal-loader').show();      // load ajax loader
       
        $.ajax({
            url: 'modal_ajax_turno_details.php',
            type: 'POST',
            data: 'id='+uid,
            dataType: 'html'
        })
        .done(function(data){
            console.log(data);  
            $('#dynamic-content').html('');  
            $('#dynamic-content').html(data); // load response
            $('#modal-loader').hide();          // hide ajax loader  
        })
        .fail(function(){
            $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
            $('#modal-loader').hide();
        });
       
    });

    //CALENDAR DAY
    $(document).on('click', '#getCalendar', function(cal){
       
        cal.preventDefault();
       
        var uid = $(this).data('id');   // it will get id of clicked row
       
        $('#dynamic-content').html(''); // leave it blank before ajax call
        $('#modal-loader').show();      // load ajax loader
       
        $.ajax({
            url: 'modal_ajax_turno_day.php',
            type: 'POST',
            data: 'id='+uid,
            dataType: 'html'
        })
        .done(function(data){
            console.log(data);  
            $('#dynamic-content').html('');  
            $('#dynamic-content').html(data); // load response
            $('#modal-loader').hide();          // hide ajax loader  
        })
        .fail(function(){
            $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
            $('#modal-loader').hide();
        });
       
    });
   
});

</script>

lo script user funziona benissimo, mi apre i dati contenuti nel file modal_ajax_turno_details.php
per il modal view-calendar il body mi compare bianco!
non capisco perchè visto che il modal user funziona benissimo!
grazie anticipatamente per il vs aiuto
S
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, il ciclo che fai in php non va bene : crei più button con lo stesso id e in javascript l'id deve essere univoco.
Vedo che hai messo un console.log, ti stampa qualcosa in console ?
 

Bunz

Nuovo Utente
28 Giu 2016
10
1
3
43
il console.log non mi stampa nulla! provo a cambiare l'id per il calendario!
io non sono bravo con javascipt/ajax, lo script l'ho trovato in rete!
strano il fatto che per gli utenti funziona!
 

Bunz

Nuovo Utente
28 Giu 2016
10
1
3
43
ma si puo fare che in base alla classe o al data-target effettua uno switch della pagina url
in modo da snellire anche il codice?

HTML:
<!--BTN CALENDARIO-->
<a type="button" class="calendar" data-toggle="modal" data-target="#view-calendar" data-id="2016-11-10" id="getTurno" 10</a>

<!--BTN DETTAGLIO-->
<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#view-modal" data-id="U_2016-11-10_150" id="getTurno" >UTENTE</button>

Codice:
$(document).ready(function(){
    
    //DETAILS CALENDAR TD
    $(document).on('click', '#getTurno', function(e){
        
        e.preventDefault();
        
        var uid = $(this).data('id');       // it will get id of clicked row
        
        $('#dynamic-content').html(''); // leave it blank before ajax call
        $('#modal-loader').show();      // load ajax loader
        
        $.ajax({
            url: 'modal_ajax_turno_details.php',
            type: 'POST',
            data: 'id='+uid,
            dataType: 'html'
        })
        
        .done(function(data){
            console.log(data);   
            $('#dynamic-content').html('');   
            $('#dynamic-content').html(data); // load response
            $('#modal-loader').hide();          // hide ajax loader   
        })
        
        .fail(function(){
            $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
            $('#modal-loader').hide();
        });

        
    });

});

non so come scriverlo in javascript, cmq l'idea è
se data-target==view-calendar la variabile url deve puntare a modal_ajax_turno_details.php
se data-target==view-modal url deve puntare alla pagina modal_ajax_turno_day.php
o una cosa simile sfruttando class
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
prova cosi
HTML:
<script>
    $(document).ready(function () {
        $(".btn").click(function () {
            var uid = $(this).data('id');
            var link = $(this).data('target') + ".php";
            $('#dynamic-content').html('');
            $('#modal-loader').show();
            $.ajax({
                url: link,
                type: 'POST',
                data: 'id=' + uid,
                dataType: 'html'
            }).done(function (data) {
                $('#dynamic-content').html(data); // load response
                $('#modal-loader').hide();          // hide ajax loader
            }).fail(function () {
                $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
                $('#modal-loader').hide();
            });
        });
    });
</script>
<button class="btn calendar" data-toggle="modal" data-target="modal_ajax_turno_details" data-id="2016-11-10" id="getTurno">10</button>
<button class="btn btn-success btn-xs" data-toggle="modal" data-target="modal_ajax_turno_day" data-id="U_2016-11-10_150" id="getTurno">UTENTE</button>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
rimetti il data target e aggiugi un data-link dal quale prendere il link della pagina
Codice:
var link = $(this).data('link') + ".php";
non ho capito molto dalla demo
 

Bunz

Nuovo Utente
28 Giu 2016
10
1
3
43
credo che il problema sia nell'html modal, controllo bene i codici
 

Bunz

Nuovo Utente
28 Giu 2016
10
1
3
43
funziona! con la riga
var link = $(this).data('link') + ".php";
grazie 1000!!
 
  • Like
Reactions: criric
Discussioni simili
Autore Titolo Forum Risposte Data
P Passare i risultati di un foreach in un modal. Help! PHP 2
F Come passare una variabile al modal di bootstrap PHP 1
L Visualizzare tabella all'interno finestra modal PHP 4
max1974 [HTML] Columns grid on modal form HTML e CSS 0
AMONRA75 [PHP] passare una variabile in una finestra MODAL PHP 1
Y Finestra dialogo CSS Modal HTML e CSS 6
G [Javascript] Problema modal con scrollbar Javascript 0
T [PHP] passare una variabile in una finestra MODAL di bootstrap PHP 3
C [HTML] Modal Dialog + Loading Animation + Resize Modal Dialog HTML e CSS 3
N Mostrare valori databse in un modal pop up con PHP e MySQL PHP 5
A struts2 + jsp + modal popup Java 2
R Modal popup Javascript 0
R valore value di un id da passare in chiamata ajax Ajax 3
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
M Fullcalendar in Codeigniter, un aiuto per la chiamata $ajax ? jQuery 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
E Php select option e ajax PHP 23
Emix Select concatenate php sql ajax PHP 2
MarcoGrazia Valori di ritorno json via ajax non visti. jQuery 1
felino ASP.net MVC: Exception e chiamata AJAX ASP.NET 1
motleyrulez Ricerca filtro con Ajax PHP 1
max1974 Grafico Ajax Javascript 4
max1974 Struttura $.ajax Ajax 7
C la chiamata ajax non ritorna alcun dato Ajax 1
max1974 Lettura Risultato $.ajax Javascript 1
motleyrulez Chiamata ajax per tabella php PHP 3
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
O [PHP] inviare dati da form e script ajax PHP 0
F limit show datatable ajax Ajax 1
Domenico_Falco1 Rendere dinamico un sito web con chiamate ajax e php e variabili json PHP 12
G Eseguire codice solo al termine della chiamata ajax Ajax 1
L Problema jQuery validation AJAX (PHP 7) PHP 6
max1974 [Javascript] Grafico ajax non funziona Javascript 0
WorldWideWeb Ajax POST con risposta JSON Ajax 2
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
D [Javascript] pulsanti per comandi shell con php e ajax Ajax 7
X Problema con jquery e ajax jQuery 2
B [PHP] variabili globali in chiamate ajax PHP 0
B DEBUG - PHP+JS+AJAX PHP 10
M Inserimento dati checkbox multipli in db da ajax a php PHP 1
Axis18 Creare una barra di avanzamento con $.ajax Ajax 7
otto9due Chiamata ajax su due url è possibile? Ajax 0
G [Javascript] Problema parametro passato con ajax Javascript 4
G Chiamata ajax restituisce errore random Ajax 1
paloppa [PHP] paginazione con ajax PHP 1
filomeni Ajax e https Ajax 4
bubino8 Ajax con risultato si/no Ajax 16
A redirect da pagina php chiamata da ajax PHP 2

Discussioni simili