Strange ajax problem

[John Drake]

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.

[Reza Amindarbari]

Did you figure out what was wrong? I faced the same issue. Everything works fine when I take out the ajax function.

[Michael Beller]

I just encountered the same problem.  I'm using a Bootstrap Modal form and encountering the same problem - the form sends and receives data via AJAX but then adds the 'disabled' class to the button.

I found this logic in web2py.js but I'm not clear on what's happening and why:

    // Form input elements disabled during form submission
    disableSelector: 'input, button, textarea, select',
    // Form input elements re-enabled after form submission
    enableSelector: 'input:disabled, button:disabled, textarea:disabled, select:disabled',

Have either of you found a solution?

[Niphlod]

the logic behind is suppressing double submission. web2py disables the submit button when you click on it until a proper response is returned.
Don't EVER use inline javascript, and don't use web2py.js internal functions without proper knowledge of the inner workings :-P 

[Michael Beller]

Thanks Niphlod,

I'm not using inline JS or explicitly using web2py.js.

I'm using a Bootstrap Modal pretty much verbatim from the Bootstrap examples.  It appears that web2py js is capturing the submit and disabling the button but not detecting the response and enabling the submit - is that correct? should I not use the Bootstrap js?

Here's my function:

    $('#note-form').submit(function(e) {
        e.preventDefault();
        $form= $(this);
        $.post("/app/controller/action.json",
           {formdata: $form.serialize(),
            note_id: $('#note-id').val(),
            note_text: $('#note-text').val()
           },
           function(data) {
               $('#form-feedback').html(data.notes).fadeIn(500);
               $form[0].reset();
           }
       );
   });

[Niphlod]

you can use whatever you like.... it just needs to accomodate how web2py handles ajax.
Without a complete example I can't tell what's going wrong with your own implementation. If you can, pack a minimal app to reproduce the behaviour

[Cliff Kachinske]

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:

[Michael Beller]

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.

[Cliff Kachinske]

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.

[Michael Beller]

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">&times;</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 -->

[Limedrop]

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));

[Cliff Kachinske]

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. 

[Michael Beller]

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.

[Leonel Câmara]

In a jquery event handler returning false is the same as calling event.preventDefault and event.stopPropagation that's why you don't get the Working... anymore, you are stopping web2py.js handlers for submission from being processed. Namely this one:

      $(doc).on('submit', 'form', function () {

        var submit_button = $(this).find(web2py.formInputClickSelector);

        web2py.disableElement(submit_button);

      });

Which is what disables the button and puts the Working... there. 

The reason you're having problems is that you're using web2py's ajax convenience function which doesn't care about what it's doing, it just cares about submitting form inputs. So it never sets the form handlers which re-enable the buttons.

One thing you can do is disable the element yourself in your submit handler using $.web2py.disableElement

And then have something like:

$(document).on('ajax:complete', '#myForm', function (e) {

        $.web2py.enableFormElements($(this));

      });

[Michael Beller]

Thanks Leonel - awesome explanation.  I looked through your code that you posted to load forms in modals and handle file uploads - I need to study more.

One question - you say below "you're using web2py's ajax convenience function which doesn't care about what it's doing" - I'm actually not using the web2py ajax function but rather the jQuery post function.  Did you mean to say "jQuery's post function which doesn't care" vs. the web2py ajax function which would then hand the disabling/enabling of form elements?

[Leonel Câmara]

Using your jquery post code or web2py's ajax function would give you the same problem with the button that you're preventing with return false.

Basically, if you want you can just remove return false from your submit handler and add this to your javascript:

$(document).on('ajax:complete', '#myForm', function (e) {

        $.web2py.enableFormElements($(this));

      });

replacing myForm with your form's id and have it working.

Another option is to not put that javascript and simulate a trapped form by setting data-w2p_target which will make web2py.js form_handlers fire as they will think it's a trapped form:

<form class="form-horizontal" id="note-form" data-w2p_target>

I think either option will work (I'm not testing this). So:

1. Remove return false

2. Either add the javascript or the data-w2p_target attribute to the form.

3. ???

4. Profit!

[Michael Beller]

Thanks Leonel,

I tried both options but couldn't get them to work - or at least I haven't found the right combination.

I also created a simple ajax form using the example in the book to apply your two recommendations.  I could only get it to work with the 'return false' statement but that would not disable the button to prevent double submission.  If I remove the 'return false' statement, the button shows 'working ...' but the target is not updated.

I'm still trying to learn what's happening so thanks for your explanations.

{{extend 'layout.html'}}

<div id="target"></div>

<form id="myform">
 <input name="your_message" id="your_message" />
 <input type="submit" />
</form>

<script>
jQuery('#myform').submit(function() {
    ajax('{{=URL('new_post')}}',
        ['your_message'], 'target');
    //return false;
});
</script>

[Leonel Câmara]

I'm sorry I wasn't testing any of this. Have a working example attached.

[Michael Beller]

Don't be sorry!  Thanks but I don't see any views in the package - I see your two functions at the bottom of the default controller but no corresponding views.  Did I miss them?

On Fri, Aug 15, 2014 at 8:25 AM, Leonel Câmara <leonel...@gmail.com> wrote:

I'm sorry I wasn't testing any of this. Have a working example attached.

--
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 a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/BfKNToXlKds/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Leonel Câmara]

I used default/index.html, return_data doesn't need a view as it uses generic.json

[Michael Beller]

Perfect - I can't thank you enough!

I saw the code in index right after I sent my other message, I was looking for display_page.

Not sure what I did wrong last night (probably just a case of staring at code too long) but I see how you added the $.web2py.enableElement.

I just went back and read the OP and I think this is the answer to all the problems mentioned.  Your explanation along the way was also very helpful.

Thanks again!

[Cliff Kachinske]

Michael, one final thought.

To get a better handle on what's going on, in Chrome or Firefox press F12 to bring up the developer tools. Click the Network tab and play around with submitting your forms. You can look at the entire conversation.