Build repeater for group of fields

[CristianoMendes]

Hi all

I’m trying to build a repeater function using F7 v7. Can anyone give some ideas how to do so?

Here what I’ve already tried:

Using the $f7.request() I’m calling a “placeholder file”, this file is pure HTML. After I get the result os this request, I tried to append this HTML inside of the page using the $f7.$('selector').append().

The idea it self almost works, but when the HTML is appended into selector, seams that the new HTML is missing classes and ids.

Here my JS inside the page:

<script>
	export default (props, { $update, $f7, $el, $theme, $on }) => {
		let section = 1;

		function add_new( section ){
			$f7.request({
				method: 'get',
				url: '../pages/inspection/placeholders/2-filter.f7',
			}).then((res) => {
				let html = {
					section: section,
					content: $f7.$( res.data.replaceAll('${section}', section) )
				}

				$f7.$('form').append( html.content );
			});
			$update();
		}

		$on('pageInit', (event, page) => {
			console.log( $f7 );

			add_new( section );

			$f7.$('#add_filter').on('click', function(){
				section++;

				add_new( section );
			});
		});

		return $render;
	}
</script>

And in my page application I got this result:

Look how the HTML structure after append looks like:

And how should be (this is the “placeholder template file”)

Sandbox demo (updated)

Does anyone have any ideal how to build this repeater function or what’s happening with these missing parts?

Thank you

[snowbeat]

I think you need to append you html directly into <ul> instead of <form>

[CristianoMendes]

Sounds entrusting @snowbeat . But I just tried and still removing some IDs and classes after appended it’s really weird

[snowbeat]

You should create a CodeSanbox of your problem so that we can check it together (find everything in the “How to ask questions” section)

[CristianoMendes]

Sure, there you go: code sandbox example. The first block is how it should be and the second block, is after the request/append

[nolimits4web]

At first, you have an invalid HTML layout in your code. <li> can ONLY be a child of <ul> (or <ol>), in your code in many places it is a child of <div>

Second, when you “append” HTML content to the page, any template literals won’t be parsed and won’t work here. To make it work correctly. You need to load/request the DATA, not the HTML code/layout, and make HTML layout from that DATA in your template. Like here dreamy-microservice-ymxtb9

[CristianoMendes]

Worked like a charm! Thank you @nolimits4web.