X-editable with parsley call ajax twice

Question

I have this code:

$.fn.editable.defaults.mode = 'inline';
var editable = $('.x-editable').editable({
    send: 'always',
    validate: function() {
        var form = editable.next().find('form');
        if (!form.parsley().isValid()) {
            return true;
        }
    }
});
editable.on('shown', function () {
   var form = editable.next().find('form');
   form.parsley();
});

and html:

<a class="x-editable toggle-content editable editable-pre-wrapped editable-click" href="#" data-toggle-limit="110" data-toggle-limit-padding="10" data-custom-params="{&quot;inLaunchId&quot;:1489,&quot;inActivitySummaryId&quot;:71962900}" data-disabled="false" data-emptytext="Add a comment" data-escape="true" data-name="inComment" data-placeholder="" data-tpl="<textarea maxLength=&quot;4000&quot; data-parsley-pattern=&quot;^\d+$&quot;  data-popover=&quot;<p>Max length: <b>4000</b></p>&quot;></textarea>" data-type="textarea" data-url="submitURL" data-value="text">text</a>

and for unknow reason ajax request is send twice, anybody know why? How to fix this? Here is jsFiddle

Answer 1

Since you're using editable as a form, and parsley only for validation - quick fix will be disabling form submission by parsley. In this case - field will be submitted by bootstrap editable.

$.fn.editable.defaults.mode = 'inline';
var editable = $('.x-editable').editable({
    send: 'always',
    validate: function() {
    var form = editable.next().find('form');
    if (!form.parsley().isValid()) {
        return true;
    }
  }
});
editable.on('shown', function () {
  var form = editable.next().find('form');
  form.parsley().on('form:submit', function() {  
    return false; // Don't submit form 
  });;
});