1

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>

2 Answers 2

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)

5
  • Thanks for your quick response! I think there may be a bit of confusion. It is outputting like it should. See it in action here. link I believe it's rendering correctly but can't wrap my brain around why it's only taking the first row.
    – Lucas JD
    Feb 8, 2013 at 19:17
  • I just reactivated this site to see the generated HTML and there was an error in my response. I've updated that. Each row should have an incremental value. Are you using Firebug or Chrome or Safari's Developer Tools to see the generated HTML? Are you actually getting new values on each of the new rows? Or are they all row_1? Did you include the row_order field? Feb 8, 2013 at 19:30
  • They are getting new values, that is what is confusing to me. I've made sure that more than one row can be added in the settings for that custom matrix field in the CP as well.
    – Lucas JD
    Feb 8, 2013 at 19:53
  • You're cloning .attendee_group, right? I think this 1 needs to be inside of .attendee_group too: <input name="ug_reg_attendees[row_order][]" ... /> Feb 8, 2013 at 20:01
  • Whoops you said inside!
    – Lucas JD
    Feb 8, 2013 at 20:16
1

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

3
  • We've done that before when we needed to use our own markup & styles. Designers and such :) Feb 8, 2013 at 18:09
  • 1
    That makes sense, Mark. If that's the case here then it may be best for him to use the variable first, then use the source from view source to build his form or at least compare to. :)
    – Lisa
    Feb 8, 2013 at 18:10
  • Thanks for the tip. Mark is right :) We designers always like to make things difficult. Problem is I'm making it difficult for myself this time!
    – Lucas JD
    Feb 8, 2013 at 19:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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