How to update front end Craft new row - stuck on JavaScript

Question

I'm building out a front end entry form with a Natrix and everything is coming along fine. However when users create a new row each new row needs to be unique in order to be saved. This is where I'm stuck.

Simplified HTML:

<div class="matrixblock">
    <p>
    block id: new_0
</p>

<div class="col-sm-6">
    <input type="text" name="fields[staffProfiles][new_0][fields][employeeName]" value="" placeholder="Full Name">
</div><!-- /.col-sm-6 -->
<div class="col-sm-6">
    <input type="text" name="fields[staffProfiles][new_0][fields][jobTitle]" value=""  placeholder="Job Title">
</div><!-- /.col-sm-6 -->


<a href="" class="remove-row"><i class="fa fa-times"></i></a>


</div><!-- /.matrixblock -->

JS:

var blocknum = 0;

// add a new person
$('#addPerson').click(function(e){
    e.preventDefault();
    console.log('clicked addPerson');

    //iterate blocknumber
    blocknum = blocknum+= 1;
    console.log('blocknum is ' + blocknum);

    var newPerson = "<div class='newperson'></div>";
    $('.newBlock').append(newPerson);
    $('.newBlock .newperson:last-child').load('/store/newperson');

    // replace all instances of new_0 with new1, new2 etc.. as rows added
    // this line doesn't do anything, why?
    $('.newBlock .newperson:last-child').replace('new_0','new' + blocknum);

})

console.log('blocknum is ' + blocknum); is showing that the blocknum is increasing with each row. the Replace in the last line of javascript is just not doing anything.

The new person row gets added via ajax correctly but each time it's added [new_0] needs to be unique, but nothing I'm trying is working.

Answer 1

You can get the number of rows you already have from the DOM, then use that to determine how many you'll have after you add a new one.

$('#addPerson').click(function(e){
  e.preventDefault();
  console.log('clicked addPerson');

  var newPerson = "<div class='newperson'></div>";
  $('.newBlock').append(newPerson);
  $('.newBlock .newperson:last-child').load('/store/newperson');

  var blocknum = $('.newBlock .newperson').length;
  $('.newBlock .newperson:last-child').replace('new_0','new' + blocknum);
});

Also note that in your example you were replacing using $blocknum, but you had defined it to be blocknum without the $. You've already fixed this :)

Hope this works out!

Answer 2

In the end I didn't get this working with replacing the new_0 in the fields array of the ajax content.

I opted instead to limit adding new people to one at a time by having the new person button fade out when clicked and a message appearing stating:

You must save your entry to add more staff

In the end this forces the store manager to save their work more often, which is always a good thing, and keeps the javascript simpler. Functionality that is required is working. Would be nice to add multiple people at a time, but for now a solution that everyone is happy with.

new javascript code is below. the .addMorePeople fadein contains the message about saving the entry.

// add a new person
$('#addPerson').click(function(e){
    e.preventDefault();
    console.log('clicked addPerson');

    var newPerson = "<div class='newperson'></div>";
    $('.newBlock').append(newPerson);
    $('.newBlock .newperson:last-child').load('/store/newperson');

    // hide add button so that they must save to add more
    $(this).fadeOut("slow", function(){
        $this.remove();
    });
    $('.addMorePeople').fadeIn('slow');

    {# load redactor on the new row #}
    {% includeJs "$('.newperson:last-child .employeeBio').redactor();" %}

})