e.preventDefault() ignorés modale de la charge

Question

J'ai trouvé ce code qui utilise ajax pour charger un modal c'est juste ce que j'ai besoin de charger dynamique des modaux de mes tables de données.J'ai une une étiquette de configuration pour charger un modal heres un exemple

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

Le lien est pour le code modal et simplement le code modal de la dernière section est l'id de produit qu'il ajoute en sorte qu'il crée une demande unique de l'api qui va ensuite servir de cette page.J'ai été jouer avec le code sur ce lien ajax jQuery bootstrap modal de chargement maintenant, le problème que j'ai est que, au lieu de la e.preventDefault cours d'exécution, il semble l'ignorer et de sauter sur le lien quelqu'un peut voir ce que je fais de mal ici.Regardé pour les erreurs et il ne semble pas y avoir d'erreurs dans le jog et il n'entre pas dans la cliquez sur la fonction de ce que j'ai trouvé, mais va continuer à essayer de corriger pendant que j'attends des réponses.

EDIT:

jQuery est chargé correctement au-dessus de ce code, je suis en utilisant jinja2 et tous les js est inclus dans mon template de base inclus dans les mon enfant à l'aide de {{ super() }} puis tous les autres script est exécuté en vertu de cela, il ya une autre peu de JavaScript qui s'exécutent avant ce qui fonctionne parfaitement c'est juste pour le datatable je vais inclure la totalité de mon js section ci-dessous.De la console.journal des sections sont juste pour mon débogage pour voir si ce qu'il atteigne le code.

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');
                });
            }
        });
    });

EDIT: Le lien vers le modal est juste un webapp2 route je sais que la route fonctionne correctement car il permet de charger le contenu de l'modal, mais avec pas de style car il est censé être ajouté à la page principale et n'en a pas besoin.

EDIT: À partir de la lecture du fichier d'amorce docs c'est ce que je suis venu avec elle ne charge plus à la page, mais la lightbox ne marche pas non plus je crois que je l'ai le droit, mais pas sûr.

<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

le data-toggle="modal" attribut est une partie de l'amorce de l'API.Il ya d'autres choses en jeu ici, qui attachent des écouteurs d'événement à ces éléments et ce que vous voyez est en fait deux événements.L'un de vous capturer dans votre gestionnaire de clic et celle enregistrée par l'amorce de l'API.

Au lieu d'utiliser l'attribut data api pour init votre modal capturer le clic comme vous le faites déjà et init modale de là.Le code d'initialisation va ressembler à ceci:

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

De plus, si vous voulez retarder l'affichage de l'modal jusqu'à un moment plus tard (après l'init), vous pouvez faire quelque chose comme ceci:

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

Découvrez Amorce de la documentation pour plus d'info j'ai trouvé ça assez tache sur.

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