1

In a form consisting of several steps generated in ajax within a single page, I have to use jquery.repeater in an intermediate step.

The form code specific to the repeater is in a dedicated partial

But jquery.repeater does not work, nothing happends when i click on the add or the delete buttons, without even a single javascript error message in the console.

It works if I use this partial directly in a page without the ajax loading.

Note i use the pushing partial updates method in my ajax handler method with

return [ '#myDiv' => $this->renderPartial('mypartial') ];

Welcome for help mates.

here the code i use

and scripts declaration in the bottom of my layout

...
<!-- Scripts -->
<script src="{{ [
    'assets/javascript/jquery-3.2.1.min.js',
]|theme }}"></script>
{% framework extra %}
{% scripts %}
</body>
</html>

my partial

<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 style="display:none;">
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>

      <div data-repeater-item>
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>

    </div>

    <input data-repeater-create type="button" value="Add" />
</form>

my page

title = "Ajouter"
url = "/tableau-de-bord/espace/ajouter"
layout = "dashboard"
is_hidden = 0

[formulaireCreation]
==
function onStart()
{
    $this->addJs('assets/javascript/node_modules/jquery.repeater/jquery.repeater.js');
    $this->addJs('assets/javascript/my-repeater.js');
}
==
<div id='formulaire-creation-component-wrapper'>
    {% component 'formulaireCreation' %}
</div>

my-repeater.js

$(document).ready(function () {
    $('.repeater').repeater({

        // (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);
            }
        },
    })
});

And finally, for comparison, the code that works in a basic page

title = "repeater-test"
url = "/repeater-test"
layout = "dashboard"
is_hidden = 0
==
function onStart()
{
    $this->addJs('assets/javascript/node_modules/jquery.repeater/jquery.repeater.min.js');
    $this->addJs('assets/javascript/my-repeater.js');
}
==
<form class="repeater">

    <div data-repeater-list="group-a">

      <div data-repeater-item style="display:none;">
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>

      <div data-repeater-item>
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>

    </div>

    <input data-repeater-create type="button" value="Add" />

</form>
pat-och
  • 345
  • 3
  • 17

2 Answers2

0

ok i found a solution, not very elegant but it works

when the partial with the repeater is loaded in ajax, It is as if the page forgot the script declared with addJS at the page level, so I declared the script using <script src="/path/to/myscript.js"> at the end of the partial directly and it works

tried to inject the script with {% put scripts %} but doesn't work

pat-och
  • 345
  • 3
  • 17
  • Have you tried using `{% scripts %}` instead of `{% put scripts %}`? – Pratyush Pundir May 15 '17 at 13:44
  • no but seems strange, according to the october cms documentation. `This tag should appear once only in a given page cycle to prevent duplicated references.` and i already use `{% scripts %}` just before the `

    ` in my layout

     – pat-och May 15 '17 at 16:34
  • other help from octobercms slack chat: @pat-och: the problem is in your my-repeater.js, on document ready you are looking for .repeater elements but at first it’s not there. so you need to wrap that function in a new function and call that new function after updating through ajax – pat-och May 15 '17 at 16:41
  • Honestly speaking, I would use something like vuejs for stuff like this. It's going to be laughably simple using components. – Pratyush Pundir May 15 '17 at 20:40
  • Additionally you could see if jquery-repeater triggers any custom events and then listen for those events before running your custom js instead of relying on document.ready() – Pratyush Pundir May 15 '17 at 20:48
0

Working with JqueryRepeater is like working in hell. Visually it is fantastic but coding something other than the basic is like a kick in the -gg- everytime!

It seems that jQuery don't detect well the new fields of each row, but working with pure JavaScript is possible.

For example, to change the value of a new generated input...

Document. getElementsByName ( "your-data-repeater-list[1][field_name]")[0].Value =  "My new value";

Where [1] is the new repeater num

I have spent several days (and nights!) working with this component and with some patience it is possible to do whatever you want.

Have fun!

Diacono
  • 21
  • 3