Why won't my bootstrap modal form close?

[weheh]

My bootstrap modal won't close when the user clicks the submit button. Console says, "Uncaught TypeError: undefined is not a function"

Here's what I'm doing.

# view does a load of a skeleton

{{= LOAD('contact', 'dialog.load', ajax=True)}}

# contact controller looks like this
def dialog():
    return dict(html=DIV(
        DIV(
            DIV(
                _class='modal-content',
                ),
            _class='modal-dialog',
            ),
        _class='modal autoModal fade',
        _id='contact-dialog',
        _role='dialog',
        aria=dict(labelledby='contact-title', hidden='true'),
        )
    )

# document ready initializes modal
$(document).ready(function() {
    $("#contact-dialog").modal({
        show: false,
        backdrop: false,
        keyboard: true
        });
});

# elsewhere in view, link is created that launches modal
        A(current.T('Contact'), _href='#',
            _title=current.T('For a good time, call ...'),
            _onclick="""web2py_component("%s","contact-dialog .modal-content");
                $("#contact-dialog").modal("show");""" % URL('contact', 'form.load'),
            ),

Custom form is loaded AOK. All form functionality works hunky-dory (which means AOK for you non-native-English speakers). Errors caught perfectly by web2py. And then, for the coupé de gras:

    if contact_form.process(formname='contact_form').accepted:
        send_email(contact_form)
        response.flash = SPAN(T('Message sent'), _class='success')
        response.js = '$("#contact-dialog").modal("hide");'  # <<< THIS IS WHERE THE TROUBLE IS!!

response.js gets executed. That's where I get the "Uncaught TypeError: undefined is not a function" message. I interpret this to mean that response.js is being treated like a function but there's no function.

Out of desperation, I went so far as to wrap a function around response.js like this:

        response.js = '(function() {$("#contact-dialog").modal("hide");})();'

but that was utterly futile. OK web2py community, what gives? I used to do this all the time with jquery ui and had no trouble. But with bootstrap, it's a problem.

[Richard Vézina]

I think you just need : $("#contact-dialog").modal("hide");

Instead of :

(function() {$("#contact-dialog").modal("hide");})();

Since you don't need to check if document is ready...

But if you want to keep it I guess you miss a $

$(function() {$("#contact-dialog").modal("hide");});

Not sure about the (); at the end...

Richard

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Richard Vézina]

This may help also : http://linuxapuntes.blogspot.com.ar/2013/03/plugin-modal-bootstrap-web2py.html

[weheh]

Richard - Thanks, but that is exactly what I'm using:

response.js = $("#contact-dialog").modal("hide");

and it's not working. The function wrapper was an act of desperation but it doesn't work either.

[Richard Vézina]

You could try with plain HTML instead of using helper... 

XML("""PLAIN HTML MODAL""")

Just to make sure that it works... 

I suspect that the modal is not construct exactly as it should...

Richard

[weheh]

I forgot to mention that I also tried 

        response.js = XML('$("#contact-dialog").modal("hide");')

and this threw an internal server error, which surprised me a bit, since I've wrapped response.js statements with the XML helper before without incident. Here's the traceback:

Traceback

1. 2. 3. 4. 5.

Traceback (most recent call last): File "I:\web2py\gluon\main.py", line 489, in wsgibase urllib2.quote(response.js.replace('\n','')) AttributeError: 'XML' object has no attribute 'replace'

[Richard Vézina]

when you modal is loaded in html do CTRL+U and copy/paste the source here...

You don't need XML() for response.js

Do you really test you modal as a component?

response.js is only working in context of a component.

Richard

[weheh]

Richard - this modal is a component. 

I'm rapidly coming to the conclusion that there's some jQuery variable scoping issue that's causing this problem. I just haven't found it, yet. Very frustrating.

What I don't fully comprehend is why, when I type at the console, $("#contact-dialog").modal("hide"); the modal vanishes as expected. And yet, the response.js that does the same thing chokes. I think the error listed earlier means it doesn't recognize the modal("hide") function attached to the $("#contact-dialog") element.

Anybody have any insights into this?

[weheh]

Alright, I got it to work, but it's super fugly. I created a javascript function:

function hide_modal() {

    $("#contact-dialog").modal("hide");
}

and then in my controller I replaced the response.js with this:

response.js = 'hide_modal("#contact-dialog");'

It looks like I got my anonymous jQuery function wrong earlier. I revised it to this and it works, too.

response.js = '(function($) {$("#contact-dialog").modal("hide");}(jQuery));'

So the function approach works. But WHY? I think there's something fishy with the scoping inside of the response.js. Can anyone explain what happens inside response.js that causes this behavior?

[Richard Vézina]

I think the scope issue is coming from the dynamic caracteristic of your modal that you add to the DOM with the web2py_component() function...

The second comment on the question here should work : http://stackoverflow.com/questions/10280569/jquery-select-dynamically-created-html-element

But you should not remove the parent empty div that you need to add to the component shell view, you need to remove the child that should be the modal... Not sure if in this select scenario it gonna be better or not though...

I you were have some way to use .on() some how it could solve the problem if the problem come from the fact that your modal is a dynamic DOM element...

You can try by adding a button that you can click like in the SO question if you can hide/remove the modal this way or not.

You could also just redirect on the shell view and use valuekeep depending of how you use your modal for subform... I guess your need is for adding a missing value in a lookup table and autoselect it in the form you try to complete if so, the blog post in one of my previous mail do exactly that and it works I test it (the modal form at least work ok). But I am not sure it autoselect the inserted value, but this is easy to do with a trigger once component form has pass.

Hope it helps

Richard

On Wed, May 28, 2014 at 2:25 AM, weheh <richard...@verizon.net> wrote:

Alright, I got it to work, but it's super fugly. I created a javascript function:

function hide_modal() {

    $("#contact-dialog").modal("hide");
}

and then in my controller I replaced the response.js with this:

response.js = 'hide_modal("#contact-dialog");'

So that works. But WHY? I think there's something very fish with the scoping inside of the response.js. Can anyone explain what's going on here?