Search code examples
javascriptjqueryajaxx-editable

X-Editable AJAX request not being sent


I'm using the X-Editable jquery plugin and i'm going crazy over here. I can't get the AJAX request to being sent on submit. I have send on always but looking at my network i can't see any requests being sent.

Below is my code

<form class="form-horizontal form-editable">
   <div class="row padding-top-20">
   <div class="col-md-4">
      <div class="form-group">
         <label class="col-md-3 control-label text-left" for="client-fname">First Name:</label>
         <div class="col-md-9 editable-cont col-no-padding-left">
            <a href="#" id="client-fname" data-type="text" data-name="fname" class="editable-item"><?php echo $client['fname'];?></a>
            <span class="editable-span"><a href="#" class="text-red underline editable-edit">edit</a></span>
         </div>
      </div>
      <div class="form-group">
         <label class="col-md-3 control-label text-left" for="client-lname">Last Name:</label>
         <div class="col-md-9 editable-cont col-no-padding-left">
            <a href="#" id="client-lname" data-type="text" data-name="lname" class="editable-item"><?php echo $client['lname'];?></a>
            <span class="editable-span"><a href="#" class="text-red underline editable-edit">edit</a></span>
         </div>
      </div>
   </div>
   <button type="button" class="btn btn-success submit-editable">Save</button>
   <button type="button" class="btn btn-default cancel-editable">Cancel</button>
</form>

<script>
    $(function(){
    $.fn.editable.defaults.mode = 'inline';
            $.fn.editable.defaults.send = "always";
            $.fn.editable.defaults.url = "/post.php";
            $.fn.editable.defaults.ajaxOptions = {type: "POST"};
            $('.editable-item').editable({
                type: 'text',
                emptytext: 'Click to Edit',
                showbuttons: false,
                toggle: 'manual',
                onblur: 'ignore',
                success: function(response, newValue) {
                    alert(response);
                }
            }).on('click', function (e) {
                e.stopPropagation();
                e.preventDefault();
                $('#editable-buttons-container').show();
                $('.editable-item').editable('show');
                $('.editable-edit').hide();
            });

            $('.submit-editable').on('click',function(){
                alert('submit mofo');
                $('.editable-item').editable().submit();
            });
    });
</script>

Solution

  • Same issue. Found another way that set defaults and its working:

    $.extend($.fn.editable.defaults, {
        ajaxOptions: {
            type: 'PUT',
            dataType: 'script'
        }
    });