Safecracker Matrix only publishing one row, even if more are added

Question

I am trying to use Matrix within a Safecracker field. I am able to submit entries successfully. However I can only submit one row to the custom matrix field. Even if I have added more than one row in my form and return a successful submission.

Here is the HTML, JS and appended HTML code in question. Help is extremely appreciated. I'm under a serious time crunch and it's the last thing on my list.

HTML Code:

<h4>Add attendees</h4>  
<input type="hidden" data-field="ug_reg_attendees" name="ug_reg_attendees[row_order][]" value="row_new_0">
<div class="attendee_group">
   <div class="input-prepend">  
      <span class="add-on"><div class="validation-circle"></div></span>  
      <input type="text" name="ug_reg_attendees[row_new_0][col_id_52]" placeholder="First Name" />  
      <div class="message"></div>
   </div>

   <div class="input-prepend">
      <span class="add-on"><div class="validation-circle"></div></span>
      <input type="text" name="ug_reg_attendees[row_new_0][col_id_53]" placeholder="Last Name" />
      <div class="message"></div>
   </div>

   <div class="input-prepend">
      <span class="add-on"><div class="validation-circle"></div></span>
      <input type="email" name="ug_reg_attendees[row_new_0][col_id_54]" placeholder="Email Address" />
      <div class="message"></div>
   </div>
</div>

<div class="btn pill blue" id="add_attendee">
   <div class="topping">Add Attendee <strong>+</strong></div>
</div>

JS:

$("#add_attendee").live("click", function(e) {
   e.preventDefault();
   var $row = $(".attendee_group:eq(0)").last();
   var size = $(".attendee_group").length;
   var $clone = $row.clone().html().replace(/row_new_0/g, "row_new_"+size);
   $(".attendee_group:last").after("<div class='attendee_group'>"+$clone+"</div>");
});

Outputted code: (when at least 1 row is added)

<div class="input-prepend">
   <span class="add-on"><div class="validation-circle"></div></span>
   <input type="text" name="ug_reg_attendees[row_new_1][col_id_53]" placeholder="Last Name">
   <div class="message"></div>
</div>

<div class="input-prepend">
   <span class="add-on"><div class="validation-circle"></div></span>
   <input type="email" name="ug_reg_attendees[row_new_1][col_id_54]" placeholder="Email Address">
   <div class="message"></div>
</div>

Answer 1

I'm looking at an example where we did this. We did a .load in jQuery, pulling in the HTML from another template that was set up to build the HTML for the new row.

I'm seeing that we passed an updated value for each to that URL, and used that value on each -- field_name[row_new_0][col_id_X] -- for the input name, with 0, 1, 2, etc creating a new rows.

Your outputted code only shows an example of row_new_1 for the new rows, so I can't see that the other rows have incremental values..

Try switching to row_new_0, row_new_1, row_new_2 for all new rows?

Updated: We also included:

<input name="field_name[row_order][]" value="row_new_0" type="hidden" />

In each added row. I'm not sure what that is for, but I don't see it your code. We incremented that each time too. (row_new_0, row_new_1, etc)

Answer 2

Lucas,

The best way to include Matrix in your SafeCracker form is using the {field:my_field_name} variable:

{field:my_field_name}

That way it'll include all of the necessary setup for Matrix to work correctly in SafeCracker and avoids what you are running into.

-Lisa