How to create a table with the repeatable field values directly under the button that opens the modal?

Question

I would like to see the values in my repeatable field before opening it in the modal. Directly under the button that opens the modal.

Then once I open it and made changes these changes should also reflect immediately in the table.

Answer 1

Well to do this you will need to add the following code to the footer of your edit.php file in the view folder.

jQuery('input.form-field-repeatable').on('weready', function(e, value){
    jQuery('.save-modal-data').text('Done');
}).on('value-update', function(e, value){
    if (value)
    {
        buildTable(value,e.currentTarget.id);
    }
});

The following JavaScript can be added to any JavaScript file that is also loaded on this page.

function buildTable(array,id){
    jQuery('#table_'+id).remove();
    jQuery('#'+id).closest('.control-group').append('<table style="margin: 5px 0 20px;" class="table" id="table_'+id+'">');
    jQuery('#table_'+id).append(tableHeader(array));
    jQuery('#table_'+id).append(tableBody(array));  
    jQuery('#table_'+id).append('</table>');
}

function tableHeader(array)
{
  var header = '<thead><tr>';
    jQuery.each(array, function(key, value) {
         header += '<th style="padding: 10px; text-align: center; border: 1px solid rgb(221, 221, 221);">'+capitalizeFirstLetter(key)+'</th>';
    });
    header += '</tr></thead>';
  return header;
}

function tableBody(array)
{
    var body = '<tbody>';
    var rows = new Array();
    jQuery.each(array, function(key, value) {
        jQuery.each(value, function(i, line) {
      if( rows[i] === undefined ) {
        rows[i] = '<td style="padding: 10px; text-align: center; border: 1px solid rgb(221, 221, 221);">' + line + '</td>';
      }
      else
      {
        rows[i] = rows[i] + '<td style="padding: 10px; text-align: center; border: 1px solid rgb(221, 221, 221);">' + line + '</td>';
      }
        });
    });
  // now load to body the rows
  jQuery.each(rows, function(a, row) {
     body += '<tr>' + row + '</tr>';
    });

    body += '</tbody>';

  return body;

}

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
} 

Then to make sure the table gets build on page load after you saved the item, add this JavaScript as well.

jQuery(document).ready(function()
{
    // set up table for this repeatable field
    var values_a = jQuery('#jform_percentmale').val();
    if (values_a)
    {
        values_a = jQuery.parseJSON(values_a);
        buildTable(values_a,'jform_percentmale');
    }

    // set up table for this repeatable field
    var values_b = jQuery('#jform_percentfemale').val();
    if (values_b)
    {
        values_b = jQuery.parseJSON(values_b);
        buildTable(values_b,'jform_percentfemale');
    }
});

In this last little code snippet you should remember to replace my field id's with those of your own.

I have assumed that you are staying inside the Joomla API and its conventions in creating your repeatable field. If you have customized things in any way you will need to adapt this code to those custom changes you've made.

Here I have a demo component on GitHub that has this implementation take a look also at the JavaScript and other scripts related.

Hope this helps someone :)