e.preventDefault() being skipped for modal load

Question

I have found this code that uses ajax to load a modal it is just what I need to load dynamic modals from my datatables. I have an a tag setup to load a modal heres an example

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

The link goes to the modal code and just the modal code the last section is the product id that it adds in so it creates a unique request to the api that will then serve this page. I have been playing with the code at this link jQuery ajax bootstrap modal loading now the issue I have is that instead of the e.preventDefault running it seems to ignore it and jump to the link can anyone see what I might be doing wrong here. Looked for errors and there doesn't seem to be any errors in the jog and it doesn't get into the click function from what I have found but will keep trying to fix while I wait for responses.

EDIT:

jQuery is properly loaded above this code I am using jinja2 and all the important js is included in my base template then included in my child using {{ super() }} then all other script is run under this there is one other bit of JavaScript that run before this that works perfectly that is just for the datatable I will include my entire js section below. The console.log sections are just for my debugging to see if it reaches the 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: The link to the modal is just a webapp2 route I know the route works correctly as it loads the content of the modal but with no styling as it is supposed to be added to the main page and doesn't need it.

EDIT: From reading the bootstrap docs this is what i have come up with it no longer loads to the page but the modal doesn't work either I think I have it right but not sure.

<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

the data-toggle="modal" attribute is part of bootstraps API. There are some other things at play here that attach event listeners to such elements and what you are seeing is actually two events happening. The one you capture in your click handler and the one registered by bootstraps API.

Instead of using the data attribute api to init your modal capture the click like you already do and init the modal there. The init code will look similar to this:

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

Additionally if you want to delay the display of the modal until some later point (after init) you can do something like this:

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

Check out Bootstraps documentation for further info I have found it to be pretty spot on.

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