Twitter Bootstrap Question posted in

jquery.on("show.bs.modal", m.redraw) corrupts the dialog – Twitter bootstrap

I’m trying to use Twitter Bootstrap with Mithril. Usually redrawing a dialog with Bootstrap wrapped with Mithril works, but redrawing in a handler for "show.bs.modal" event hides the dialog leaving the backdrop. It doesn’t solve even with setTimeout, which should provide a different execution context. Why and how can I fix it?

Here is a simple PoC.

Gist: https://gist.github.com/173210/8c84966696276f1bfa3e298edb53da2b

Rawgit (working demo): https://rawgit.com/173210/8c84966696276f1bfa3e298edb53da2b/raw/34b0ac625962ee830d63829107eeb0473c735375/poc.html

In short, this doesn’t work.

jquery.on("shown.bs.modal", () => setTimeout(m.redraw, 2000));
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solved: m.render overwrites className, which was altered by $(element).modal("show"), so you must prevent that. You have two options:

    1. Get the className after $(element).modal("show") and reflect it to the model.
    2. Set className in config when initialized is false.

    I choose 2. It looks like the following:

    m("div", {
  config(element, initialized) {
    if (!initialized) {
      element.className = "modal fade";
      $(element)
        .on("shown.bs.modal", () => setTimeout(m.redraw, 2000))
        .modal("show");
    }
  }
}, conentOfTheModalDialog);

  2. 0

    m.redraw only works for components that have been mounted with m.mount or m.route.

    I made a few changes to your code:
    https://jsbin.com/wegeyi/edit?js,output

    • If we put your virtual DOM code in a component view, and change m.render to m.mount, we can replace f with m.redraw.
    • I added a draw counter to indicate that the code is re-executing as expected.
    • DOM attributes that aren’t functions, like className, type, etc can be expressed in the m() selector argument
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search