Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2024-02-28T09:48:22+01:00Les derniers messages parus sur le forum de Zeste de Savoir.A partir d'un clique : trier des données déjà affichées dans le désordre, puis les mettre à jour, message #2541612024-02-28T09:48:22+01:00entwanne/@entwannehttps://zestedesavoir.com/forums/sujet/17352/a-partir-dun-clique-trier-des-donnees-deja-affichees-dans-le-desordre-puis-les-mettre-a-jour/?page=1#p254161<p>Salut,</p>
<p>Est-ce que tu vois bien les requêtes HTTP survenir lorsque tu utilises tes <code><select></code> ? Est-ce qu’elles réussissent ?</p>
<p>Si oui tu pourrais afficher clairement ce qu’elles contiennent pour voir si cela correspond bien au format attendu.</p>
<p>Si non, quelle erreur obtiens-tu ?</p>A partir d'un clique : trier des données déjà affichées dans le désordre, puis les mettre à jour, message #2541552024-02-28T06:56:26+01:00DelphineGillain/@DelphineGillainhttps://zestedesavoir.com/forums/sujet/17352/a-partir-dun-clique-trier-des-donnees-deja-affichees-dans-le-desordre-puis-les-mettre-a-jour/?page=1#p254155<p>Bonjour,</p>
<p>Je bloque depuis plusieurs jours… S’il vous plaît, aidez-moi à comprendre l’origine de mon problème! Il y a vraisemblablement quelque chose que je ne comprends pas bien puisque l’exécution de mon code ne fonctionne pas : lorsque je clique sur une des options de mon sélect, je veux que la liste des livres de mon catalogue soit triée de A à Z ou du plus petit au plus grand, ou bien de Z à A ou du plus grand au plus petit (selon l’option sélectionnée).</p>
<p>Actuellement, je soupçonne la view de mon application de ne pas être correctement intégrée dans celle de mon projet…</p>
<p>Ci-après, voici le contexte d’exécution :</p>
<p>Je débute avec Django. J’ai créé une application nommée "books" qui se rattache à un projet "sgbj". Le template catalog.html de mon application est appelée par le template index.html de mon projet "sgbj". Donc l’url d’affichage de mon application "books" est la même que celle utilisée par mon projet "sgbj" :</p>
<p>Mon ficher urls.py du projet "sgbj":</p>
<div class="hljs-code-div hljs-code-py"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span></div><pre><code class="hljs language-py"><span class="hljs-keyword">from</span> django.contrib <span class="hljs-keyword">import</span> admin
<span class="hljs-keyword">from</span> django.urls <span class="hljs-keyword">import</span> path, include
<span class="hljs-keyword">from</span> books <span class="hljs-keyword">import</span> views <span class="hljs-keyword">as</span> books_views
<span class="hljs-keyword">from</span> . <span class="hljs-keyword">import</span> views <span class="hljs-keyword">as</span> project_views
urlpatterns = [
path(<span class="hljs-string">'admin/'</span>, admin.site.urls),
path(<span class="hljs-string">''</span>, books_views.catalog_view, name=<span class="hljs-string">'index'</span>),
path(<span class="hljs-string">'contact/'</span>, project_views.contact_view, name=<span class="hljs-string">'contact'</span>),
path(<span class="hljs-string">'publications/'</span>, include(<span class="hljs-string">'articles.urls'</span>), name=<span class="hljs-string">'articles'</span>),
]
</code></pre></div>
<p>Le fichier views.py du projet "sgbj" :</p>
<div class="hljs-code-div hljs-code-py"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span></div><pre><code class="hljs language-py"><span class="hljs-keyword">from</span> django.shortcuts <span class="hljs-keyword">import</span> render
<span class="hljs-keyword">from</span> books.views <span class="hljs-keyword">import</span> catalog_view <span class="hljs-keyword">as</span> books_catalog_view
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">index_view</span>(<span class="hljs-params">request</span>):</span>
catalog_context = books_catalog_view(request)
books = catalog_context.get(<span class="hljs-string">'catalog'</span>)
<span class="hljs-keyword">return</span> render(request, <span class="hljs-string">'index.html'</span>, {<span class="hljs-string">'catalog'</span>: books})
</code></pre></div>
<p>Le template index.html du projet "sgbj" :</p>
<div class="hljs-code-div hljs-code-html"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span><span data-count="12"></span></div><pre><code class="hljs language-html">{% extends 'template_base.html' %}
{% block title %}Home_page{% endblock %}
{% block content %}
{% block catalog_content %}
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"catalog_content"</span>></span>
{% include 'catalog.html' %}
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
{% endblock %}
{% block sort_books %}
{% endblock %}
{% endblock %}
</code></pre></div>
<p>Le template catalog.html de l’application "books":</p>
<div class="hljs-code-div hljs-code-html"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span><span data-count="12"></span><span data-count="13"></span><span data-count="14"></span><span data-count="15"></span><span data-count="16"></span><span data-count="17"></span><span data-count="18"></span><span data-count="19"></span><span data-count="20"></span><span data-count="21"></span><span data-count="22"></span><span data-count="23"></span><span data-count="24"></span><span data-count="25"></span><span data-count="26"></span><span data-count="27"></span><span data-count="28"></span><span data-count="29"></span><span data-count="30"></span><span data-count="31"></span><span data-count="32"></span><span data-count="33"></span><span data-count="34"></span><span data-count="35"></span></div><pre><code class="hljs language-html">{% extends 'template_base.html' %}
{% block title %}Catalog_page{% endblock %}
{% block content %}
{% block sort_books %}
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sort_books"</span>></span>
Tri par :
<span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_lastname"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"select_books sort_lastname"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"lastname"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_lastname_author"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sort_label"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">selected</span> <span class="hljs-attr">hidden</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no_specific"</span>></span>auteur <span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_lastname_AZ"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"display_asc option_transparent"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"asc"</span>></span>A ... Z<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_lastname_ZA"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"display_desc option_transparent"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"desc"</span>></span>Z ... A<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"></<span class="hljs-name">select</span>></span>
<span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_title"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"select_books"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"titre"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_title_title"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sort_label"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">selected</span> <span class="hljs-attr">hidden</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no_specific"</span>></span>titre <span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_title_AZ"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"display_asc option_transparent"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"asc"</span>></span>A ... Z<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_title_ZA"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"display_desc option_transparent"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"desc"</span>></span>Z ... A<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"></<span class="hljs-name">select</span>></span>
<span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_date"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"select_books"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"date"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_date_date"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sort_label"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">selected</span> <span class="hljs-attr">hidden</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no_specific"</span>></span>date <span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_date_-+"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"display_asc option_transparent"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"asc"</span>></span>- ... +<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sort_date_+-"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"display_desc option_transparent"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"desc"</span>></span>+ ... -<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"></<span class="hljs-name">select</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
{% endblock %}
{% block catalog_title %}
<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Ma bibliothèque<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
{% endblock %}
{% for book in catalog %}
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"catalog"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lastname"</span>></span>{{ book.lastname }}<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"firstname"</span>></span>{{ book.firstname }}<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>></span><span class="hljs-tag"><<span class="hljs-name">b</span>></span>{{ book.title }}<span class="hljs-tag"></<span class="hljs-name">b</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>ISBN : <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"isbn"</span>></span>{{ book.isbn }}<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
{% endfor %}
{% endblock %}
</code></pre></div>
<p>La vue views.py de l’application "books" :</p>
<div class="hljs-code-div hljs-code-py"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span><span data-count="12"></span><span data-count="13"></span><span data-count="14"></span><span data-count="15"></span><span data-count="16"></span><span data-count="17"></span><span data-count="18"></span><span data-count="19"></span><span data-count="20"></span><span data-count="21"></span><span data-count="22"></span><span data-count="23"></span><span data-count="24"></span><span data-count="25"></span><span data-count="26"></span><span data-count="27"></span><span data-count="28"></span><span data-count="29"></span><span data-count="30"></span></div><pre><code class="hljs language-py"><span class="hljs-keyword">from</span> django.shortcuts <span class="hljs-keyword">import</span> render
<span class="hljs-keyword">from</span> django.http <span class="hljs-keyword">import</span> JsonResponse
<span class="hljs-keyword">from</span> django.db.models.functions <span class="hljs-keyword">import</span> Lower
<span class="hljs-keyword">from</span> .models <span class="hljs-keyword">import</span> Book
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">catalog_view</span>(<span class="hljs-params">request</span>):</span>
books = Book.objects.<span class="hljs-built_in">all</span>()
<span class="hljs-keyword">return</span> render(request, <span class="hljs-string">'books/catalog.html'</span>, {<span class="hljs-string">'catalog'</span>: books})
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">sort_books_view</span>(<span class="hljs-params">request</span>):</span>
<span class="hljs-keyword">if</span> request.is_ajax() <span class="hljs-keyword">and</span> <span class="hljs-string">'selected_option'</span> <span class="hljs-keyword">in</span> request.GET:
selected_column_option = request.GET.get(<span class="hljs-string">'selected_option'</span>)
column_mapping = {
<span class="hljs-string">'sort_lastname_AZ'</span>: <span class="hljs-string">'lastname'</span>,
<span class="hljs-string">'sort_lastname_ZA'</span>: <span class="hljs-string">'-lastname'</span>,
<span class="hljs-string">'sort_firstname_AZ'</span>: <span class="hljs-string">'firstname'</span>,
<span class="hljs-string">'sort_firstname_ZA'</span>: <span class="hljs-string">'-firstname'</span>,
<span class="hljs-string">'sort_title_AZ'</span>: <span class="hljs-string">'title'</span>,
<span class="hljs-string">'sort_title_ZA'</span>: <span class="hljs-string">'-title'</span>,
<span class="hljs-string">'sort_date_-+'</span>: Lower(<span class="hljs-string">'date'</span>),
<span class="hljs-string">'sort_date_+-'</span>: Lower(<span class="hljs-string">'-date'</span>),
}
<span class="hljs-keyword">if</span> selected_column_option <span class="hljs-keyword">in</span> column_mapping:
sort_column = column_mapping[selected_column_option]
books = Book.objects.<span class="hljs-built_in">all</span>().order_by(sort_column)
sorted_books = [{<span class="hljs-string">'lastname'</span>: book.lastname, <span class="hljs-string">'firstname'</span>: book.firstname, <span class="hljs-string">'title'</span>: book.title, <span class="hljs-string">'isbn'</span>: book.isbn} <span class="hljs-keyword">for</span> book <span class="hljs-keyword">in</span> books]
<span class="hljs-keyword">return</span> JsonResponse(sorted_books, safe=<span class="hljs-literal">False</span>)
<span class="hljs-keyword">else</span>:
<span class="hljs-keyword">return</span> JsonResponse({<span class="hljs-string">'error'</span>: <span class="hljs-string">'Option de tri non valide.'</span>})
<span class="hljs-keyword">else</span>:
<span class="hljs-keyword">return</span> JsonResponse({<span class="hljs-string">'error'</span>: <span class="hljs-string">'Cette vue ne peut être appelée que via AJAX.'</span>})
</code></pre></div>
<p>Mon script selector_books.js de l’application "books" (voir les lignes 46 à 82):</p>
<div class="hljs-code-div hljs-code-js"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span><span data-count="12"></span><span data-count="13"></span><span data-count="14"></span><span data-count="15"></span><span data-count="16"></span><span data-count="17"></span><span data-count="18"></span><span data-count="19"></span><span data-count="20"></span><span data-count="21"></span><span data-count="22"></span><span data-count="23"></span><span data-count="24"></span><span data-count="25"></span><span data-count="26"></span><span data-count="27"></span><span data-count="28"></span><span data-count="29"></span><span data-count="30"></span><span data-count="31"></span><span data-count="32"></span><span data-count="33"></span><span data-count="34"></span><span data-count="35"></span><span data-count="36"></span><span data-count="37"></span><span data-count="38"></span><span data-count="39"></span><span data-count="40"></span><span data-count="41"></span><span data-count="42"></span><span data-count="43"></span><span data-count="44"></span><span data-count="45"></span><span data-count="46"></span><span data-count="47"></span><span data-count="48"></span><span data-count="49"></span><span data-count="50"></span><span data-count="51"></span><span data-count="52"></span><span data-count="53"></span><span data-count="54"></span><span data-count="55"></span><span data-count="56"></span><span data-count="57"></span><span data-count="58"></span><span data-count="59"></span><span data-count="60"></span><span data-count="61"></span><span data-count="62"></span><span data-count="63"></span><span data-count="64"></span><span data-count="65"></span><span data-count="66"></span><span data-count="67"></span><span data-count="68"></span><span data-count="69"></span><span data-count="70"></span><span data-count="71"></span><span data-count="72"></span><span data-count="73"></span><span data-count="74"></span><span data-count="75"></span><span data-count="76"></span><span data-count="77"></span><span data-count="78"></span><span data-count="79"></span><span data-count="80"></span><span data-count="81"></span><span data-count="82"></span><span data-count="83"></span></div><pre><code class="hljs language-js"><span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">'DOMContentLoaded'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">var</span> selectElements = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">'#sort_lastname, #sort_firstname, #sort_title, #sort_date'</span>);
<span class="hljs-keyword">var</span> defaultLabelOptions = {};
selectElements.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">selectElement</span>) </span>{
<span class="hljs-keyword">var</span> defaultLabelOption = selectElement.querySelector(<span class="hljs-string">'option'</span>);
defaultLabelOptions[selectElement.id] = defaultLabelOption.textContent;
defaultLabelOption.style.display = <span class="hljs-string">'none'</span>;
selectElement.addEventListener(<span class="hljs-string">'change'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">var</span> selectedOption = <span class="hljs-built_in">this</span>.options[<span class="hljs-built_in">this</span>.selectedIndex];
<span class="hljs-keyword">var</span> optionClass = selectedOption.getAttribute(<span class="hljs-string">'class'</span>);
<span class="hljs-keyword">var</span> optionText = selectedOption.textContent;
selectElements.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">otherSelect</span>) </span>{
<span class="hljs-keyword">if</span> (otherSelect !== selectElement) {
<span class="hljs-keyword">var</span> defaultOption = otherSelect.querySelector(<span class="hljs-string">'option[value="no_specific"]'</span>);
defaultOption.style.display = <span class="hljs-string">''</span>;
defaultOption.selected = <span class="hljs-literal">true</span>;
otherSelect.querySelectorAll(<span class="hljs-string">'option'</span>).forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">option</span>) </span>{
option.style.display = <span class="hljs-string">''</span>;
});
}
});
<span class="hljs-comment">// Afficher toutes les options</span>
<span class="hljs-keyword">var</span> options = selectElement.querySelectorAll(<span class="hljs-string">'option'</span>);
options.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">option</span>) </span>{
option.style.display = <span class="hljs-string">''</span>;
});
<span class="hljs-comment">// Cacher l'option sélectionnée</span>
selectedOption.style.display = <span class="hljs-string">'none'</span>;
<span class="hljs-keyword">if</span> (optionClass === <span class="hljs-string">'sort_label'</span> || (optionText !== <span class="hljs-string">'auteur A ... Z'</span> && optionText !== <span class="hljs-string">'auteur Z ... A'</span> && optionText !== <span class="hljs-string">'titre A ... Z'</span> && optionText !== <span class="hljs-string">'titre Z ... A'</span> && optionText !== <span class="hljs-string">'date - ... +'</span> && optionText !== <span class="hljs-string">'date + ... -'</span>)) {
selectedOption.textContent = defaultLabelOptions[selectElement.id] + optionText;
}
<span class="hljs-comment">// Masquer les options appropriées sans masquer l'élément sélectionné</span>
<span class="hljs-keyword">if</span> (optionClass === <span class="hljs-string">'display_asc'</span>) {
<span class="hljs-keyword">var</span> descOptions = selectElement.parentNode.querySelectorAll(<span class="hljs-string">'.display_desc'</span>);
descOptions.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">option</span>) </span>{
option.style.display = <span class="hljs-string">''</span>;
});
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (optionClass === <span class="hljs-string">'display_desc'</span>) {
<span class="hljs-keyword">var</span> ascOptions = selectElement.parentNode.querySelectorAll(<span class="hljs-string">'.display_asc'</span>);
ascOptions.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">option</span>) </span>{
option.style.display = <span class="hljs-string">''</span>;
});
}
});
});
$(<span class="hljs-string">'#sort_lastname, #sort_firstname, #sort_title, #sort_date'</span>).on(<span class="hljs-string">'change'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">var</span> selectedOption = $(<span class="hljs-built_in">this</span>).val();
<span class="hljs-keyword">if</span> (selectedOption === <span class="hljs-string">"AZ"</span> || selectedOption === <span class="hljs-string">"-+"</span> || selectedOption === <span class="hljs-string">"ZA"</span> || selectedOption === <span class="hljs-string">"+-"</span> ) {
<span class="hljs-keyword">var</span> dataToSend = {};
<span class="hljs-keyword">var</span> selectedColumn = <span class="hljs-string">''</span>;
<span class="hljs-keyword">if</span> ($(<span class="hljs-built_in">this</span>).attr(<span class="hljs-string">'id'</span>) === <span class="hljs-string">'sort_lastname'</span>) {
selectedColumn = <span class="hljs-string">'lastname'</span>;
dataToSend[<span class="hljs-string">'selected_lastname_option'</span>] = <span class="hljs-string">'sort_'</span> + selectedColumn + <span class="hljs-string">'_'</span> + selectedOption.toUpperCase();
dataToSend[<span class="hljs-string">'selected_firstname_option'</span>] = <span class="hljs-string">'sort_firstname_'</span> + selectedOption.toUpperCase();
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ($(<span class="hljs-built_in">this</span>).attr(<span class="hljs-string">'id'</span>) === <span class="hljs-string">'sort_firstname'</span>) {
selectedColumn = <span class="hljs-string">'firstname'</span>;
dataToSend[<span class="hljs-string">'selected_firstname_option'</span>] = <span class="hljs-string">'sort_'</span> + selectedColumn + <span class="hljs-string">'_'</span> + selectedOption.toUpperCase();
dataToSend[<span class="hljs-string">'selected_lastname_option'</span>] = <span class="hljs-string">'sort_lastname_'</span> + selectedOption.toUpperCase();
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ($(<span class="hljs-built_in">this</span>).attr(<span class="hljs-string">'id'</span>) === <span class="hljs-string">'sort_title'</span>) {
selectedColumn = <span class="hljs-string">'title'</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ($(<span class="hljs-built_in">this</span>).attr(<span class="hljs-string">'id'</span>) === <span class="hljs-string">'sort_date'</span>) {
selectedColumn = <span class="hljs-string">'date'</span>;
}
$.ajax({
<span class="hljs-attr">url</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">data</span>: dataToSend,
<span class="hljs-attr">dataType</span>: <span class="hljs-string">'json'</span>,
<span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
updateIndexData(data, selectedColumn);
}
});
}
});
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">updateIndexData</span>(<span class="hljs-params">data, selectedColumn</span>) </span>{
$(<span class="hljs-string">'#catalog_content .catalog p'</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">index</span>) </span>{
$(<span class="hljs-built_in">this</span>).find(<span class="hljs-string">'.'</span> + selectedColumn).text(data[index][selectedColumn]);
$(<span class="hljs-built_in">this</span>).find(<span class="hljs-string">'.isbn'</span>).text(<span class="hljs-string">'ISBN : '</span> + data[index].isbn);
});
}
});
</code></pre></div>
<p>L’affichage web en local fonctionnait bien avant que j’essaye de trier les données par ordre croissant/décroissant. J’espère que vous voudrez bien m’aider à identifier l’origine de la non exécution de mon code!</p>Requête AJAX - affichage variable impossible, message #2510612023-06-23T23:45:47+02:00elegance/@elegancehttps://zestedesavoir.com/forums/sujet/17019/requete-ajax-affichage-variable-impossible/?page=1#p251061<p>A priori, tu connais très peu SQL.</p>
<p>Même si tu as 2 tables séparées (une avec les coordonnées géo de chaque pharmacie, et une autre avec les infos complémentaires, tu peux récupérer toutes les informations d’un coup. Ce que tu proposes dans ta 2ème requête disparait donc purement et simplement.</p>
<p>Juste un mot clé pour t’aider dans ta recherche, sans te donner la réponse toute faite : SQL INNER JOIN.</p>Requête AJAX - affichage variable impossible, message #2510602023-06-23T23:14:41+02:00bourasalexandre/@bourasalexandrehttps://zestedesavoir.com/forums/sujet/17019/requete-ajax-affichage-variable-impossible/?page=1#p251060<p>Bonsoir à tous,</p>
<p>Je me permets de venir vers vous car je sèche un peu sur du code qui mélange de l’AJAX et du PHP, je suis preneur de la moindre modification ou amélioration.</p>
<p>Voila j’utilise la librairie leaflet pour afficher des marqueurs via des coordonnées que j’ai dans une base de données distante. Tout est bon j’arrive à afficher mes marqueurs en l’occurence des pharmacies au travers de la requête présente sur mon index.</p>
<div class="hljs-code-div hljs-code-php"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span><span data-count="12"></span><span data-count="13"></span><span data-count="14"></span><span data-count="15"></span><span data-count="16"></span><span data-count="17"></span><span data-count="18"></span><span data-count="19"></span><span data-count="20"></span><span data-count="21"></span><span data-count="22"></span><span data-count="23"></span><span data-count="24"></span><span data-count="25"></span><span data-count="26"></span><span data-count="27"></span><span data-count="28"></span><span data-count="29"></span><span data-count="30"></span><span data-count="31"></span><span data-count="32"></span><span data-count="33"></span><span data-count="34"></span><span data-count="35"></span><span data-count="36"></span><span data-count="37"></span><span data-count="38"></span><span data-count="39"></span><span data-count="40"></span><span data-count="41"></span><span data-count="42"></span><span data-count="43"></span><span data-count="44"></span><span data-count="45"></span><span data-count="46"></span><span data-count="47"></span><span data-count="48"></span><span data-count="49"></span><span data-count="50"></span><span data-count="51"></span><span data-count="52"></span><span data-count="53"></span><span data-count="54"></span><span data-count="55"></span><span data-count="56"></span><span data-count="57"></span><span data-count="58"></span><span data-count="59"></span><span data-count="60"></span><span data-count="61"></span><span data-count="62"></span><span data-count="63"></span><span data-count="64"></span><span data-count="65"></span><span data-count="66"></span><span data-count="67"></span><span data-count="68"></span><span data-count="69"></span><span data-count="70"></span><span data-count="71"></span><span data-count="72"></span><span data-count="73"></span><span data-count="74"></span><span data-count="75"></span><span data-count="76"></span><span data-count="77"></span><span data-count="78"></span><span data-count="79"></span><span data-count="80"></span><span data-count="81"></span><span data-count="82"></span><span data-count="83"></span><span data-count="84"></span><span data-count="85"></span><span data-count="86"></span><span data-count="87"></span><span data-count="88"></span><span data-count="89"></span><span data-count="90"></span><span data-count="91"></span><span data-count="92"></span><span data-count="93"></span><span data-count="94"></span><span data-count="95"></span><span data-count="96"></span><span data-count="97"></span><span data-count="98"></span><span data-count="99"></span><span data-count="100"></span><span data-count="101"></span><span data-count="102"></span><span data-count="103"></span><span data-count="104"></span><span data-count="105"></span><span data-count="106"></span><span data-count="107"></span><span data-count="108"></span><span data-count="109"></span><span data-count="110"></span><span data-count="111"></span><span data-count="112"></span><span data-count="113"></span><span data-count="114"></span><span data-count="115"></span><span data-count="116"></span><span data-count="117"></span><span data-count="118"></span><span data-count="119"></span><span data-count="120"></span><span data-count="121"></span><span data-count="122"></span><span data-count="123"></span><span data-count="124"></span><span data-count="125"></span><span data-count="126"></span><span data-count="127"></span><span data-count="128"></span><span data-count="129"></span><span data-count="130"></span><span data-count="131"></span><span data-count="132"></span><span data-count="133"></span><span data-count="134"></span><span data-count="135"></span><span data-count="136"></span><span data-count="137"></span><span data-count="138"></span><span data-count="139"></span><span data-count="140"></span><span data-count="141"></span><span data-count="142"></span><span data-count="143"></span><span data-count="144"></span><span data-count="145"></span><span data-count="146"></span><span data-count="147"></span><span data-count="148"></span><span data-count="149"></span><span data-count="150"></span><span data-count="151"></span><span data-count="152"></span><span data-count="153"></span><span data-count="154"></span><span data-count="155"></span><span data-count="156"></span><span data-count="157"></span><span data-count="158"></span><span data-count="159"></span><span data-count="160"></span><span data-count="161"></span><span data-count="162"></span><span data-count="163"></span><span data-count="164"></span><span data-count="165"></span><span data-count="166"></span><span data-count="167"></span><span data-count="168"></span><span data-count="169"></span><span data-count="170"></span><span data-count="171"></span><span data-count="172"></span><span data-count="173"></span><span data-count="174"></span><span data-count="175"></span><span data-count="176"></span><span data-count="177"></span><span data-count="178"></span><span data-count="179"></span><span data-count="180"></span><span data-count="181"></span><span data-count="182"></span><span data-count="183"></span><span data-count="184"></span><span data-count="185"></span><span data-count="186"></span><span data-count="187"></span><span data-count="188"></span><span data-count="189"></span><span data-count="190"></span><span data-count="191"></span><span data-count="192"></span><span data-count="193"></span><span data-count="194"></span><span data-count="195"></span><span data-count="196"></span><span data-count="197"></span><span data-count="198"></span><span data-count="199"></span><span data-count="200"></span><span data-count="201"></span><span data-count="202"></span><span data-count="203"></span><span data-count="204"></span><span data-count="205"></span><span data-count="206"></span><span data-count="207"></span><span data-count="208"></span><span data-count="209"></span></div><pre><code class="hljs language-php"><span class="hljs-meta"><?php</span>
session_start();
ob_start();
ini_set(<span class="hljs-string">'display_errors'</span>,<span class="hljs-string">'on'</span>);
error_reporting(E_ALL);
<span class="hljs-keyword">include_once</span>(<span class="hljs-string">"./assets/database/connect_db_users.php"</span>);
<span class="hljs-keyword">include_once</span>(<span class="hljs-string">"./assets/database/cookie_lang.php"</span>);
<span class="hljs-keyword">include_once</span>(<span class="hljs-string">"./assets/database/cookieconnect.php"</span>);
<span class="hljs-meta">?></span>
<span class="hljs-meta"><?php</span>
<span class="hljs-comment">// Requête pour récupérer les pharm_geolocalisation avec leurs coordonnées, adresses et villes</span>
<span class="hljs-variable">$query</span> = <span class="hljs-variable">$db</span>->query(<span class="hljs-string">"SELECT pharm_id_code, pharm_state, pharm_latitude, pharm_longitude FROM pharm_geolocalisation WHERE pharm_state = 1"</span>);
<span class="hljs-comment">// Tableau pour stocker les données des pharm_geolocalisation</span>
<span class="hljs-variable">$pharm_geolocalisation</span> = <span class="hljs-keyword">array</span>();
<span class="hljs-comment">// Parcours des résultats de la requête</span>
<span class="hljs-keyword">while</span> (<span class="hljs-variable">$row</span> = <span class="hljs-variable">$query</span>->fetch(PDO::FETCH_ASSOC)) {
<span class="hljs-comment">// Création d'un tableau associatif pour chaque pharmacie</span>
<span class="hljs-variable">$pharmacie</span> = <span class="hljs-keyword">array</span>(
<span class="hljs-string">"id_code"</span> => <span class="hljs-variable">$row</span>[<span class="hljs-string">"pharm_id_code"</span>],
<span class="hljs-string">"state"</span> => <span class="hljs-variable">$row</span>[<span class="hljs-string">"pharm_state"</span>],
<span class="hljs-string">"latlng"</span> => <span class="hljs-keyword">array</span>(<span class="hljs-variable">$row</span>[<span class="hljs-string">"pharm_latitude"</span>], <span class="hljs-variable">$row</span>[<span class="hljs-string">"pharm_longitude"</span>])
);
<span class="hljs-comment">// Ajout du tableau associatif au tableau $pharmacies</span>
array_push(<span class="hljs-variable">$pharm_geolocalisation</span>, <span class="hljs-variable">$pharmacie</span>);
}
<span class="hljs-meta">?></span>
<!DOCTYPE html>
<html>
<head>
<span class="hljs-meta"><?php</span> <span class="hljs-keyword">include</span>(<span class="hljs-string">'./includes/users_header_metahead.php'</span>);<span class="hljs-meta">?></span>
<link rel=<span class="hljs-string">"stylesheet"</span> href=<span class="hljs-string">"https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"</span> integrity=<span class="hljs-string">"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="</span> crossorigin=<span class="hljs-string">""</span> />
<link rel=<span class="hljs-string">"stylesheet"</span> href=<span class="hljs-string">"https://unpkg.com/leaflet.locatecontrol/dist/L.Control.Locate.min.css"</span> />
<link rel=<span class="hljs-string">"stylesheet"</span> href=<span class="hljs-string">"https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css"</span> />
<link rel=<span class="hljs-string">"stylesheet"</span> href=<span class="hljs-string">"https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css"</span> />
<script src=<span class="hljs-string">"https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"</span> integrity=<span class="hljs-string">"sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="</span> crossorigin=<span class="hljs-string">""</span>></script>
<script src=<span class="hljs-string">"https://unpkg.com/leaflet.locatecontrol/dist/L.Control.Locate.min.js"</span>></script>
<script src=<span class="hljs-string">"https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"</span>></script>
<style>
<span class="hljs-comment">#mapid {</span>
top: <span class="hljs-number">77</span>px;
width: <span class="hljs-number">100</span>%;
height: calc(<span class="hljs-number">100</span>vh - <span class="hljs-number">85</span>px);
margin-left: <span class="hljs-number">0</span>px;
padding-left: <span class="hljs-number">0</span>px;
}
<span class="hljs-comment">/* CSS cluster */</span>
.cluster {
background: <span class="hljs-comment">#5e50ff;</span>
border-radius: <span class="hljs-number">50</span>%;
text-align: center;
color: white;
font-weight: <span class="hljs-number">700</span>;
border: <span class="hljs-number">2</span>px solid white;
font-family: monospace;
}
.cluster:before {
content: <span class="hljs-string">' '</span>;
position: absolute;
border-radius: <span class="hljs-number">50</span>%;
z-index: -<span class="hljs-number">1</span>;
top: <span class="hljs-number">1</span>px;
left: <span class="hljs-number">1</span>px;
right: <span class="hljs-number">1</span>px;
bottom: <span class="hljs-number">1</span>px;
border: <span class="hljs-number">0</span>px solid white;
}
.digits-<span class="hljs-number">1</span> {
font-size: <span class="hljs-number">14</span>px;
height: <span class="hljs-number">28</span>px;
width: <span class="hljs-number">28</span>px;
line-height: <span class="hljs-number">24</span>px;
margin-top: -<span class="hljs-number">14</span>px;
margin-left: -<span class="hljs-number">14</span>px;
}
.digits-<span class="hljs-number">2</span> {
font-size: <span class="hljs-number">16</span>px;
height: <span class="hljs-number">34</span>px;
width: <span class="hljs-number">34</span>px;
line-height: <span class="hljs-number">31</span>px;
margin-top: -<span class="hljs-number">17</span>px;
margin-left: -<span class="hljs-number">17</span>px;
}
.digits-<span class="hljs-number">2</span>:before {
border-width: <span class="hljs-number">0</span>px;
}
.digits-<span class="hljs-number">3</span> {
font-size: <span class="hljs-number">18</span>px;
height: <span class="hljs-number">48</span>px;
width: <span class="hljs-number">48</span>px;
line-height: <span class="hljs-number">42</span>px;
border-width: <span class="hljs-number">3</span>px;
margin-top: -<span class="hljs-number">24</span>px;
margin-left: -<span class="hljs-number">24</span>px;
}
.digits-<span class="hljs-number">3</span>:before {
border-width: <span class="hljs-number">0</span>px;
}
.digits-<span class="hljs-number">4</span> {
font-size: <span class="hljs-number">18</span>px;
height: <span class="hljs-number">58</span>px;
width: <span class="hljs-number">58</span>px;
line-height: <span class="hljs-number">52</span>px;
border-width: <span class="hljs-number">4</span>px;
margin-top: -<span class="hljs-number">29</span>px;
margin-left: -<span class="hljs-number">29</span>px;
}
.digits-<span class="hljs-number">4</span>:before {
border-width: <span class="hljs-number">0</span>px;
}
.leaflet-popup-content {
margin: <span class="hljs-number">0</span>;
}
.heart-icon.liked {
color: red !important;
}
</style>
</head>
<body>
<span class="hljs-meta"><?php</span> <span class="hljs-keyword">include</span>(<span class="hljs-string">'./includes/users_navigation_header_responsive.php'</span>); <span class="hljs-meta">?></span>
<!-- Main content -->
<div <span class="hljs-class"><span class="hljs-keyword">class</span>="<span class="hljs-title">main</span>-<span class="hljs-title">content</span>">
<!-- <span class="hljs-title">Top</span> <span class="hljs-title">navbar</span> -->
<<span class="hljs-title">nav</span> <span class="hljs-title">class</span>="<span class="hljs-title">navbar</span> <span class="hljs-title">navbar</span>-<span class="hljs-title">top</span> <span class="hljs-title">navbar</span>-<span class="hljs-title">expand</span> <span class="hljs-title">navbar</span>-<span class="hljs-title">dark</span> <span class="hljs-title">bg</span>-<span class="hljs-title">white</span> <span class="hljs-title">border</span>-<span class="hljs-title">bottom</span>" <span class="hljs-title">id</span>="<span class="hljs-title">navbar</span>-<span class="hljs-title">main</span>" <span class="hljs-title">style</span>="<span class="hljs-title">border</span>-<span class="hljs-title">bottom</span>: 1<span class="hljs-title">px</span> <span class="hljs-title">solid</span> #<span class="hljs-title">e6ecf1</span>;">
<<span class="hljs-title">div</span> <span class="hljs-title">class</span>="<span class="hljs-title">container</span>-<span class="hljs-title">fluid</span>">
<?<span class="hljs-title">php</span> <span class="hljs-title">include</span>('./<span class="hljs-title">includes</span>/<span class="hljs-title">users_navigation_header</span>.<span class="hljs-title">php</span>');?>
</<span class="hljs-title">div</span>>
</<span class="hljs-title">nav</span>>
<<span class="hljs-title">div</span> <span class="hljs-title">id</span>="<span class="hljs-title">mapid</span>"></<span class="hljs-title">div</span>>
<<span class="hljs-title">div</span> <span class="hljs-title">id</span>="<span class="hljs-title">pharmacies</span>"></<span class="hljs-title">div</span>>
</<span class="hljs-title">div</span>>
<<span class="hljs-title">script</span>>
<span class="hljs-title">var</span> <span class="hljs-title">mymap</span> = <span class="hljs-title">L</span>.<span class="hljs-title">map</span>('<span class="hljs-title">mapid</span>').<span class="hljs-title">setView</span>([48.083328, -1.68333], 18);
<span class="hljs-title">L</span>.<span class="hljs-title">tileLayer</span>('<span class="hljs-title">https</span>://</span>{s}.tile.openstreetmap.org/{z}/{x}/{y}.png<span class="hljs-string">', {
attribution: '</span>© <a href=<span class="hljs-string">"https://www.openstreetmap.org/copyright"</span>>OpenStreetMap</a> contributors<span class="hljs-string">',
maxZoom: 16,
}).addTo(mymap);
var pharm_geolocalisation = <?php echo json_encode($pharm_geolocalisation); ?>;
// Création d'</span>un groupe de marqueurs clusterisés CSS spécifique
<span class="hljs-keyword">var</span> markers = <span class="hljs-keyword">new</span> L.MarkerClusterGroup({
iconCreateFunction: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">cluster</span>) </span>{
<span class="hljs-keyword">var</span> digits = (cluster.getChildCount()+<span class="hljs-string">''</span>).length;
<span class="hljs-keyword">return</span> L.divIcon({
html: cluster.getChildCount(),
className: <span class="hljs-string">'cluster digits-'</span>+digits,
iconSize: <span class="hljs-literal">null</span>
});
}
});
pharm_geolocalisation.<span class="hljs-keyword">forEach</span>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">pharmacie</span>) </span>{
<span class="hljs-keyword">var</span> id_code = pharmacie.id_code;
<span class="hljs-keyword">var</span> latlng = pharmacie.latlng;
<span class="hljs-keyword">var</span> state = pharmacie.state;
<span class="hljs-keyword">var</span> specialMarker = pharmacie.specialMarker; <span class="hljs-comment">// Suppose que vous avez une propriété "specialMarker" dans votre base de données</span>
let form = <span class="hljs-keyword">new</span> FormData();
form.append(<span class="hljs-string">"id_code"</span>, id_code); <span class="hljs-comment">// Remplacez id_code par la valeur souhaitée</span>
<span class="hljs-keyword">const</span> options = {
body: form,
method: <span class="hljs-string">"POST"</span>
};
fetch(<span class="hljs-string">'./req_index.php'</span>, options)
.then(response => response.json())
.then(data => {
})
.<span class="hljs-keyword">catch</span>(<span class="hljs-built_in">error</span> => {
});
<span class="hljs-comment">// Création d'un marqueur pour chaque pharmacie</span>
<span class="hljs-comment">// Ajoutez ici les autres informations de la base de données dans la chaîne de caractères popupContent</span>
<span class="hljs-keyword">var</span> popupContent = <span class="hljs-string">'<div style="width: 18rem;"><div class="card card-stats"><!-- Card body --><div class="card-body"><div class="row"><div class="col"><h5 class="card-title text-uppercase text-muted mb-0"></h5><span class="h2 font-weight-bold mb-0">2,356</span></div><div class="col-auto"><div class="icon icon-shape bg-orange text-white rounded-circle shadow"><i class="ni ni-chart-pie-35"></i></div></div></div><p class="mt-3 mb-0 text-sm"><span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span><span class="text-nowrap">Since last month</span></p></div></div></div>'</span>;
<span class="hljs-comment">// Utilisez un marqueur spécial pour les éléments qui vérifient votre condition</span>
<span class="hljs-keyword">var</span> marker = L.marker(latlng, { icon: L.icon({ iconUrl: <span class="hljs-string">'./assets/img/icons/maps/hapotec_marker_1.png'</span>, iconSize: [<span class="hljs-number">35</span>, <span class="hljs-number">40</span>] }) })
.bindPopup(popupContent, { offset: L.point(<span class="hljs-number">0</span>, -<span class="hljs-number">20</span>), autoPan: <span class="hljs-literal">false</span> });
markers.addLayer(marker); <span class="hljs-comment">// Ajout du marqueur au groupe de marqueurs en cluster</span>
<span class="hljs-comment">// Création d'une div avec les elements du marqueur</span>
<span class="hljs-keyword">var</span> div = document.createElement(<span class="hljs-string">"div"</span>);
div.innerHTML = name;
div.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
mymap.setView(latlng, <span class="hljs-number">18</span>);
});
pharmacies.appendChild(div);
});
mymap.addLayer(markers);
L.control.locate().addTo(mymap);
</script>
</body>
</html>
</code></pre></div>
<p>Le truc c’est que cette première requête qui interroge une première table ne se compose que des coordonnées et des IDs des pharmacies, j’ai donc stocké les autres informations relativement aux pharmacies (adresse, nom, téléphone) dans une seconde table que j’essaye d’interroger après avec récupérer l’ID en question et afficher les différentes informations dans le popupContent.</p>
<p>Cette seconde requête est réalisée via une page dans le répertoire "req_index.php" :</p>
<div class="hljs-code-div hljs-code-php"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span><span data-count="12"></span><span data-count="13"></span><span data-count="14"></span><span data-count="15"></span><span data-count="16"></span></div><pre><code class="hljs language-php"><span class="hljs-meta"><?php</span>
<span class="hljs-variable">$id_code</span> = <span class="hljs-variable">$_POST</span>[<span class="hljs-string">'id_code'</span>];
<span class="hljs-variable">$req_pharm_informations</span> = <span class="hljs-variable">$db</span>->prepare(<span class="hljs-string">'SELECT * FROM '</span>.<span class="hljs-variable">$db_apotekeen</span>.<span class="hljs-string">'.pharm_informations WHERE pharm_id_code = :pharm_id_code'</span>);
<span class="hljs-variable">$req_pharm_informations</span>->execute(<span class="hljs-keyword">array</span>(
<span class="hljs-string">'pharm_id_code'</span> => <span class="hljs-variable">$id_code</span>,
));
<span class="hljs-variable">$pharm_informations</span> = <span class="hljs-variable">$req_pharm_informations</span>->fetch();
<span class="hljs-comment">// Par exemple, supposons que vous ayez récupéré les informations suivantes de la base de données</span>
<span class="hljs-variable">$pharm_informations</span> = <span class="hljs-keyword">array</span>();
<span class="hljs-comment">// Renvoyez les informations de la pharmacie au format JSON</span>
<span class="hljs-keyword">echo</span> json_encode(<span class="hljs-variable">$pharm_informations</span>);
<span class="hljs-meta">?></span>
</code></pre></div>
<p>Sauf que le souci c’est que je n’arrive pas à intégrer les informations récupérer dans le popupContent, cela bloque l’affichage des marqueurs. Exemple avec dans le code avec " ' + adresse_pharmacie + '/</p>
<p>Je suis preneur de toutes vos lumières.</p>
<p>Merci beaucoup,</p>
<p>AlexCode</p>Sécurité et optimisation côté serveur , message #2401212022-01-12T08:36:45+01:00viki53/@viki53https://zestedesavoir.com/forums/sujet/15986/securite-et-optimisation-cote-serveur/?page=1#p240121<p>Au delà de limiter l’intervalle, attention avec <code>setInterval</code> qui n’attend pas qu’une requête soit revenue pour en lancer une nouvelle.</p>
<p>En cas de latence ça pourrait surcharger le réseau plus que nécessaire en lançant des requêtes simultanées ou consécutives.</p>
<p>Il vaudrait mieux utiliser <code>setTimeout</code> avec un <em>callback</em> récursif.</p>Sécurité et optimisation côté serveur , message #2401202022-01-12T08:34:07+01:00luxera/@luxerahttps://zestedesavoir.com/forums/sujet/15986/securite-et-optimisation-cote-serveur/?page=1#p240120<p>Pour que ce soit le serveur qui informe les clients de nouveaux posts, tu pourrais te tourner vers les websockets. Il est tout à fait possible d’implémenter ça en PHP côté serveur, même si c’est un peu plus compliqué qu’en utilisant AJAX.</p>
<p>Ceci dit, si tu veux supporter les vieux navigateurs (qui supporteraient AJAX mais pas les websockets), tu devrais garder les 2 implémentations. Et là, pour réduire la charge sur le serveur, il n’y a pas de magie : tu devrais peut-être limiter ton intervalle de récupération à 1 ou 2s, d’autant que je ne crois pas que 10x/s soit particulièrement utile.</p>Sécurité et optimisation côté serveur , message #2401072022-01-11T15:39:29+01:00Moté/@Mot%C3%A9https://zestedesavoir.com/forums/sujet/15986/securite-et-optimisation-cote-serveur/?page=1#p240107<p>Tu pourrais séparer ces deux fonctionnalités dans deux fichiers séparément, ou du moins deux addresses séparées (je ne sais pas si tu utilises un système d’adressage ou non). Par exemple, si l’envoi d’un post se fait uniquement via API, tu pourrais le mettre sur une addresse <code>/api/post</code>.</p>
<p>En ce qui concerne la sécurité, le plus évident ici serait l’injection de code. Tu dois avoir un moyen d’échapper le texte qui t’est envoyé afin qu’il ne soit interprété ni par ton serveur, ni par les clients qui iront le lire plus tard.</p>
<p>(note que je ne sais pas faire ça, personnellement, je me contente d’utiliser un framework qui sait très bien le faire)</p>Sécurité et optimisation côté serveur , message #2401062022-01-11T14:01:55+01:00Questions/@Questionshttps://zestedesavoir.com/forums/sujet/15986/securite-et-optimisation-cote-serveur/?page=1#p240106<p>Bonjour, </p>
<p>Je suis en train de créer un réseau social un peu à la Facebook pour m’entraîner. Le concept est simple, j’ai un espace membre avec des utilisateurs qui peuvent se suivre. Ensuite il y a un thread principale ou l’on peut visualiser tous les posts des membres que l’on suit (comme Facebook en gros sauf qu’à la place d’amis ce sont des follows comme sur twitter). </p>
<p>J’ai utilisé Ajax afin que le thread principale affiche les nouveaux posts sans avoir besoin de recharger la page. Mon implémentation fonctionne parfaitement néanmoins je suis sceptique. Voilà comme je procède : </p>
<ul>
<li>
<p>j’ai une page <em>post.php</em> dans laquelle il y a deux fonctions : <code>getPost()</code> et <code>postPost()</code>. La première permet de récupérer tous les posts des utilisateurs qu’on follow, et la deuxième permet de poster un post. L’appel de ces deux fonctions se fait à l’aide d’un <code>GET</code>. Si on appelle <code>post.php?getpost=true</code>alors on appelle la fonction <code>getPost()</code>sinon on appelle l’autre fonction. </p>
</li>
<li>
<p>Maintenant j’ai une page <code>post.js</code> qui appelle les deux fonctions <code>getPost()</code>et <code>postPost()</code> de la page <code>post.php</code>. J’utilise l’objet <code>XMLHttpRequest</code>et j’appelle <code>XHR.open("GET", "post.php?getpost=true")</code> si je veux appeler <code>getPost()</code> et <code>XHR.open("POST", "post.php")</code> si je veux appeler `postPost()``</p>
</li>
</ul>
<p>Tout fonctionne très bien néanmoins je me demande si il n’y a pas des problèmes de sécurité avec cette implémentation ? Je ne serai pas dire quoi, mais j’ai l’impression qu’utiliser un paramètre GET peut permettre à l’utilisateur malicieux de faire n’importe quoi, d’accéder à la page <code>post.php</code> qui peut-être constitue un problème. </p>
<p>Le deuxième problème que j’ai c’est que dans mon fichier <code>.js</code> je fais à la fin <code>const interval = window.setInterval(getSearchResult, 100);</code> mais du coup si il y a plein d’utilisateurs le serveur va être complètement dépassé non ? Y a t-il une autre solution qu’utiliser cette fonction ? Par exemple c’est au serveur de dire au client quand il y a un nouveau post, au lieu que ça soit toujours à moi de demander si de nouveaux posts sont apparues. </p>
<p>J’espère que mes problèmes sont clairs <img src="/static/smileys/svg/smile.svg" alt=":)" class="smiley"> </p>
<p>Merci beaucoup. </p>Recommandations pour premiers pas Ajax sous Jango, message #1912662018-10-16T21:13:19+02:00dubser/@dubserhttps://zestedesavoir.com/forums/sujet/11334/recommandations-pour-premiers-pas-ajax-sous-jango/?page=1#p191266<p>Me basant sur les recommandations précédentes, j’ai préparé pour mes besoins <a href="https://github.com/dubser/ardui_char/wiki/Ajax">une démo de Ajax-Django</a> très basique qui pourrais être utile a un autre néophyte de ces sujets qui serait à ce niveau de son apprentissage.</p>Retour Json, quelle structure adopter dans une application ?, message #1904592018-10-04T08:31:25+02:00Moufle/@Mouflehttps://zestedesavoir.com/forums/sujet/11389/retour-json-quelle-structure-adopter-dans-une-application/?page=1#p190459<blockquote>
<p>Pourquoi tu envoies ton objet parsé par la fonction serialize et non sa forme originale ?</p>
</blockquote>
<p>En fait actuellement il est envoyé dans sa forme originale, mais je me suis dit que si dans l’entité, il y a des propriétés qui je ne veux pas renvoyer au client, par exemple sur une entité User, le password (même crypté). Je me suis donc dit qu’il faudrait que je le serialize avant <img src="/static/smileys/smile.png" alt=":)" class="smiley"></p>
<p>Ensuite, <code>data</code> est mixed, ça peut être n’importe quoi, c’est en gros pour moi, les informations du serveur que j’ai besoin de renvoyer au client. <code>messages</code> c’est le ou les messages que j’ai besoin d’afficher au retour du succès de l’opération (ou de l’échec).</p>
<p>Du coup mon squelette est pour l’instant celui-ci, et ma question était de savoir comment vous vous faites pour vous assurez d’avoir toujours un peu cette même structure pour faciliter les opérations côté Front (JS).</p>Retour Json, quelle structure adopter dans une application ?, message #1904172018-10-03T16:23:57+02:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/11389/retour-json-quelle-structure-adopter-dans-une-application/?page=1#p190417<p>Pourquoi tu envoies ton objet parsé par la fonction serialize et non sa forme originale ?</p>
<p>Ensuite je ne comprend pas la distinction entre data et messages. Si tu veux savoir si l’élément est une liste (array), tu peux faire : <code>[] instanceof Array</code> en javascript.</p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-js"><span class="hljs-keyword">const</span> data = []
<span class="hljs-keyword">if</span> (data <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Array</span>)
alert(<span class="hljs-string">"true"</span>);
</code></pre></div>Retour Json, quelle structure adopter dans une application ?, message #1903862018-10-03T11:30:00+02:00Moufle/@Mouflehttps://zestedesavoir.com/forums/sujet/11389/retour-json-quelle-structure-adopter-dans-une-application/?page=1#p190386<p>Hey ! </p>
<p>J’ai besoin d’un retour d’expérience ou de quelques conseils <img src="/static/smileys/smile.png" alt=":)" class="smiley"></p>
<p>Si vous avez dans votre application des call Ajax, quel va être le format Json de votre réponse côté serveur ?
Utilitez-vous les spec JsonRPC ? <a href="https://www.jsonrpc.org/specification">https://www.jsonrpc.org/specification</a></p>
<p>J’ai besoin de faire un choix pour mon application et le garder jusqu’au bout. C’est en effet un peu chiant côté Front de devoir récupérer la donnée sans être sûr du format que l’on va recevoir. Je veux m’assurer qu’il y est la même structure partout.</p>
<p>J’ai actuellement adopté ce format :</p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-php">[
data => <span class="hljs-keyword">null</span>,
messages => [ ]
]
</code></pre></div>
<p>Où <code>data</code> va retourner par exemple une entité (serialized) et <code>messages</code> va retourner un tableau de message.</p>
<p>Peut être vous aurez des conseils ou remarque à m’apporter,
Dans tous les cas je vous remercie d’avance ! <img src="/static/smileys/smile.png" alt=":)" class="smiley"></p>Recommandations pour premiers pas Ajax sous Jango, message #1896882018-09-23T01:40:35+02:00dubser/@dubserhttps://zestedesavoir.com/forums/sujet/11334/recommandations-pour-premiers-pas-ajax-sous-jango/?page=1#p189688<p>Ça me semble très pertinent et proche de ce que je cherche. Désolé de ne pas avoir indiqué dès le départ que la lecture de l’anglais ne me gêne pas. Merci du temps consacré à m’aider.</p>Recommandations pour premiers pas Ajax sous Jango, message #1896832018-09-22T23:30:36+02:00Mysterri1/@Mysterri1https://zestedesavoir.com/forums/sujet/11334/recommandations-pour-premiers-pas-ajax-sous-jango/?page=1#p189683<p>Est-ce qu’une ressource (textuelle et en anglais) comme <a href="https://realpython.com/django-and-ajax-form-submissions/">celle-ci</a> te convient davantage ?<br>
Il s’agit d’un exemple classique de soumission de formulaire avec Ajax expliqué pas à pas.<br>
À la fin, il y a aussi un lien vers un exemple de suppression de contenu, toujours de manière asynchrone avec Ajax</p>Recommandations pour premiers pas Ajax sous Jango, message #1896802018-09-22T21:58:48+02:00dubser/@dubserhttps://zestedesavoir.com/forums/sujet/11334/recommandations-pour-premiers-pas-ajax-sous-jango/?page=1#p189680<p>Merci de la suggestion. Je n’avais pas pensé a faire un 'reverse engineering' du site comme outil d’apprentissage. Si je n’obtiens pas de suggestion plus 'pédagogique' d’ici quelques jours je vais m’attaquer a l’étude de cette manière. De toute façon je vais donner un feed-back.
</p>Recommandations pour premiers pas Ajax sous Jango, message #1896312018-09-21T22:15:00+02:00Mysterri1/@Mysterri1https://zestedesavoir.com/forums/sujet/11334/recommandations-pour-premiers-pas-ajax-sous-jango/?page=1#p189631<p>Salut,</p>
<p>Je n’ai pas une grande connaissance de Django (et relativement peu en JS), mais tu devrais jeter un coup d’œil <a href="https://github.com/zestedesavoir/zds-site">au code source de Zeste de Savoir</a>, c’est très formateur, plutôt accessible, et tu devrais y trouver ton bonheur. <img src="/static/smileys/smile.png" alt=":)" class="smiley"></p>
<p>Tu trouveras l’ensemble des appels Ajax <a href="https://github.com/zestedesavoir/zds-site/blob/dev/assets/js/ajax-actions.js">dans ce fichier</a>.<br>
On pourrait par exemple s’attarder sur la fonction qui permet de mettre un sujet du forum en « Résolu ».<br>
Rien de bien particulier, grosso modo on récupère les données que l’on souhaite (le jeton CSRF, l’ID du sujet, s’il est résolu ou non et le numéro de page), ensuite on envoie tout en POST à une route qui doit ressembler à ça : /forums/sujet/editer/?topic=xxxx</p>
<p>Ensuite, le traitement se passe côté serveur, ce que tu pourras voir <a href="https://github.com/zestedesavoir/zds-site/blob/dev/zds/forum/views.py#L317">ici</a>.<br>
En parcourant la méthode tu trouveras <a href="https://github.com/zestedesavoir/zds-site/blob/dev/zds/forum/views.py#L342">la ligne qui concerne la résolution de sujet</a> parmi les autres cas.<br>
On vérifie le statut qu’on doit attribuer au sujet, résolu ou non-résolu, on enregistre cette modification en ligne 351 en-dessous du bloc de conditions, puis on retourne la réponse en JSON.</p>
<p>Enfin, on récupère ça côté client, et en cas de succès on effectue les modifications adéquates (changement de classes, changement de valeur visible ou non, etc.), bref tout ce que tu peux voir <a href="https://github.com/zestedesavoir/zds-site/blob/dev/assets/js/ajax-actions.js#L161">à partir de cette ligne</a>.</p>Recommandations pour premiers pas Ajax sous Jango, message #1896252018-09-21T20:59:39+02:00dubser/@dubserhttps://zestedesavoir.com/forums/sujet/11334/recommandations-pour-premiers-pas-ajax-sous-jango/?page=1#p189625<p>Allo,</p>
<p>Quelqu’un pourrais-il m’indiquer un tutoriel ou plus probablement un exemple minimal de codes fonctionnel pour utiliser Ajax sous Django. J’utilise déjà Bootstrap donc les librairies JQuery sont déjà présentes. Je cherche quelque chose de très simple …. Ex sur modification de la valeur d’un champ effectuer une écriture au serveur et ré-écrire la valeur modifiée de ce champ seulement dans la page web.</p>
<p>Environnement
Django 2.1.1
Python 3.5.2
Ubuntu 16.04</p>
<p>Merci beaucoup.</p>
<p>dubser</p>Charger automatiquement les options de choix de select2 , message #1699272018-01-01T17:16:22+01:00cepus/@cepushttps://zestedesavoir.com/forums/sujet/9917/charger-automatiquement-les-options-de-choix-de-select2/?page=1#p169927<p>Quand tu appelles cet endpoint, qu’obtiens-tu ?</p>
<p>Que dit la console de ton navigateur ?</p>Charger automatiquement les options de choix de select2 , message #1699092018-01-01T11:25:01+01:00kanmaber/@kanmaberhttps://zestedesavoir.com/forums/sujet/9917/charger-automatiquement-les-options-de-choix-de-select2/?page=1#p169909<p>Bonjour Victor.
Voici <a href="https://southcoastweb.co.uk/jquery-select2-v4-ajaxphp-tutorial/">le lien de la page qui propose un exemple en Php</a>:
Les données sont sérialisées en JSOM.</p>
<p>Les liens suivants : <a href="https://select2.org/data-sources/formats">lien1</a> <a href="https://select2.org/data-sources/ajax">lien2</a> traitent du format des données et de l’envoie de donnée depuis un serveur.</p>
<p>Select2 accepte bien le format JSON. Mais comme je l’ai dit précédemment, je ne sais pas comment passer les données d’un objet de données et les envoyer à Ajax.</p>
<p>La dernière solution que j’ai essayé est la suivante:</p>
<div><table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6
7
8
9</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="k">def</span> <span class="nf">Combo_Oev</span><span class="p">(</span><span class="n">request</span><span class="p">):</span>
<span class="k">return</span> <span class="n">JsonResponse</span><span class="p">({</span><span class="s1">'results'</span><span class="p">:[</span>
<span class="p">{</span>
<span class="s1">'text'</span><span class="p">:</span><span class="nb">str</span><span class="p">(</span><span class="n">o</span><span class="o">.</span><span class="n">Nom</span><span class="p">)</span><span class="o">+</span><span class="s1">' '</span><span class="o">+</span><span class="nb">str</span><span class="p">(</span><span class="n">o</span><span class="o">.</span><span class="n">Prenom</span><span class="p">),</span>
<span class="s1">'id'</span><span class="p">:</span><span class="n">o</span><span class="o">.</span><span class="n">CuOev</span>
<span class="p">}</span>
<span class="k">for</span> <span class="n">o</span> <span class="ow">in</span> <span class="n">Oev</span><span class="o">.</span><span class="n">objects</span><span class="o">.</span><span class="n">all</span><span class="p">()</span>
<span class="p">]</span>
<span class="p">})</span>
</pre></div>
</td></tr></table></div>
<p>Là encore, ça ne marche pas bien. </p>Charger automatiquement les options de choix de select2 , message #1698262017-12-30T18:46:01+01:00cepus/@cepushttps://zestedesavoir.com/forums/sujet/9917/charger-automatiquement-les-options-de-choix-de-select2/?page=1#p169826<p>Salut !</p>
<p>Il n’est pas vraiment possible de te répondre, il nous manque des informations. Le code PHP que tu montres semble ajouter un hash dans une liste, mais on ne sait pas comment cette liste est sérialisée pour être lisible par select2. JSON ? CSV ?</p>
<p>Si tu ne comprends pas bien ce dont je parle, donne plus de contexte à propos de ce code PHP, par exemple donne le lien où tu l’as trouvé.</p>
<p>Donne également la page de documentation de select2 qui contient ce que tu veux utiliser. Je ne serais pas surpris qu’il accepte une réponse JSON, ce qui rendrait possible de te répondre.</p>Charger automatiquement les options de choix de select2 , message #1698242017-12-30T18:24:08+01:00kanmaber/@kanmaberhttps://zestedesavoir.com/forums/sujet/9917/charger-automatiquement-les-options-de-choix-de-select2/?page=1#p169824<p>Bonsoir à tous.
<strong>Ma requette Ajax arrive à appeler maintenant la fonction</strong> mentionnée dans le premier message. Mais je ne sais pas <strong>dans quel format envoyé la réponse de retour</strong>.
Je m’excuse de parler d’un autre langage, mais la solution que j’ai trouvée en php marche bien. Il s’agit d’un tableau associative à deux dimensions du genre :
<code>php
$data[] = array('id' => $value['productId'], 'text' => $value['productName']);</code></p>
<p>c’est tout comme si on a mis en mémoire un fichier à deux champs: id et text.
De fait, la documentation de select deux dit précisement que les données doivent être sous ce format.</p>
<p>Alors, ma question est <strong>comment réaliser ce format de donnée en django pour l’envoyer comme réponse à select2 ?</strong>
J’espère que quelqu’un a compris ma question et pourra m’aider.
D’avance merci.</p>