7

I am building a custom component and all is good. I thought I would have a go at the new 3.2 repeatable xml form field feature. Although I have it working I don't quite know how to save the data.

It allows me to launch a modal and within that modal create up to 999 custom fields that I specify. But the green save button in the modal closes the modal and doesn't actually apply the save?

Am I missing something?

--

<field name="list_templates"
    type="Repeatable"
    icon="list"
    description="Main description"
    label="Main Label"
    default="">
    <fields name="params">
    <fieldset hidden="true" name="list_templates_modal" repeat="true">
            <field name="template"
                    label="Template Label"
                    size="30"
                    type="text" />
            <field name="location"
                    label="Location Label"
                    description="desc"
                    size="30"
                    type="filelist"
                    directory="media/editors/tinymce/templates"
                    exclude="index.html"
                    hide_default="true"
                    hide_none="true" />
            <field name="description"
                    label="Description Label"
                    size="30"
                    type="textarea" />
    </fieldset>
    </fields>

Cheers in advance

Jonny

  • I believe there is still a bug with the repeating form fields. Closing then reopening the modal cause duplicate entries, however you may have found another bug. Mights be worth looking into – Lodder May 17 '14 at 3:01
  • @Lodder ok cool. I just wish they added more details to the docs. I cant seem to find anything with more details. Its almost like you have to write extra code within the MVC for it to work. – Jonnypixel May 17 '14 at 3:07
  • @Lodder can you suggest another way to add repeatable fields within my component edit.php file? – Jonnypixel May 17 '14 at 3:12
  • There is no other easy way of doing it. Please provide the current code you're using for the repeating form fields – Lodder May 17 '14 at 3:15
  • 2
    @Jonnypixel Can you please post the solution as a stand-alone answer? – Valentin Despa May 17 '14 at 8:16
6

Ok here is the answer to my own question and a couple of observations and fixes.

Firstly when using the sample block of code within my custom xml component file I neglected to add the field name within my custom database table.

So for example: list_templates from the xml example

Needs to go into the MYSQL database within my component table like so:

column name: list_templates column type: TEXT

Basically because its JSON data and it fits best inside a TEXT type column.

Next...

There was the bug where when closing teh Modal and then re-opening it would duplicate the content you add.

To fix this I found the repeatable.js file located within media/system/js and made a backup copy of it. I then pasted the uncomplressed version into repeatable js and found that by changing this line:

30 // Set original content for cancel            
31 origContent = getTrs().clone();

to this

30 // Set original content for cancel            
31 origContent = getTrs();

That it actually fixes the duplication bug. I have done several tests to see if its doing the right thing and it actually is. No data loss is occurring and no data is being duplicated anymore. You can open and close the modal box as many times as you like and it will only ever show you the selections you saved.

I have tried this by closing the view file and reopening the data as well and several other methods all of which are working.

And lastly!

Because I wanted to echo the contents of the JSON within my view as a table below the select button I also added a couple of things to repetable/js to allow me to be able to save and apply after clicking the save button within the modal.

This means that when I click save on trghe repeatable fields modal the page saves and applies allowing me to collect the data directly from teh table column field to display on the page.

I achieved this by adding the following couple of things.

A function to get the view=componentnameview from the url

 // get the url values function

 function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    
    function(m,key,value) {
      vars[key] = value;
    });
    return vars;
  }

and then setting a varibale for view like so

var componentName = getUrlVars()["view"]; 

and then after line 341

I added this

Joomla.submitbutton(''+componentName+'.apply'); 

Now the modal Save button does its thing and then joomla saves the item and knows which component view its saving it to and stays on the page. This allows me to collect the table data but also saves the content within the repeatable fields modal in-case the user thought they were saving it and accidentally clicked close on the default button group of the item.

I hope I can help someone out with my answer/post. If its not appropriate to put all this in just let me know and i'll move it elsewhere.

--

  • Great work! If you can you should make a PR with your changes to the staging repo. The functionality you implemented seems like a welcome addition. – Mathew Lenning May 19 '14 at 1:34
  • @MathewLenning thanks. Yes but where do i start? im not sure even where to go to submit such things. The joomla forums and repositories seem a bit all over the place. If you can link me or direct me to teh right place i would be happy to create an account and start contributing, i think :) – Jonnypixel May 20 '14 at 2:06
  • It takes a little work to get started contributing, but once you get the hang of it, it is a lot of fun (geeky programmer type fun =^P) Here is a tutorial that should help get you started. docs.joomla.org/Git_for_Coders – Mathew Lenning May 20 '14 at 2:59
  • nice job! how do you override the original repeatable.js? as you know it's not a good practice to hack the original one. – Reza Baradaran Jan 8 '15 at 2:24

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.