use jquery mobile with image upload functionality in web2py - is a hack is necessary?

77 views
Skip to first unread message

Rob Paire

unread,
Oct 3, 2014, 12:59:13 PM10/3/14
to web...@googlegroups.com
Hello all, 
I am working on an app using web2py and the jquery.mobile plug-in which I upgraded from v1.3.1 to v1.3.2. So far everything is working fine except for the image upload feature. I managed to solve the problem and enable the upload, but I had to hack the jquery.mobile-1.3.2.js source to make it work. I am making this post in order to share my experience. 

Here is the situation: when the view to do the upload includes the normal layout file everything works as expected. However, when using the plugin_jqmobile/layout.html, the upload fails with the jquery.mobile message "Error Loading Page" - in short the web2py callback fails. The record does not get inserted, neither does the response.flash error message appear. A couple of long sessions with javascript debugger and reading //api.jquery.com/submit eventually led me to suspect event.preventDefault() was causing the error. Indeed it was true, when I commented out that line of code, the upload was successful. Below is the modified code snippet from jquery.mobile-1.3.2.js (this problem also exists in jqm v1.3.1)

//bind to form submit events, handle with Ajax
$.mobile.document.delegate( "form", "submit", function( event ) {
var formData = getAjaxFormData( $( this ) );

if ( formData ) {
$.mobile.changePage( formData.url, formData.options );
//event.preventDefault();  //turned this off to enable web2py callbacks 
}
});

I am going to proceed with further testing. If there is a better solution, please let me know. Thank you.

In my controller I have the following standard code:
    form = SQLFORM(db.documnt)
    if form.accepts(request, session):
        response.flash = 'form accepted:'+str(form.vars.id)
        make_thumbnail(db.documnt,form.vars.id,(175,175))
    elif form.errors:
        response.flash = 'form has errors...'
    return dict(form=form)    

And the associated view:
  {{#extend 'layout.html'}}
  {{extend 'plugin_jqmobile/layout.html'}}

<body>
{{=form}}
</body>



Rob Paire

unread,
Oct 3, 2014, 2:58:27 PM10/3/14
to web...@googlegroups.com
I have been thinking about this problem, and it seems like a more elegant solution is to include an override method in the jquery.mobile plug-in layout file as described here: http://www.bennadel.com/blog/1624-ask-ben-overriding-core-jquery-methods.htm I will post back if I get something working. 

Johnny Lupino

unread,
Oct 21, 2016, 4:54:31 PM10/21/16
to web2py-users
Hi,

It's been some time after you had posted your problem, but I found out another way of fixing it, since I could not find "//event.preventDefault(); " anymore.
Anyway, to make it possible to submit a form using jqmobile plugin , I only needed to add an extra attribute to my form - which is data-ajax='false'.
In controller e.g default.py , after your form definition add:
form['data-ajax]'='false' and it should work.
I'm sure you know it by now, but it is always good to share knowledge/experience.
ATB,
Archie

Rob Paire

unread,
Oct 24, 2016, 11:58:08 AM10/24/16
to web...@googlegroups.com

Ah that is a good, elegant solution; thank you for sharing. I did not know of this trick before.


--
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/oAXejH_jidk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages