How to change Ajax forms transition in jQuery Mobile?-Collection of common programming errors

Is there a way to change the transition of the Ajax forms in jQuery mobile ? For now, when I submit a form, if the validation (server-side) is successful, it slides to the « success page », that’s ok but if the form is invalid, it slides to the same form with fields errors… It’s kinda weird 🙂 I’d like to make it fade instead…

I know I can override ajax submission but it’s better with, though…

* Edit *

I found that we can override the default transition type, so I think I could make it with the default transiton set to ‘fade’ and specify the transition for the other links but it does’t work, here is the code, not sure what’s wrong…

in custom.js

$(document).live("mobileinit", function(){
    $.mobile.defaultTransition: 'fade'
});

No error, nor 404.

1. Supposedly you can add the data-transition attribute to the form tag, like this:

   
     ...
   

   But I have yet to see it work effectively.

   FIXED

   Well, I’ve submitted a fix request on github, but what you have to do is alter the jQuery Mobile source:

   line 2159 of the alpha-3 release:
       $.mobile.changePage({
               url: url,
               type: type,
               data: $(this).serialize()
           },
           $(this).attr('data-transition'),  // this used to be *undefined* just like the next parameter
           undefined,
           true
       );
   

   then you can just use data-transition="fade" in your form tag.

2. I just use data-transition=”none” and it seems to work. Maybe this is something that it was fixed. I am using 1.0a4.1

Originally posted 2013-11-09 21:07:01.