Modal Ajax - body bianco

Bunz · 14 Nov 2016

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 · 14 Nov 2016

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 · 14 Nov 2016

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!

criric · 14 Nov 2016

prova a vedere se l'esempio che ho postato in questa discussione può esserti utile.

Bunz · 15 Nov 2016

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 · 15 Nov 2016

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>

Bunz · 15 Nov 2016

non si apre il modal, forse perché nel data-target manca il # nel data-target
ed ho rinominato i due id modal!

inoltre quando apro i modal_ajax_turno_details lo sfondo diventa nero!
il modal_ajax_turno_dey ha sempre il body bianco

questo è il calendario che ho creato
su questo link invece ho caricato una demo

il risultato del modal_details dovrebbe essere questo

criric · 15 Nov 2016

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 · 15 Nov 2016

credo che il problema sia nell'html modal, controllo bene i codici

Bunz · 15 Nov 2016

funziona! con la riga
var link = $(this).data('link') + ".php";
grazie 1000!!

Cerca

Cerca

Modal Ajax - body bianco

Bunz

Nuovo Utente

criric

Super Moderatore

Bunz

Nuovo Utente

criric

Super Moderatore

Bunz

Nuovo Utente

criric

Super Moderatore

Bunz

Nuovo Utente

criric

Super Moderatore

Bunz

Nuovo Utente

Bunz

Nuovo Utente

Discussioni simili