Results 1 to 2 of 2

Thread: help with modal dialog display

  1. #1
    Junior Member
    Join Date
    Nov 2016
    Posts
    2

    help with modal dialog display

    Hi all --

    I've got a horizon/django application that's a bit older - it's running a 2012 version of horizon and django 1.6.1. Both tools use bootstrap, of course.

    I'm having trouble getting a modal confirmation dialog to "unhide" itself. The modal background comes up (dims out background content), but no modal is displayed. I can manually remove the 'hide' value from the 'class' attribute and then it displays and I can interact with it.

    Question: what could possibly be happening in this app that would hinder the modal() method from displaying the hidden dialog properly? I've stepped through the javascript in the debugger and I don't see any code in any code path that attempts remove "hide" from the list of values in the "class" attribute. The only thing I can think of is that 'hide' is somehow getting added to the class attr list by some non-bootstrap code.

    Any thoughts?

    Thanks in advance,
    John
    Last edited by jcalcote; 11-11-2016 at 01:12 AM.

  2. #2
    Junior Member
    Join Date
    Nov 2016
    Posts
    2
    I came up with my own hacky solution because no one at Twitter knows enough about their own stuff (or cares enough about this list) to guess what might be causing my dialog display problems.

    I added the following snippet to the bottom of my Django index.html template for the page:

    Code:
    {% block js %}
        {{ block.super }}
        <script>
            $(function() {
                // hack to remove 'hide' value from modal dialog class attribute value
                // list. The 'modal_wrapper' div isn't populated till delete button is
                // clicked. Remove 'hide' within a dom observer for div's childList.
                var observer = new MutationObserver(function() {
                    var selector = $("#modal_wrapper").children(".hide");
                    var classValues = selector.attr("class");
                    selector.attr("class", classValues.replace(/hide/, ''));
                });
                observer.observe($("#modal_wrapper")[0], {childList: true});
            });
        </script>
    {% endblock %}
    Last edited by jcalcote; 11-19-2016 at 01:22 AM.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •