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.
