0

I'm working on app in flask and having troubles handling bootstrap modals when loaded via ajax call. I have two step process to load modal content and then handle the results.

  1. When a link is clicked - A bind event in jquery handles the event and makes an ajax call to route function in flask app which would return html page with data objects.

  2. On successfull completion of call - modal content will be returned along with data object which jinja will use to populate the required fields, and form will loaded to send a message.

  3. On hitting reply, another ajax call will be made to another app func and modal will be closed. For simplicity on hitting reply button - I'm just closing the modal and opening another modal.

This logic works perfectly fine outside the flask environment. Here is codepen with working example - http://codepen.io/jascodepen/pen/QEKyyK

$(document).ready(function() {
  $("#showConversation").click(function() {
      $('#user1Message').modal('show');
  });
  $("#postReply").click(function()
  {  
    $('#user1Message').modal('hide');
    $('#calModal').modal('show');
  });
});
  • Click id showConversation
  • load modal user1Message
  • Hit reply
    • close user1Message
    • load another modal

But similar logic doesn't work in flask
- Click id showConversation
- Make ajax call to flask route func view_conversation
- view_conversation will return example.html along with data objects ( for simplicity just return html in runnable code)
- Ajax call on successfully completion will load modal with content returned from call
- On hitting reply nothing happens now

Please see flask code here
http://code.runnable.com/V2ReWCVEN612N5gJ/bootstrap-modal-pop-up-issue-for-python-and-flask

Some details about runnable code.
- JS script in base.html
- modal to be loaded in modal.html
- modal content loaded by ajax call in example.html

Only difference between codepen and runnable code is that in codepen I'm not loading part of modal with ajax call. Not sure, if that's what is causing the issue

jas
  • 1,539
  • 5
  • 17
  • 30
  • 1
    It's been a while since I've used jQuery, but I know that `click` didn't used to affect elements added to the page after it was called. You needed to use `on` for that. – dirn Jun 18 '16 at 11:28
  • Thanks! That was the issue. It is best handled by binding events to the parent div. It was mentioned in one of the answers mentioned on another post. I'll put more information in answer – jas Jun 19 '16 at 01:40

1 Answers1

0

As mentioned by dirn in the comment, problem was click doesn't take affect when elements added to the page after it was called.

Solution is mentioned in one of the answers in this post Event when element added to page

a jQuery.on() approach would be more appropriate, for example:

$("#myParentContainer").on('click', '.removeItemButton', function(){
      alert($(this).text() + ' has been removed'); 
}

If you have dynamic content that should respond to clicks for example, it's best to bind events to a parent container using jQuery.on.

Community
  • 1
  • 1
jas
  • 1,539
  • 5
  • 17
  • 30