FormRepeater - Laravel - Demo 1

Hi
formrepeater is not working for as I followed the instruction here :
https://preview.keenthemes.com/metronic8/demo1/documentation/forms/formrepeater/overview.html#usage
and from the official documentation here :
https://github.com/DubFriend/jquery.repeater

and this is my code (sample code from the official documentation) :

<x-base-layout>
@section('scripts')
<script src="{{ asset('demo1/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
<script>
$(document).ready(function() {
$('.repeater').repeater({
// (Optional)
// start with an empty list of repeaters. Set your first (and only)
// "data-repeater-item" with and pass the
// following configuration flag
initEmpty: true,
// (Optional)
// "defaultValues" sets the values of added items. The keys of
// defaultValues refer to the value of the input's name attribute.
// If a default value is not specified for an input, then it will
// have its value cleared.
defaultValues: {
'text-input': 'foo'
},
// (Optional)
// "show" is called just after an item is added. The item is hidden
// at this point. If a show callback is not given the item will
// have $(this).show() called on it.
show: function() {
$(this).slideDown();
},
// (Optional)
// "hide" is called when a user clicks on a data-repeater-delete
// element. The item is still visible. "hide" is passed a function
// as its first argument which will properly remove the item.
// "hide" allows for a confirmation step, to send a delete request
// to the server, etc. If a hide callback is not given the item
// will be deleted.
hide: function(deleteElement) {
if (confirm('Are you sure you want to delete this element?')) {
$(this).slideUp(deleteElement);
}
},
// (Optional)
// You can use this if you need to manually re-index the list
// for example if you are using a drag and drop library to reorder
// list items.
ready: function(setIndexes) {
$dragAndDrop.on('drop', setIndexes);
},
// (Optional)
// Removes the delete button from the first list item,
// defaults to false.
isFirstItemUndeletable: true
})
});
</script>
@endsection
<form class="repeater">
<!--
The value given to the data-repeater-list attribute will be used as the
base of rewritten name attributes. In this example, the first
data-repeater-item's name attribute would become group-a[0][text-input],
and the second data-repeater-item would become group-a[1][text-input]
-->
<div data-repeater-list="group-a">
<div data-repeater-item>
<input type="text" name="text-input" value="A" />
<input data-repeater-delete type="button" value="Delete" />
</div>
<div data-repeater-item>
<input type="text" name="text-input" value="B" />
<input data-repeater-delete type="button" value="Delete" />
</div>
</div>
<input data-repeater-create type="button" value="Add" />
</form>
</x-base-layout>

this is what the console is showing :

Thank You

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Hi,

We will fix the issue. As a workaround, In this file, could you please try to import jquery?
resources/assets/core/plugins/custom/formrepeater/formrepeater.js

window.$ = require('jquery');
require('jquery.repeater');

Thanks

The Js is imported but nothing changed. still the same problem.

Hi Mounir,

I mean in this file; resources/assets/core/plugins/custom/formrepeater/formrepeater.js
Please add the below code at the top of the file.

window.$ = require('jquery');
require('jquery.repeater');

Then please recompile the assets, npm run dev

Thanks

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(