You might want to check out the javascript that Leonel submitted here: https://groups.google.com/d/msg/web2py/JFy3BCHXgYc/7npKiqs6BOUJ
In particular see how he uses: $.web2py.disableElement(form.find($.web2py.formInputClickSelector)); On Friday, August 15, 2014 8:20:05 AM UTC+12, Michael Beller wrote: > > Thanks Cliff and Niphlod, > > I've used ajax several times and think I understand the process. My > problem now involves using a form inside a bootstrap modal and using ajax > to submit the form. What I meant by "web2py intercepting" the event was > that web2py.js registers an event handler for the submit which interferes > with the modal submit handler. web2py.js adds the 'disabled' class but > does not detect the succesful ajax response and then remove the class. > > Per Niphlod's request, I've recreated the problem using a minimum of code > that I've pasted below. This codes works if I remove web2py.js and fails > if I leave it. To recreate, click the button to open the model and then > click submit on the modal. You can see the button becomes disabled (even > if you close and reopen it remains disabled). In other testing, I also had > web2py add 'display='none' ' to the target but the code below doesn't do > that. > > Thanks again for your help. > > Controller Actions: > def display_page(): > return dict(foo='bar') > def return_data(): > data= {'foo':'text processed: %s' % request.vars.formdata} > return data > > View: > {{extend 'layout.html'}} > > <script> > $(document).ready(function() { > $('#note-btn').click(function() { > $('#note-modal').modal({ > show: true > }); > }); > $('#note-form').submit(function(e) { > e.preventDefault(); > $form= $(this); > $.post('{{=URL('default', 'return_data.json')}}', > {formdata: $form.serialize()}, > function(data) {$('#form-feedback').html(data.foo);} > ); > }); > }); > </script> > > <a href="#" id="note-btn">Open modal</a> > > <div id="note-modal" class="modal fade" tabindex="-1" role="dialog"> > <div class="modal-dialog"> > <div class="modal-content"> > <form class="form-horizontal" id="note-form"> > <div class="modal-header"> > <button type="button" class="close" data-dismiss= > "modal"> > <span aria-hidden="true">×</span><span class= > "sr-only">Close</span> > </button> > <h4 class="modal-title">Enter Notes</h4> > <div class='bg-success text-center' > id='form-feedback'></div> > </div> > <div class="modal-body"> > <div class="form-group"> > <div> > <textarea class="form-control" id="note-text" > name="note_text"></textarea> > </div> > </div> > </div> > <div class="modal-footer"> > <a class="btn btn-default" data-dismiss="modal">Close</ > a> > <button type="submit" class="btn btn-primary">Save > Notes</button> > </div> > </form> > </div><!-- /.modal-content --> > </div><!-- /.modal-dialog --> > </div><!-- /.modal --> > > > On Wednesday, August 13, 2014 11:31:39 PM UTC-4, Cliff Kachinske wrote: >> >> Here's how I do it and I assume Web2py does something similar when it, >> for example, resets the "Working" caption on buttons. >> >> The Javascript/Jquery whatever in the client changes the state of the >> button. I do it before sending the ajax post. I don't know how Web2py does >> it. >> >> It doesn't matter whether it's JQuery's ajax or Web2py's ajax. The syntax >> is a little different between the two, but the overall process is the same. >> The client sends a request that gets routed to a function. The function >> returns a response. >> >> In that response you would include, assuming JQuery has been loaded on >> the page, something like >> "$('#somentity_on_page').whatever_attribute_needs_changing('new state of >> the attribute'); >> >> Web2py isn't intercepting anything. You push a button, click a link, >> whatever, the browser sends a request. The request goes to your web server, >> be it Rocket, Apache, Nginx, any other. The web server sends the request to >> Web2py because the server is set up that way. Web2py then processes the >> request and returns a response. >> >> Excuse me if I'm interpreting incorrectly, but your questions suggest a >> certain misunderstanding about what's going on. Chapters 1, 3 and 4 of the >> Web2py manual provide a pretty good overview of how this all works. If I >> recall correctly, Wikipedia has some reasonably good articles about http, >> http requests and http responses. >> >> On Wednesday, August 13, 2014 6:51:59 PM UTC-4, Michael Beller wrote: >>> >>> Thanks ... >>> >>> Niphlod - I'll try to create a minimal app to reproduce. >>> >>> Cliff - are you suggesting to use the web2py ajax function rather >>> the jQuery post? >>> >>> I'm also trying to understand why web2py is intercepting the event and >>> why it doesn't think the response is succesful which I assume is why the >>> button is not re-enabled. >>> >>> On Wednesday, August 13, 2014 5:18:42 PM UTC-4, Cliff Kachinske wrote: >>>> >>>> get rid of the target in your ajax call and use ':eval' instead. >>>> >>>> Then reset the button in your response. >>>> >>>> On Sunday, May 4, 2014 9:33:05 AM UTC-4, John Drake wrote: >>>>> >>>>> I've created a simple ajax form to update a "post" database. For some >>>>> strange reason when I post a new message, the button greys out. >>>>> >>>>> Here is the model: >>>>> >>>>> db.define_table('t_post', >>>>> Field('f_post', type='text', >>>>> label=T('Post')), >>>>> auth.signature, >>>>> format='%(f_post)s') >>>>> >>>>> Here are my controller functions. >>>>> >>>>> def ajax_post(): >>>>> posts = crud.select(db.t_post, fields=['f_post'], query = >>>>> db.t_post.created_by == auth.user, >>>>> headers={'t_post.f_post': 'Post'}, orderby = >>>>> ~db.t_post.created_on) >>>>> search = crud.search(db.t_post) >>>>> return dict(posts=posts, search=search) >>>>> >>>>> def new_post(): >>>>> postdata = request.vars.post >>>>> db.t_post.insert(f_post = postdata) >>>>> posts = crud.select(db.t_post, fields=['f_post'], query = >>>>> db.t_post.created_by == auth.user, >>>>> headers={'t_post.f_post': 'Post'}, orderby = >>>>> ~db.t_post.created_on) >>>>> return posts >>>>> >>>>> Here is the model: >>>>> >>>>> {{extend 'layout.html'}} >>>>> <h1>This is the default/ajax_post.html template</h1> >>>>> <form onsubmit="return false"> >>>>> <div>Post : <input name="post"/></div> >>>>> <div><button onclick="ajax('new_post', ['post'],'results')">Post >>>>> Message</button></div> >>>>> </form> >>>>> <div id="results"> >>>>> {{=posts}} >>>>> </div> >>>>> <div> >>>>> {{=search[0]}} >>>>> </div> >>>>> >>>>> At first I used an input field with type "submit" for the submit >>>>> button. When that happened, it would >>>>> grey out and the value would set to "Working....". At least now >>>>> button text doesn't change, but it >>>>> it still grey's out. Inspecting the element in Firefox I get: >>>>> >>>>> <button value="Working..." class="btn disabled" >>>>> onclick="ajax('new_post', ['post'],'results')">Post Message</button> >>>>> >>>>> Why? I didn't ask it to change the button's class to disabled. And >>>>> it stays greyed even though >>>>> the results have returned and my "results" div has been properly >>>>> updated. I can still click on >>>>> the button, but it just appears disabled. >>>>> >>>> -- Resources: - http://web2py.com - http://web2py.com/book (Documentation) - http://github.com/web2py/web2py (Source code) - https://code.google.com/p/web2py/issues/list (Report Issues) --- 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+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.