Mockjax causes interference with X-editable's AJAX update functionality

Question

Mockjax causes interference with X-editable's AJAX update functionality

$(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);
                }
            });



            
        });

When using Mockjax, the HTML element on the page gets updated but the MySQL row is not. On the other hand, without Mockjaz, the MySQL row update works but the HTML element remains unchanged.

Is there a workaround to make both the MySQL row and the HTML element update simultaneously?

Your help is greatly appreciated. Thank you!

jquery mysql ajax mockjax

Answer 1

Answer №1

I see mockjax being used in this code snippet, but isn't it typically utilized for mocking purposes only? Shouldn't ajax be the preferred method instead? Here's how you could incorporate ajax:

 $('#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 any desired message upon successful submission
    }
});

Answer 2

I see mockjax being used in this code snippet, but isn't it typically utilized for mocking purposes only? Shouldn't ajax be the preferred method instead? Here's how you could incorporate ajax:

 $('#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 any desired message upon successful submission
    }
});

Mockjax causes interference with X-editable's AJAX update functionality

Answer №1

Similar questions

A login page designed with jquery does not require resubmission

What is the best way to compare an escaped field in PHP/MySQL?

How to Invoke JavaScript Functions within jQuery Functions?

Boost the frequency of AJAX requests made by a website

What is the purpose of implementing asynchronous loading for JavaScript in my webpack setup?

Exploring Ancestors with Jquery to Find Input Fields

What steps can I take to create efficient live forms using AJAX and jQuery only?

`Trigger a page reload when redirecting`

How can I use jQuery to show the text value of a selected checkbox, dropdown menu, and flipswitch in a popup?

Ways to turn off .removeClass()

Using jQuery to validate the existence of a link

Utilizing PHP and AJAX for an Innovative Login System

Displaying group field data in one page on JQGrid when pagination is enabled

What is the best way to halt an asynchronous method as a user?

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

Anticipate the arrival of the getJSON response

Is it feasible to make Twitter's Typeahead plugin have an initial slide down or fade in effect?

Extract the URL's name using jQuery

Choosing children in jQuery can be tricky, especially when you want to avoid selecting the root element with the same name

PHP script encountering a 404 error during execution (Approximately 45 seconds in)