How to re-render the form data after successful AJAX request using jQuery

Question

I have a template which is rendered dynamically from Luci. If any of the fields are modified, on click of save, i am making a jQuery AJAX post call which updates the data in back-end and returns response to callback of ajax.
If any of the field is changed after the view is loaded, I am changing the color of field by comparing the current values from default value and re-setting the color if original is entered again.Getting the default value from jquery.

// Change color of the modified fields
$("input").on("keyup mouseup", function () {
    var fieldType = $(this).attr("type");
    if (fieldType === "text" || fieldType === "password") {
       if ($(this)[0].defaultValue !== $(this)[0].value) {
          $(this).css("background-color", "#ffc");
       } else {
          $(this).css("background-color", "white");
       }
    }
});

Currently, the view shows the new values since the page is not re-loaded. I am expecting the view(form data) alone to be re-rendered with new values since the changed fields still have #ffc color set. I also need the defaultValue of the input tag to be updated with new value.

How can I re-render the form alone without re-loading the page?

Sample of my html page

<%- 
local uci = require("luci.model.uci")
function generateRowsFunc()
    local itr = 0
    uci:foreach('accounts','account',
        function(section)
            write('<tr><td><input type="text" name="full_name_'..itr..'" value="'..section["full_name"]..'"></td>'..
                '<td><input type="text" name="username_'..itr..'" value="'..section["username"]..'"></td>'..
                '<td><input type="password" name="password_'..itr..'" value="'..section["password"]..'"></td></tr>')
        end 
    )
end
-%>
<%+header%>

<div class="cbi-section row-section">
    <form name="saveSetting">
        <div>
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Select</th>
                        <th>Full Name</th>
                        <th>Username</th>
                        <th>Password</th>
                    </tr>
                </thead>
                <tbody>
                    <% generateRowsFunc() %>
                </tbody>
            </table>
        </div>
    </form>
    <input type="button" id="save" value="<%:Save%>" class="cbi-login-button">
    <input type="reset" id="cancel" value="<%:Cancel%>" class="cbi-login-button">
</div>

<%+footer%>

Sample of my jQuery

$("#save").click(function () {
    $.ajax({
        type: 'POST',
        url: 'save',
        data: $('form[name="saveSetting"]').serializeArray();,
        success: function (res) {
            console.log("Ajax success", res); // Saved successfully
        },
        error: function (err) {
            console.log("Ajax failed", err);
        }
    });
});

How to re-render the form data after successful AJAX request using jQuery

0 Answers0