Jquery mobile and knockout submit binding form

Question

I stumbled upon the seeming incompatibility between knockoutjs and jquery mobile when it comes to the behavior presentation form.

Consider the following markup:

<form data-bind="submit: myKoSubmitAction"> <!-- form fields here --> </form> 

The goal is that a knockout prevents sending / receiving a server and instead calls myKoSubmitAction. jqm will also prevent the standard submit behavior for jqm only, the reason is that the submit form is replaced with an ajax request.

Thus, while the knockout (presumably) succeeds in preventing a standard server request, it cannot prevent jqm from sending an ajax request.

I found the answer to this problem in the google group and thought that it should be on SO too. See below

Answer 1

The best solution I could find is the following custom ko binding:

 //This binding fixes apparent incompatibility between knockout and jqm ko.bindingHandlers.jqmsubmit = { init: function (el, accessor, allbindings, vm) { ko.bindingHandlers.submit.init(el, accessor, allbindings, vm); $(el).submit(function (e) { // prevent the submit behavior e.preventDefault(); e.stopPropagation(); return false; }); } }; 

Used instead of the standard ko binding view:

 <form data-bind="jqmsubmit: myKoSubmitAction"> <!-- form fields here --> </form> 

Answer 2

You can also add data-ajax="false" to the <form> element.

See Submitting Forms .