Aha, I get what you're doing now. Maybe the simple answer is don't use a
submit button. Try something like
<input type="button" class="submit-button" id=
"something_created_server_side">
You may have to mess around with the css a bit to get the vertical
alignment and height right. This will work around the client side handlers.
On Thursday, August 14, 2014 4:20:05 PM UTC-4, 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.
