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.