3

Does anyone know of a simple way to make the repeatable fields inline rather than popping up in a modal?

Just seems silly to add all this extra content and not have a simple way of seeing what you're adding unless you click one button on the page.

Would be great to tweak that code to have option to appear on the page.

Cheers John

  • Repeatable fields, where? – pl71 Jun 16 '15 at 7:00
  • @pl71 docs.joomla.org/Repeatable_form_field_type – fruppel Jun 16 '15 at 8:02
  • 1
    Good question, but there's no simple way. You would have to override the PHP form field and JS file to achieve this. Reason why it wasn't done by default was due to the name "repeatable". If someone ends up having 40 fields inline, the page length will start increasing big time ;) – Lodder Jun 16 '15 at 8:18
  • 1
    @Lodder thanks mate, yes that makes sense. I have been doing a edit.php override and then displaying it using json_decode and for each. So i still have a way around it but its just extra work :( – John Rama Jun 16 '15 at 8:39
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.

Hope this helps!

  • Thnakyou, i will check this out and get back to oyu. I have been in hospital. Peace – John Rama Jul 30 '15 at 2:35
  • IM going to have to examine this further. IS there any way i can send you my file to examine. I tried what you suggested but it broke my file. Is there any way of maybe sening you my file and you trying it with everything inline? please If this can work - this would be the best way to manage not only images but several other repeatable fields like yotube, vimeo, soundcloud players, documents and much more. Even better than WP option - and how they jut open a modal and you tick images etc... – John Rama Aug 4 '15 at 23:17
  • @JohnRama I can send you a demo component with these features in and working, then you can map it to yours. How is that? Here is a link demo component – Llewellyn Aug 5 '15 at 2:35
  • thank you!!! ill get back to oyu in the next couple of days mate :) – John Rama Aug 6 '15 at 2:47
  • @JohnRama its a pleasure. – Llewellyn Aug 14 '15 at 22:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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