Prevent Default Form Submit

[jvanalst]

Hi,

I have a form that I'm trying to override the default on submit with an ng-submit. Before I started integrating JQM w/Angular Adapter it worked fine. With the adapter it's doing a default submit after it finishs the ng-submit.

<form name="newPlaceStep1Form" ng-submit="forwardOneStep();">
  <button type="submit" ng-disabled="!newPlaceStep1Form.$valid">Next</button>
</form>

In other words it's doing a GET on index.html and reloading the page after doing the ng-submit action.

I tried to add data-ajax="false" to the <form> tag, but that results in an error. Uncaught TypeError: Cannot call method 'replace' of undefined (deep in a huge callback stack in JQM/JQuery)

Any suggestions? I see nothing in the documentation for this situation. Is this a bug or am I doing something wrong?

[jvanalst]

Just a quick update...

adding data-ajax="false" breaks the page rendering completely, regardless of the angular directive. So this may be a jQuery.Mobile issue... https://github.com/jquery/jquery-mobile/issues/4896

[tbosch]

Hi, using data-ajax should work. Here is a jsfiddle that does work: http://jsfiddle.net/d4jbE/ (Clicking the button sets the variable x to 10 instead of submitting...).

Could you put your example with data-ajax="false" into a jsfiddle so I can check that error?

Thanks, Tobias

[jvanalst]

Unfortunately I wasn't able to replicate the error in a jsfiddle (I think due to jsfiddle limitations, although it's still possible there's something uniquely hokey about my application). I think there's some conflict in the routing layer and it'll take multiple template templates files to replicate. It dies somewhere between loading the next page and injecting it into the DOM resulting in a spinning wheel of death and a Uncaught TypeError: Cannot call method 'replace' of undefined error deep deep deep in a callback.

That is to say the page located at "/index.html#!/places/new" never gets loaded. It dies after a successful GET, probably parsing/rendering the "places/new" template before injection.

data-ajax works ok if the pages are in the same document, and it doesn't appear to be related to my having set $locationProvider.html5Mode(false);. It also doesn't seem to be a conflict between cordova.js. I also thought maybe it was a versioning thing (I had all three libraries included separately instead of the stand alone version), but that isn't it either.

I'm at the limit of things I can try so if I get a chance I'll see if I can bootstrap a test-project quick and throw it on github so you can see what's going on.

[jvanalst]

See: https://github.com/jvanalst/jqm-angular-form-ajax-bug

[tbosch]

Hi, you can use plnkr.co for demos with multiple pages. I created one out of your git repo: http://plnkr.co/edit/im6AkupX3obHKfZhH9hW?p=preview

Your problem is the following: In jquery moble there is a bug when using a <form> tag in an external page (like your main.html). A workaround (which I already added to the Plunk) is to add the attribute src="" to the form. Please have a look at the end of the discussion in issue #174.

Does this solve your problem? Tobias

[jvanalst]

Yes it worked. I didn't see the work-around on the JQM issue so thank you so much for reposting it here.

[tbosch]

Your welcome :-)