On 03/20/2013 08:33 AM, Martín Miranda wrote:
Here ...
http://linuxapuntes.blogspot.com.ar/2013/03/plugin-modal-bootstrap-web2py.html
Hi Marti'n, Richard,
Thank for your time.
Actually I think I solved it in another way allowing:
1) Load modal by an ajax call
2) use template system for modal html generation
I reached this goal like this.
Add this small piece of javascript:
$(document).ready(function() {
// Support for AJAX loaded modal window.
// Focuses on first input textbox after it loads the window.
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
var rnd=Math.floor(Math.random()*10000);
//Do this in two steps or scripts in data will be loaded
too early
$('body').append($('<div />', {'id':'modal'+rnd}));
$('#modal'+rnd).append(data);
var modal_element = $('body #modal'+rnd).children()[0];
$(modal_element).modal();
$(modal_element).on('hidden', function(e){
$(this).parent().remove();
});
}).success(function() { $('input:text:visible:first').focus();
});
}
});
});
This looks for elements with data-toggle="modal" such that when an
element like this is found into a view:
<!-- Button to trigger modal -->
<a href="{{=URL(f='add_traceback', args=[request.args(0),
bug.tstamp])}}" role="button" class="btn btn-primary"
data-toggle="modal">Add bug</a>
The href is called via Ajax, so the controller (add_traceback in this
case) defined as:
def add_traceback():
form = SQLFORM.factory(
Field('message'),
formstyle='bootstrap',
buttons=[],
_action = URL('add_traceback'))
if form.process().accepted:
response.message='form submitted'
return dict(form=form)
Is just a normal controller function with no modifications, buttons=[]
and formstyle have been added to allow a better rendering of the form
but they are not necessary.
Finally the view related to add_traceback is:
<div id="modalwindow" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3 id="myModalLabel">Add bug to database</h3>
</div>
<div class="modal-body">
{{=form}}
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"
aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<script type="text/javascript">
$('#modalwindow form').on('submit', function(e){
e.preventDefault();
var frm = $('#modalwindow form');
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
$('#modalwindow').modal('hide');
}
});
});
$('#modalwindow .btn-primary').click(function(e){
$('#modalwindow form').submit();
});
</script>
The javascript in the view ensures that the modal form is submitted as
ajax as well instead of a post.
I'll try to make a plugin and publish/document all this soon.
--
Vincenzo Ampolo
http://goshawknest.wordpress.com/
http://vincenzo-ampolo.net/
--
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
