Updating values in a database

Question

I'm using standard jQuery Ajax to update values in the database and reflect the result in an output. This repetition seems like bad practice and I don't know enough about jQuery to consolidate this correctly.

jQuery

        $("#vendorticket").change(function() { //Input/Select tag
            var output = ("#vendorticket-result"); 
            $.ajax({
                url: 'includes/view.func.php', // Updating database based on specified row id, column, and value
                type: 'post',
                data: {
                    vendorticket: $(this).val(),
                    column: 'vendorticket',
                    id: 15
                },
                success: function(result) {
                    $(output).html(result); //Output span either "Saved" or "Save Failed"
                }
            });
        });
​
//Rinse & Repeat...

        $("#priority").change(function() {
            var output = ("#priority-result"); 
            $.ajax({
                url: 'includes/view.func.php',
                type: 'post',
                data: {
                    priority: $(this).val(),
                    column: 'priority',
                    id: 15
                },
                success: function(result) {
                    $(output).html(result);
                }
            });
        });
​
        $("#assignedto").change(function() {
            var output = ("#assignedto-result");
            $.ajax({
                url: 'includes/view.func.php',
                type: 'post',
                data: {
                    assignedto: $(this).val(),
                    column: 'assignedto',
                    id: 15 //
                },
                success: function(result) {
                    $(output).html(result);
                }
            });
        });
​
    });

HTML

<input type="text" id="assignedto" /><span id="assignedto-result"></span>

<input type="text" id="priority" /><span id="priority-result"></span>

<input type="text" id="vendorticket" /><span id="vendordicket-result"></span>

Answer 1

Simplifying redundancy

You could do something like iterating over the id attribute of each input element, calling a function to add the handler.

['priority', 'assignedTo', 'vendorticket'].forEach(addChangeHandler);

function addChangeHandler(inputId) {
    $("#" + inputId).change(function() { //Input/Select tag
        var output = ("#" + inputId + "-result"); 
        var data = {
            column: inputId,
            id: 15
        };
        data[inputId] = $(this).val()
        $.post({
            url: 'includes/view.func.php', // Updating database based on specified row id, column, and value
            data: data,
            success: function(result) {
                $(output).html(result); //Output span either "Saved" or "Save Failed"
            }
        });
    }); 
}

Note the code uses the shortcut method $.post() to allow skipping the request type.

But a simpler technique would be to add a generic change handler that would be called after any change event on any of those inputs. This can be done by combining the selectors passed to the jQuery function:

$('#priority, #assignedTo, #vendorticket')

This can then be used to add a generic function handler that can get the id of the input using .attr('id'):

$('#priority, #assignedTo, #vendorticket').change(changeHandler);
function changeHandler() {
    var inputId = $(this).attr('id');
    var output = ("#" + inputId + "-result"); 
    var data = {
        column: inputId,
        id: 15
    };
    data[inputId] = $(this).val()
    $.post({
        url: 'includes/view.func.php', // Updating database based on specified row id, column, and value
        data: data,
        success: function(result) {
            $(output).html(result); //Output span either "Saved" or "Save Failed"
        }
    }); 
}

If you had a lot more input elements to add to that list, a class could be applied and they could be selected by class name (e.g. $('.inputToWatch')) or else if they were all child elements of a container then a child selector might simplify things (e.g. $('#containerElement input').

Simplifying the success function

The success function could be replaced with a bound function - i.e. a function bound to $(output).html:

success: $().html.bind($(output))

These changes are visible in this phpfiddle.

You could also use the other syntax of $.ajax() i.e. Query.post( url [, data ] [, success ] [, dataType ] )

$.post('includes/view.func.php', data, $().html.bind($(output)));