0

Recently I moved to adminLTE3(using bootstrap 4.6) and use it as a front-end framework for Tornado. I encounter a problem with modal. In the old version of adminLTE(using bootstrap 3.3), I can dynamically generate content for modal, the code is as follows:

<a href="/some/path" data-toggle="modal" data-target="#mymodal">click here to generate modal conetent</a>

<div class="modal fade" id="modal-default">
        <div class="modal-dialog">
          <div class="modal-content">
             <!-- content here will be generated by tornado using the above link '/some/path' --> 
         </div>
   </div>
</div> 

tornado handler code:

@route("/some/path")
class SomeHandler(tornado.web.RequestHandler):
   def get(self):
      self.render("modal/test.html", msg="hello")

and the template file test.html is as follows:

<div class="modal-header">
  <h4 class="modal-title">Default Modal</h4>
</div>
<div class="modal-body">
  <p>{{ msg }}</p>
</div>
<div class="modal-footer justify-content-between">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
</div>

But when I click the link, the modal does not load successfully, yes, the main page becomes a little dark but the modal does not appear.

The same method can work very well with adminLTE(using bootstrap3.3), so I don't know what happened, no error message, is there any important change with modal in bootstrap3.3 and 4.6? Thanks in advance.

If I put all modal content directly into the HTML file, it can work correctly, so this means the modal function of bootstrap4 is fine, right? Just want to know why the modal content could not be rendered dynamically.

After adding some debug messages, I found that the bootstrap 4 modal seems to suppress the trigger of the hyperlink when clicking on it. As I did not find the call to '/some/path' by the Tornado handler, the modal did not appear because the modal only contains a framework and no content in it, in fact, the modal is triggered(the main page become a little dark). So the problem here is why the link does not trigger the Tornado handler to handle it when I click it? On bootstrap 3 I am sure the link will be triggered and cause the Tornado handler to process /some/path.

1 Answer 1

0

I found the cause: the remote load method is deprecated in bootstrap 4.

This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework or calling jQuery.load yourself.

bootstrap doc: https://getbootstrap.com/docs/3.4/javascript/#modals-options

a similar question: Bootstrap 4 with remote Modal

hope this will help those who meet the same issue.

Not the answer you're looking for? Browse other questions tagged or ask your own question.