Selectable not working in a modal

[mlavin]

When the form in which a autocomplete is used, is presented within a bootstrap modal (as in http://stackoverflow.com/questions/11944887/jquery-ajax-django-present-form-in-a-bootstrap-modal-and-re-show-if-validati), the functionality is lost.
Any idea on how to solve this?

Thanks!

---

• Bitbucket: https://bitbucket.org/mlavin/django-selectable/issue/78
• Originally Reported By: Philippe Luickx
• Originally Created At: 2012-12-16T23:00:02.473

[mlavin]

Thanks Mark!

---

Original Comment By: Philippe Luickx

[mlavin]

Mark, you are a hero! Works like a charm!
Hope this issue thread will be useful to someone else too one day.

---

Original Comment By: Philippe Luickx

[mlavin]

bindSelectables is defined in jquery.dj.selectable.js so you would need to ensure that it is included on the page even if the form using it isn't included on page load.

For the context you should use the smallest container selector which includes all of the selectable fields/widgets. For your case bindSelectables("#Modal"); should work just fine since that's where the new form is being injected.

---

Original Comment By: Mark Lavin

[mlavin]

Thanks for the pointer Mark! I tried playing around with the bindSelectables, but not getting far yet...
The call is indeed done through AJAX, which would be something like:

:::javascript
<script>
    $(".modal").click(function(ev) { // for each edit contact url
        ev.preventDefault(); // prevent navigation
        var url = $(this).data("form"); // get the contact form url
        $("#Modal").load(url, function() { // load the url into the modal
            $(this).modal('show'); // display the modal on url load
// This position would make sense...
            bindSelectables();
        });
        return false; // prevent the click propagation
    });

</script>

However, hitting 2 issues

• ReferenceError: bindSelectables is not defined >> no idea on this...
• What to pass as context? Would $("#Modal") work?

Big fat disclaimer: I am definitely no javascript wizkid...

Thanks for the help!

---

Original Comment By: Philippe Luickx

[mlavin]

I'm not sure I understand the issue. Is the modal being loaded via AJAX call? If so then you would need to ensure that bindSelectables is called once the form is loaded into the modal.

---

Original Comment By: Mark Lavin