Prevent duplicate rows with matrix when using ajax submit?

Question

I'm having some trouble determining a good solution to save a Matrix field using Safecracker and AJAX.

From what I see matrix creates new rows by using field_name[row_new_0][col_id_xxx] or field_name[row_id_xxxx][col_id_xxx] when editing an existing row. I would have hoped that the row_id_xxxx was just an increment and would be replaced but that's not the case, instead it's a unique id.

The form I am creating allows the user to save a form before they submit it completely and what happens is it will continue to create "new" rows once it is saved.

Any ideas on how to prevent this?

Answer 1

Here's my solution. It simply makes an additional request to the form to grab the matrix fields and reinitializes them. I had to trim this up so it may or may not work in it's entirety but you get the idea.

$(function () {

    // ajax form post
    $("button[type='submit']").bind('click', function (e) {

        // select your form
        var $form = $('#yourform');

        // submit the form
        $.ajax({
            type: "POST",
            dataType: "json",
            url: $form.attr('action'),
            data: $form.serializeArray();,
            success: function (data) {
                if (data.success) 
                {
                    reloadMatrices(); // here's the magic
                    if ($form.find('[name="action"]').val() == "submit") // your form will have multiple <button name="action"> tags with different values such as "submit" or "save"
                    { 
                        alert("Thank you for your submission! We will be contacting you shortly.");
                        window.location = "//" + window.location.hostname + "/confirmation"; // redirect to confirmation page
                    }
                }
            }
        });

    });
});

/**
 * function reloadMatrices()
 * 
 * Requests the same form and replaces all instances of a Matrix fieldtype with the new form from the request and reinitializes them.
 */
function reloadMatrices() {
    $.ajax({
        type: "GET",
        url: window.location,
        success: function (data) {
            var $data = $(data);

            // you might be able to use .load() here instead for more concise code
            $('.matrix-ee2').each(function () {
                var $this = $(this);
                $this.replaceWith($data.find("#" + $this.attr('id')));

                // reinitialize all of the matrices so they work as intended
                // IMPORTANT: requires an md5 jQuery plugin such as https://github.com/placemarker/jQuery-MD5
                window['initMatrix_' + $.md5($this.attr('id'))](); 
            });

        }
    });
}

Answer 2

This sounds pretty complicated on the account of unique row IDs.

How about a sneaky workaround, since you're using AJAX already - after saving the partial form data, including Matrix, do an AJAX request that would return a safecracker form with Matrix field rendered with {field:matrix_field} and then parse that HTML with Javascript for the row IDs that you need?