E.preventDefault () Essere saltato per il carico modale

Question

Ho trovato questo codice che utilizza Ajax per caricare un modale è proprio quello che ho bisogno di caricare modali dinamici dai miei datababili. Ho un set-up di un tag per caricare un modello modal un esempio

<a class="blue" href="/api/getmodal/products/' + str(self.result.ids) + '" data-toggle="modal"> 
    <i class="icon-zoom-in bigger-130"></i> 
</a> 

.

Il collegamento va al codice modale e solo il codice modale L'ultima sezione è l'ID del prodotto che aggiunge in modo da creare una richiesta unica all'API che servirà quindi a questa pagina. Ho giocato con il codice in questo link jQuery ajax bootstrap modal loading ora il problema che ho è Che invece del e.preventDefault che funzioni sembra ignorarlo e saltare al link che qualcuno può vedere cosa potrei sbagliare qui. Certo per errori e non sembrano essere errori nel jog e non entra nella funzione click da ciò che ho trovato ma continuerà a cercare di risolvere mentre aspetto le risposte.

Modifica:

JQuery è correttamente caricato sopra questo codice che sto usando Jinja2 e tutto l'IMPORTANTE JS è incluso nel mio modello di base, quindi incluso nel mio figlio usando {{ super() }}, quindi tutto l'altro script viene eseguito sotto questo c'è un altro bit di JavaScript prima Questo funziona perfettamente per il DataTable includerò la mia intera sezione JS qui sotto. Le sezioni console.log sono solo per il mio debug per vedere se raggiunge il codice.

jQuery(function($) {
        var oTable1 = $('#sample-table-2').dataTable( {
        "sAjaxSource": '/api/products/datatables',
        "aoColumns": [
          null, null,null, null, null,
          { "bSortable": false }
        ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
            .each(function(){
                this.checked = that.checked;
                $(this).closest('tr').toggleClass('selected');
            });     
        });
    })

    $(document).ready(function() {
        // Support for AJAX loaded modal window.
        $('[data-toggle="modal"]').click(function(e) {
            sleep(10000)
            e.preventDefault();
            console.log('point two');
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $(url).modal('open');
                console.log('point two');
                sleep(1000);
            } else {
                $.get(url, function(data) {
                    $('<div class="modal hide fade">' + data + '</div>').modal();
                    console.log('point three');
                });
            }
        });
    });

.

Modifica: Il collegamento al modal è solo un percorso WebApp2 che conosco il percorso funziona correttamente in quanto carichi il contenuto del Modal ma senza styling come dovrebbe essere aggiunto alla pagina principale e non ne ha bisogno.

Modifica: Dalla lettura dei documenti Bootstrap questo è quello che ho inventato, non più carichi alla pagina, ma il modal non funziona o penso che lo abbia ragione ma non è sicuro.

<a class="blue" data-toggle="modal" href="/api/getmodal/products/' + str(self.result.ids) + '" data-target="#modalProduct" > 
    <i class="icon-zoom-in bigger-130"></i> 
</a> 

.

Answer 1

L'attributo "Modal" Data-Toggle="Modal" è parte dell'API Bootstraps.Ci sono altre cose in gioco qui che attribuiscono gli ascoltatori di eventi a tali elementi e ciò che stai vedendo è in realtà due eventi che accadono.Quello che acquisito nel tuo gestore click e quello registrato da Bootstraps API.

Invece di utilizzare l'API dell'attributo dati per iniziare la tua cattura modale il clicke come già fai e init il Modale lì.Il codice iniziale sarà simile a questo:

$('#myModal').modal({
remote:url
});

.

Inoltre, se si desidera ritardare la visualizzazione del Modal fino a quando alcuni punti successivi (dopo init) puoi fare qualcosa del genere:

$('#myModal').modal({
remote:url,
show:false
});

.

Controlla la documentazione di bootstraps per ulteriori informazioni ho trovato che sia grazioso spot.

http://getboowstrap.com/javascript/#modals