dimanche 19 juin 2016

Ajax call from bootstrap model not working in flask


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


Aucun commentaire:

Enregistrer un commentaire