0

this jquery code works fine (demo codepen ): https://codepen.io/matoeil/pen/XxapEL

jquery

var $exposed_form=$('.views-exposed-form').clone();
$exposed_form.prependTo('.pagerer-right-pane');

html

<form class="views-exposed-form grid-x grid-margin-x" data-drupal-selector="views-exposed-form-users-index-page-1" action="/en/directory" method="get" id="views-exposed-form-users-index-page-1" accept-charset="UTF-8">


<!-- THEME DEBUG -->
<!-- THEME HOOK: 'views_exposed_form' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-exposed-form.html.twig' -->


<!-- THEME DEBUG -->
<!-- THEME HOOK: 'form_element' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/form/form-element.html.twig' -->
<div class="js-form-item form-item js-form-type-textfield form-item-search-api-fulltext js-form-item-search-api-fulltext cell small-12 medium-6">


<!-- THEME DEBUG -->
<!-- THEME HOOK: 'form_element_label' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/form/form-element-label.html.twig' -->
<label for="edit-search-api-fulltext">recherche par nom</label>
<!-- END OUTPUT from 'core/themes/stable/templates/form/form-element-label.html.twig' -->




<!-- THEME DEBUG -->
<!-- THEME HOOK: 'input__textfield' -->
<!-- FILE NAME SUGGESTIONS:
   * input--textfield.html.twig
   x input.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/form/input.html.twig' -->
<input data-drupal-selector="edit-search-api-fulltext" type="text" id="edit-search-api-fulltext" name="search_api_fulltext" value="" size="30" maxlength="128" class="form-text">

<!-- END OUTPUT from 'core/themes/stable/templates/form/input.html.twig' -->


        </div>

<!-- END OUTPUT from 'core/themes/stable/templates/form/form-element.html.twig' -->



<!-- THEME DEBUG -->
<!-- THEME HOOK: 'form_element' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/form/form-element.html.twig' -->
<div class="js-form-item form-item js-form-type-select form-item-items-per-page js-form-item-items-per-page cell small-12 medium-6">


<!-- THEME DEBUG -->
<!-- THEME HOOK: 'form_element_label' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/form/form-element-label.html.twig' -->
<label for="edit-items-per-page">VOIR</label>
<!-- END OUTPUT from 'core/themes/stable/templates/form/form-element-label.html.twig' -->




<!-- THEME DEBUG -->
<!-- THEME HOOK: 'select' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/form/select.html.twig' -->
<select data-drupal-selector="edit-items-per-page" id="edit-items-per-page" name="items_per_page" class="form-select"><option value="10" selected="selected">10</option><option value="20">20</option><option value="50">50</option><option value="100">100</option></select>
<!-- END OUTPUT from 'core/themes/stable/templates/form/select.html.twig' -->


        </div>

<!-- END OUTPUT from 'core/themes/stable/templates/form/form-element.html.twig' -->



<!-- THEME DEBUG -->
<!-- THEME HOOK: 'container' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/form/container.html.twig' -->
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper cell small-12 medium-6" id="edit-actions">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'input__submit' -->
<!-- FILE NAME SUGGESTIONS:
   * input--submit.html.twig
   x input.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/form/input.html.twig' -->
<input data-drupal-selector="edit-submit-users-index" type="submit" id="edit-submit-users-index" value="Apply" class="button js-form-submit form-submit">

<!-- END OUTPUT from 'core/themes/stable/templates/form/input.html.twig' -->

</div>

<!-- END OUTPUT from 'core/themes/stable/templates/form/container.html.twig' -->



<!-- END OUTPUT from 'core/themes/stable/templates/views/views-exposed-form.html.twig' -->


</form>

<div class="pagerer-right-pane"></div>

but crashes my browser by being called many times in the drupal context.

my library js file

(function ($, Drupal, drupalSettings) { // closure
    'use strict';

    Drupal.behaviors.directory = {
        attach: function (context) {
            $('main', context).ready(init);
            function init() {
    var $exposed_form=$('.views-exposed-form').clone();
$exposed_form.prependTo('.pagerer-right-pane');



            }
        }
    };
}(jQuery, Drupal, drupalSettings));

How to prevent globally this recurrent problem?

0
5

Don't use .ready use .once. Drupal behaviors will fire on their own, so all you need is .once.

See: https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview

When using jQuery it is standard for a large majority of situations to wrap almost all code inside the $(document).ready() function, like this:

$(document).ready(function () { // Do some fancy stuff. });

This ensures that our code will only run after the DOM has loaded and all elements are available. However with Drupal there is an alternate better method; using the functionality of Drupal.behaviors and once(). If used properly this will ensure that your code runs both on normal page loads and when data is loaded by AJAX (or BigPipe!) - but not jQuery methods like load() which should be avoided as Drupal behaviors will fail to load for loading functions other than ajax().

So you'd be looking at something like..

(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
      $('.views-exposed-form', context).once('myBehaviorUniqueKeyHere').clone().prependTo('.pagerer-right-pane');
    }
  };
}(jQuery, Drupal, drupalSettings));

I would tighten up on the selectors - there could be multiples of these on one page, so make sure you're targeting the exact thing to clone and manipulate. Example, #views-exposed-form-users-index-page-1 or using form alter to append your own unique data-attribute on the form to select by.

All thats left is using #attached property or other methods of attaching the JS script to the page or element.

3
  • thanks. is there a way to put it as a setting rather than having to put it for every selectors? – Matoeil Oct 12 '18 at 15:11
  • Like in drupalSettings? Yeah, but you feed into that from the PHP side. – Kevin Oct 12 '18 at 15:15
  • like in drupalSettings yes :), how? – Matoeil Oct 12 '18 at 15:38

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