I am trying to submit a form from a modal dialog through jQuery. Here is the view loading the components.
library.py @auth.requires_login() def index(): return dict() @auth.requires_login() def add_book(): return dict(bform = crud.create(db.book),aform = crud.create(db.author)) @auth.requires_login() def show(): books = db().select(db.book.ALL) return dict(books=books) library/index.html {{extend 'layout.html'}} <div id="booklist"> {{=LOAD(c='library',f='show.load', ajax=True)}} </div> <div id="controls"> {{=LOAD(c='library',f='add_book.load', ajax=True)}} </div> library/add_book.load <script> $(document).ready(function(){ $("#add-book").button().click(function() {$("#add-book- form").dialog("open");}); $("#add-book-form").dialog({ autoOpen: false, width: 500, modal: true, buttons: { Cancel:function() { $(this).dialog("close");}} }); }); </script> <button id="add-book">Add a book</button> <div id="add-book-form" title="Add a book"> <div id="bookform"> {{=bform}} </div> </div> <script> $(document).ready(function(){ $("#add-author").button().click(function() {$("#add-author- form").dialog("open");}); $("#add-author-form").dialog({ autoOpen: false, width: 500, modal: true, buttons: { Cancel:function() { $(this).dialog("close");}} }); }); </script> <button id="add-author">Add an author</button> <div id="add-author-form" title="Add an author"> <div id="authorform"> {{=aform}} </div> </div> The dialog loads correctly, and closes when submit is clicked. However the data is not submitted into the database. Please advise on what I am missing, or if you have any ideas on how it can be improved.