Editing customized matrix fields in safecracker

Question

I have a SafeCracker form where I've hard-coded the Matrix fields to customize the way they are displayed. It is working fine as an entry form, but I'm having trouble using it as an edit field.

My safecracker tag is wrapped in a channel entries tag, so I can get the values of the form fields when editing, but using the code below, when I have multiple matrix rows, the edit field just shows a single row, but with multiple values within each field.

Is there a way to get it to display multiple rows when editing?

<div class="name_relationship">
    <input type="hidden" name="form_name_relationship[row_order][]" value="row_new_0" />
    <label for="">Name</label>
    <input type="text" name="form_name_relationship[row_new_0][col_id_14]"  value="{form_name_relationship}{name}{/form_name_relationship}"/>
<label for="">Relationship</label>
<input type="text" name="form_name_relationship[row_new_0][col_id_15]" value="{form_name_relationship}{name}{/form_name_relationship}"/>
</div>
<p><a href="#" class="button radius tiny addname">+ Add Name</a> <a href="#" class="button     radius tiny remname">&ndash; Remove Name</a></p>
<script>
$(".addname").live('click',function(e){
    e.preventDefault();
    var $name_relationship = $("div.name_relationship:eq(0)");
    var $clone = $name_relationship.clone().html().replace(/row_new_0/g,'row_new_');
    $("div.name_relationship:last").after('<div                     class="name_relationship">'+$clone+'</div>');
})
$(".remname").click(function(e){
    e.preventDefault();
    if($("div.name_relationship").length > 1)
    {
        $("div.name_relationship:last").remove();
    }
})
</script>

Answer 1

You can use Matrix’s template tags to recreate the original rows:

{form_name_relationship}
    <div class="name_relationship">
        <input type="hidden" name="form_name_relationship[row_order][]" value="row_id_{row_id}" />
        <label for="">Name</label>
        <input type="text" name="form_name_relationship[row_id_{row_id}][col_id_14]"  value="{this_col_name}"/>
        <label for="">Relationship</label>
        <input type="text" name="form_name_relationship[row_id_{row_id}][col_id_15]" value="{that_col_name}"/>
    </div>
{/form_name_relationship}

Replace “{this_col_name}” and “{that_col_name}” with the actual column names.