Hello, I try the Martìn "plugin" works great! Need translation though... I like the idea it use the comment instead of requiring "widget=" because it leave you with the possibility to have a widget and the modal add new record... But it doesn't work properly combining the Martìn modal plugin and web2py autocomplete widget for instance... So there is still the need to create different implementation of the same widget (widget combination) like I did in the pass with my AutocompleteOrAddOption widget...
Recently I made my own widget that use bootstrap typeahead autocomplete... I may try to create a new AutocompleteOrAddOption combining the Martìn Modal plugin and my bootstrap typeahead plugin... Richard On Thu, Mar 21, 2013 at 4:15 AM, Vincenzo Ampolo <[email protected]>wrote: > On 03/20/2013 08:33 AM, Martín Miranda wrote: > >> Here ... >> http://linuxapuntes.blogspot.**com.ar/2013/03/plugin-modal-** >> bootstrap-web2py.html<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://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 > web2py+unsubscribe@**googlegroups.com<web2py%[email protected]> > . > For more options, visit > https://groups.google.com/**groups/opt_out<https://groups.google.com/groups/opt_out> > . > > > -- --- 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.
