Gfrktyl

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>

Simplifying redundancy

You could do something like iterating over the id 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 to 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)));