0
\$\begingroup\$

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>
\$\endgroup\$
1
\$\begingroup\$

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))); 
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.