{"title":"Personnalisations de JavaScript dans l’interface d’administration","version":"1.11","locale":"fr","docname":"ref/contrib/admin/javascript","url":"/fr/1.11/ref/contrib/admin/javascript/","canonical":"https://djangodocs.dev/fr/1.11/ref/contrib/admin/javascript/","summary":"Événements de sous-formulaires Lien vers cette rubrique # Il peut être souhaitable d’exécuter du code JavaScript lorsqu’un sous-formulaire est ajouté ou enlevé dans…","html":"<h1>Personnalisations de JavaScript dans l’interface d’administration<a class=\"heading-anchor\" href=\"#javascript-customizations-in-the-admin\"><span class=\"visually-hidden\">Lien vers cette rubrique</span><span aria-hidden=\"true\">#</span></a></h1>\n<section id=\"inline-form-events\">\n<span id=\"admin-javascript-inline-form-events\"></span><h2>Événements de sous-formulaires<a class=\"heading-anchor\" href=\"#inline-form-events\"><span class=\"visually-hidden\">Lien vers cette rubrique</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>Il peut être souhaitable d’exécuter du code JavaScript lorsqu’un sous-formulaire est ajouté ou enlevé dans un formulaire de modification du site d’administration. Les événements jQuery <code class=\"docutils literal notranslate\"><span class=\"pre\">formset:added</span></code> et <code class=\"docutils literal notranslate\"><span class=\"pre\">formset:removed</span></code> permettent de faire cela. Le gestionnaire d’événement reçoit trois paramètres :</p>\n<ul class=\"simple\">\n<li><p><code class=\"docutils literal notranslate\"><span class=\"pre\">event</span></code> est l’événement jQuery.</p></li>\n<li><p><code class=\"docutils literal notranslate\"><span class=\"pre\">$row</span></code> est la ligne ajoutée (ou supprimée).</p></li>\n<li><p><code class=\"docutils literal notranslate\"><span class=\"pre\">formsetName</span></code> est le jeu de formulaires auquel appartient la ligne.</p></li>\n</ul>\n<p>L’événement est déclenché en utilisant l”:ref:<a href=\"#id1\"><span class=\"problematic\" id=\"id2\">`</span></a>espace de noms django.jQuery &lt;contrib-admin-jquery&gt; <a href=\"#id3\"><span class=\"problematic\" id=\"id4\">`</span></a>.</p>\n<p>Dans votre gabarit <code class=\"docutils literal notranslate\"><span class=\"pre\">change_form.html</span></code> personnalisé, étendez le bloc <code class=\"docutils literal notranslate\"><span class=\"pre\">admin_change_form_document_ready</span></code> et ajoutez la fonction d’écoute avec ce code :</p>\n<div class=\"code-block\" data-language=\"html+django\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Django template</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Django template code\"><code><span class=\"cp\">{%</span> <span class=\"k\">extends</span> <span class=\"s1\">&#39;admin/change_form.html&#39;</span> <span class=\"cp\">%}</span>\n<span class=\"cp\">{%</span> <span class=\"k\">load</span> <span class=\"nv\">static</span> <span class=\"cp\">%}</span>\n\n<span class=\"cp\">{%</span> <span class=\"k\">block</span> <span class=\"nv\">admin_change_form_document_ready</span> <span class=\"cp\">%}</span>\n<span class=\"cp\">{{</span> <span class=\"nb\">block</span><span class=\"nv\">.super</span> <span class=\"cp\">}}</span>\n<span class=\"p\">&lt;</span><span class=\"nt\">script</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;text/javascript&quot;</span> <span class=\"na\">src</span><span class=\"o\">=</span><span class=\"s\">&quot;</span><span class=\"cp\">{%</span> <span class=\"k\">static</span> <span class=\"s1\">&#39;app/formset_handlers.js&#39;</span> <span class=\"cp\">%}</span><span class=\"s\">&quot;</span><span class=\"p\">&gt;&lt;/</span><span class=\"nt\">script</span><span class=\"p\">&gt;</span>\n<span class=\"cp\">{%</span> <span class=\"k\">endblock</span> <span class=\"cp\">%}</span>\n</code></pre></div>\n<figure class=\"code-block code-block-captioned\" data-language=\"javascript\"><figcaption class=\"code-block-caption\"><code>app/static/app/formset_handlers.js</code></figcaption><div class=\"code-block-toolbar\"><span class=\"code-block-language\">JavaScript</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"app/static/app/formset_handlers.js\"><code><span class=\"p\">(</span><span class=\"kd\">function</span><span class=\"p\">(</span><span class=\"nx\">$</span><span class=\"p\">)</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">    </span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"nb\">document</span><span class=\"p\">).</span><span class=\"nx\">on</span><span class=\"p\">(</span><span class=\"s1\">&#39;formset:added&#39;</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"kd\">function</span><span class=\"p\">(</span><span class=\"nx\">event</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nx\">$row</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nx\">formsetName</span><span class=\"p\">)</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">        </span><span class=\"k\">if</span><span class=\"w\"> </span><span class=\"p\">(</span><span class=\"nx\">formsetName</span><span class=\"w\"> </span><span class=\"o\">==</span><span class=\"w\"> </span><span class=\"s1\">&#39;author_set&#39;</span><span class=\"p\">)</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">            </span><span class=\"c1\">// Do something</span>\n<span class=\"w\">        </span><span class=\"p\">}</span>\n<span class=\"w\">    </span><span class=\"p\">});</span>\n\n<span class=\"w\">    </span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"nb\">document</span><span class=\"p\">).</span><span class=\"nx\">on</span><span class=\"p\">(</span><span class=\"s1\">&#39;formset:removed&#39;</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"kd\">function</span><span class=\"p\">(</span><span class=\"nx\">event</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nx\">$row</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nx\">formsetName</span><span class=\"p\">)</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">        </span><span class=\"c1\">// Row removed</span>\n<span class=\"w\">    </span><span class=\"p\">});</span>\n<span class=\"p\">})(</span><span class=\"nx\">django</span><span class=\"p\">.</span><span class=\"nx\">jQuery</span><span class=\"p\">);</span>\n</code></pre></figure>\n<p>Deux points à garder en tête :</p>\n<ul class=\"simple\">\n<li><p>Le code JavaScript doit se trouver dans un bloc de gabarit si vous héritez de <code class=\"docutils literal notranslate\"><span class=\"pre\">admin/change_form.html</span></code>, sinon il ne sera pas produit dans le code HTML final.</p></li>\n<li><p><code class=\"docutils literal notranslate\"><span class=\"pre\">{{</span> <span class=\"pre\">block.super</span> <span class=\"pre\">}}</span></code> est ajouté car le bloc <code class=\"docutils literal notranslate\"><span class=\"pre\">admin_change_form_document_ready</span></code> contient du code JavaScript pour gérer diverses opérations dans le formulaire de modification et que nous avons besoin que ce contenu apparaisse aussi.</p></li>\n</ul>\n<p>Il est parfois utile de travailler avec des greffons <code class=\"docutils literal notranslate\"><span class=\"pre\">jQuery</span></code> qui ne sont pas inscrits dans l’espace de noms <code class=\"docutils literal notranslate\"><span class=\"pre\">django.jQuery</span></code>. Pour faire cela, changez simplement la façon dont le code écoute les événements. Au lieu d’envelopper la fonction d’écoute dans l’espace de noms <code class=\"docutils literal notranslate\"><span class=\"pre\">django.jQuery</span></code>, écoutez simplement l’événement qui est déclenché depuis là. Par exemple :</p>\n<div class=\"code-block\" data-language=\"html+django\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Django template</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Django template code\"><code><span class=\"cp\">{%</span> <span class=\"k\">extends</span> <span class=\"s1\">&#39;admin/change_form.html&#39;</span> <span class=\"cp\">%}</span>\n<span class=\"cp\">{%</span> <span class=\"k\">load</span> <span class=\"nv\">static</span> <span class=\"cp\">%}</span>\n\n<span class=\"cp\">{%</span> <span class=\"k\">block</span> <span class=\"nv\">admin_change_form_document_ready</span> <span class=\"cp\">%}</span>\n<span class=\"cp\">{{</span> <span class=\"nb\">block</span><span class=\"nv\">.super</span> <span class=\"cp\">}}</span>\n<span class=\"p\">&lt;</span><span class=\"nt\">script</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;text/javascript&quot;</span> <span class=\"na\">src</span><span class=\"o\">=</span><span class=\"s\">&quot;</span><span class=\"cp\">{%</span> <span class=\"k\">static</span> <span class=\"s1\">&#39;app/unregistered_handlers.js&#39;</span> <span class=\"cp\">%}</span><span class=\"s\">&quot;</span><span class=\"p\">&gt;&lt;/</span><span class=\"nt\">script</span><span class=\"p\">&gt;</span>\n<span class=\"cp\">{%</span> <span class=\"k\">endblock</span> <span class=\"cp\">%}</span>\n</code></pre></div>\n<figure class=\"code-block code-block-captioned\" data-language=\"javascript\"><figcaption class=\"code-block-caption\"><code>app/static/app/unregistered_handlers.js</code></figcaption><div class=\"code-block-toolbar\"><span class=\"code-block-language\">JavaScript</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"app/static/app/unregistered_handlers.js\"><code><span class=\"nx\">django</span><span class=\"p\">.</span><span class=\"nx\">jQuery</span><span class=\"p\">(</span><span class=\"nb\">document</span><span class=\"p\">).</span><span class=\"nx\">on</span><span class=\"p\">(</span><span class=\"s1\">&#39;formset:added&#39;</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"kd\">function</span><span class=\"p\">(</span><span class=\"nx\">event</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nx\">$row</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nx\">formsetName</span><span class=\"p\">)</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">    </span><span class=\"c1\">// Row added</span>\n<span class=\"p\">});</span>\n\n<span class=\"nx\">django</span><span class=\"p\">.</span><span class=\"nx\">jQuery</span><span class=\"p\">(</span><span class=\"nb\">document</span><span class=\"p\">).</span><span class=\"nx\">on</span><span class=\"p\">(</span><span class=\"s1\">&#39;formset:removed&#39;</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"kd\">function</span><span class=\"p\">(</span><span class=\"nx\">event</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nx\">$row</span><span class=\"p\">,</span><span class=\"w\"> </span><span class=\"nx\">formsetName</span><span class=\"p\">)</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">    </span><span class=\"c1\">// Row removed</span>\n<span class=\"p\">});</span>\n</code></pre></figure>\n</section>","rootId":"javascript-customizations-in-the-admin","toc":[{"title":"Événements de sous-formulaires","anchor":"inline-form-events","children":[]}],"breadcrumbs":[{"docname":"ref/index","title":"Référence de l’API","url":"/fr/1.11/ref/"},{"docname":"ref/contrib/index","title":"Paquets contrib","url":"/fr/1.11/ref/contrib/"},{"docname":"ref/contrib/admin/index","title":"Le site d’administration de Django","url":"/fr/1.11/ref/contrib/admin/"}],"prev":{"docname":"ref/contrib/admin/admindocs","title":"Le générateur de documentation de l’administration de Django","url":"/fr/1.11/ref/contrib/admin/admindocs/"},"next":{"docname":"ref/contrib/auth","title":"django.contrib.auth","url":"/fr/1.11/ref/contrib/auth/"},"formats":{"html":"/fr/1.11/ref/contrib/admin/javascript/","markdown":"/fr/1.11/ref/contrib/admin/javascript.md","json":"/fr/1.11/ref/contrib/admin/javascript.json"},"source":"https://github.com/django/django/blob/stable/1.11.x/docs/ref/contrib/admin/javascript.txt","official":"https://docs.djangoproject.com/fr/1.11/ref/contrib/admin/javascript/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0","1.11","1.10","1.9"],"inLocales":["en","fr","ja","id","pt-br","ko","es","el","pl"]}