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>

I think we need more information.... did you load jquery, bootstrap, etc properly? how are you initializing the link to be modal? Can you post a fiddle to help us debug your code? — blurfus, Jun 04 '14 at 18:50
I'll add some more info now can't post a fiddle requires backed script to properly replicate my setup. — bobthemac, Jun 04 '14 at 18:52
I got a simplified version working here: http://jsfiddle.net/blurfus/466fZ/ - not sure why yours is not working... — blurfus, Jun 04 '14 at 19:37
I wonder if you are seeing issues with defining the `ready` function twice. These two are equivalent: `$(document).ready(handler)` and `$(handler)` — blurfus, Jun 04 '14 at 19:46
Thats not the issue tried it in the in the first section and it still didn't work. Made some changes since them though see my new edit. — bobthemac, Jun 04 '14 at 20:01

score 2 · Accepted Answer · answered Jun 04 '14 at 19:22

2

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

answered Jun 04 '14 at 19:22

George

4,323
3
30
33

Looking at this it would be better if I could do it this way I have read the docs you posted and think I can do it in the tag using the data- prefix to set the same options. The link no longer goes to the modal but the modal doesn't load either will edit my post above with my new link text. – bobthemac Jun 04 '14 at 19:56
Do you have the modalProduct element on the page? – George Jun 04 '14 at 20:05
No I thought that was the element that should be my remote page – bobthemac Jun 04 '14 at 20:07
ahh that's how it works I get it now thanks is there a way to remove it once it has been added or some kind of force reload when I click a new link. – bobthemac Jun 04 '14 at 20:09
No worries fixed it for anyone that's interested this is the link http://stackoverflow.com/questions/12286332/twitter-bootstrap-remote-modal-shows-same-content-everytime – bobthemac Jun 04 '14 at 20:16

e.preventDefault() being skipped for modal load

1 Answers1