Mockjax disturbs X-editable update (AJAX)

Question

$(function(){



            //enable / disable
            $('#enable').click(function() {
                $('#user .editable').editable('http://domain.com/update.php');
            });    

            //modify buttons style
            $.fn.editableform.buttons = 
            '<button type="submit" class="btn btn-success editable-submit btn-mini"><i class="icon-ok icon-white"></i></button>' +
            '<button type="button" class="btn editable-cancel btn-mini"><i class="icon-remove"></i></button>';  

            //editables 
            $('.remarks').editable({
                url: 'http://domain.com/update.php',
                display: function(value, response) {
                //render response into element
                $(this).html(response);
                }
            });



            //ajax emulation. 
            $.mockjax({
                url: 'http://domain.com/update.php',
                responseTime: 400,
                response: function(settings) {
                this.responseText = settings.data.value;
                }
            });


        });

Without using Mockjax, the MySQL row update is working but the element in the html page is not updated.

If I use Mockjax, the element in the html page is updated but MySql row is not updated.

Are there any workaround for this?

Thank you very much.

Answer 1

Why are you using mockjax? From what I understand mockjax is just for mock up purposes only, you should be using ajax. Like so:

 $('#a').editable({
    validate: function(value) {
        if($.trim(value) == '') return 'This value is required.';
    },
    type: 'text',
    url: '/post',
    pk: '123', // id of the row in your db...
    title: 'Enter Value',
    params: function(params) {
        var data = {};
        data['id'] = line;
        data['field'] = params.name;
        data['value'] = params.value;
        return data;
    },
    ajaxOptions: {
        dataType: 'json'
    },
    display: function(value, response) {
        $(this).text(response.new_value_from_server);
    },
    success: function(response, newValue) {
        // output what ever you want here if the submit was successfull...
    }
});