Thanks Limedrop and Cliff,
I found something that appears to work but I don't understand why. I
re-read the web2py book and noticed in:
http://www.web2py.com/books/default/chapter/29/11/jquery-and-ajax#Ajax-form-submission
that the following line was added at the end of the submit handling
function:
return false;
I added that line and web2py.js no longer adds the 'disabled' class.
I also tried this with a normal form like the example in the book with the
same results, i.e., this doesn't appear related to the modal but the
ajax form.
I'm not that proficient with javascript and even less adept with the
debugging and tracing tools so I'm not able to understand the flow and
logic.
I'd like to better understand but it appears returning false from the
submit handler that processes the ajax call solves the problem. One item
to note is that this solves the disabled problem but the button does not
show "working ..." like a normal web2py submit button.
On Thursday, August 14, 2014 5:42:31 PM UTC-4, Cliff Kachinske wrote:
>
> 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.
