Ranger les données de ma db à partir d'un clique

Ranger les données de ma db à partir d'un clique - Javascript/Node.js - Programmation

Marsh Posté le 27-02-2024 à 06:53:42    

Bonjour,
 
Je bloque depuis plusieurs jours... 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).  
 
Ci-après, voici le contexte d'exécution :  
 
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" :  
 

  • Mon ficher urls.py du projet "sgbj" :
Code :
  1. from django.contrib import admin
  2. from django.urls import path, include
  3. from books import views as books_views
  4. from . import views as project_views
  6. urlpatterns = [
  7.     path('admin/', admin.site.urls),
  8.     path('', books_views.catalog_view, name='index'),
  9.     path('contact/', project_views.contact_view, name='contact'),
  10.     path('publications/', include('articles.urls'), name='articles'),
  11. ]


 

  • Le fichier views.py du projet "sgbj" :  
Code :
  1. from django.shortcuts import render
  2. from books.views import catalog_view as books_catalog_view
  3. def index_view(request):
  4.     catalog_context = books_catalog_view(request)
  5.     books = catalog_context.get('catalog')
  6.     return render(request, 'index.html', {'catalog': books})


 

  • Le template index.html du projet "sgbj" :  
Code :
  1. {% extends 'template_base.html' %}
  3. {% block title %}Home_page{% endblock %}
  5. {% block content %}
  6.    
  7.     {% block catalog_content %}
  8.         <div id="catalog_content">
  9.             {% include 'catalog.html' %}
  10.         </div>
  11.     {% endblock %}
  13.     {% block sort_books %}
  14.     {% endblock %}
  16. {% endblock %}


 

  • Le template catalog.html de l'application "books":
Code :
  1. {% extends 'template_base.html' %}
  2. {% block title %}Catalog_page{% endblock %}
  4. {% block content %}
  6.     {% block sort_books %}
  7.         <div class="sort_books">
  8.             Tri par : 
  9.             <select id="sort_lastname" class="select_books sort_lastname" name="lastname">
  10.                 <option id="sort_lastname_author" class="sort_label" disabled selected hidden value="no_specific">auteur </option>
  11.                 <option id="sort_lastname_AZ" class="display_asc option_transparent" value="asc">A ... Z</option>
  12.                 <option id="sort_lastname_ZA" class="display_desc option_transparent" value="desc">Z ... A</option>
  13.             </select>
  14.             <select id="sort_title" class="select_books" name="titre">
  15.                 <option id="sort_title_title" class="sort_label" disabled selected hidden value="no_specific">titre </option>       
  16.                 <option id="sort_title_AZ" class="display_asc option_transparent" value="asc">A ... Z</option>
  17.                 <option id="sort_title_ZA" class="display_desc option_transparent" value="desc">Z ... A</option>
  18.             </select>
  19.             <select id="sort_date" class="select_books" name="date">
  20.                 <option id="sort_date_date" class="sort_label" disabled selected hidden value="no_specific">date </option>
  21.                 <option id="sort_date_-+" class="display_asc option_transparent" value="asc">- ... +</option>
  22.                 <option id="sort_date_+-" class="display_desc option_transparent" value="desc">+ ... -</option>
  23.             </select>
  24.         </div>
  25.     {% endblock %}
  27.     {% block catalog_title %}
  28.         <h1>Ma bibliothèque</h1>
  29.     {% endblock %}
  31.     {% for book in catalog %}
  32.         <p class="catalog">
  33.             <span class="lastname">{{ book.lastname }}</span>
  34.             <span class="firstname">{{ book.firstname }}</span>
  35.             <span class="title"><b>{{ book.title }}</b></span>
  36.             <span>ISBN : <span class="isbn">{{ book.isbn }}</span>
  37.         </p>
  38.     {% endfor %}
  40. {% endblock %}


 

  • La vue views.py de l'application "books" :
Code :
  1. from django.shortcuts import render
  2. from django.http import JsonResponse
  3. from django.db.models.functions import Lower
  4. from .models import Book
  6. def catalog_view(request):
  7.     books = Book.objects.all()
  8.     return render(request, 'books/catalog.html', {'catalog': books})
  10. def sort_books_view(request):
  11.     if request.is_ajax() and 'selected_option' in request.GET:
  12.         selected_column_option = request.GET.get('selected_option')
  13.         column_mapping = {
  14.             'sort_lastname_AZ': 'lastname',
  15.             'sort_lastname_ZA': '-lastname',
  16.             'sort_firstname_AZ': 'firstname',
  17.             'sort_firstname_ZA': '-firstname',
  18.             'sort_title_AZ': 'title',
  19.             'sort_title_ZA': '-title',
  20.             'sort_date_-+': Lower('date'),
  21.             'sort_date_+-': Lower('-date'),
  22.         }
  23.        
  24.         if selected_column_option in column_mapping:
  25.             sort_column = column_mapping[selected_column_option]
  26.             books = Book.objects.all().order_by(sort_column)
  27.             sorted_books = [{'lastname': book.lastname, 'firstname': book.firstname, 'title': book.title, 'isbn': book.isbn} for book in books]
  28.             return JsonResponse(sorted_books, safe=False)
  29.         else:
  30.             return JsonResponse({'error': 'Option de tri non valide.'})
  31.     else:
  32.         return JsonResponse({'error': 'Cette vue ne peut être appelée que via AJAX.'})


 

  • Mon script selector_books.js de l'application "books" (voir les lignes 54 à 91):
Code :
  1. document.addEventListener('DOMContentLoaded', function() {
  2.     var selectElements = document.querySelectorAll('#sort_lastname, #sort_firstname, #sort_title, #sort_date');
  3.     var defaultLabelOptions = {};
  5.     selectElements.forEach(function(selectElement) {
  6.         var defaultLabelOption = selectElement.querySelector('option');
  7.         defaultLabelOptions[selectElement.id] = defaultLabelOption.textContent;
  8.         defaultLabelOption.style.display = 'none';
  10.         selectElement.addEventListener('change', function() {
  11.             var selectedOption = this.options[this.selectedIndex];
  12.             var optionClass = selectedOption.getAttribute('class');
  13.             var optionText = selectedOption.textContent;
  15.             selectElements.forEach(function(otherSelect) {
  16.                 if (otherSelect !== selectElement) {
  17.                     var defaultOption = otherSelect.querySelector('option[value="no_specific"]');
  18.                     defaultOption.style.display = '';
  19.                     defaultOption.selected = true;
  20.                     otherSelect.querySelectorAll('option').forEach(function(option) {
  21.                         option.style.display = '';
  22.                     });
  23.                 }
  24.             });   
  26.             // Afficher toutes les options
  27.             var options = selectElement.querySelectorAll('option');
  28.             options.forEach(function(option) {
  29.                 option.style.display = '';   
  30.             });
  32.             // Cacher l'option sélectionnée
  33.             selectedOption.style.display = 'none';
  35.             if (optionClass === 'sort_label' || (optionText !== 'auteur A ... Z' && optionText !== 'auteur Z ... A' && optionText !== 'titre A ... Z' && optionText !== 'titre Z ... A' && optionText !== 'date - ... +' && optionText !== 'date + ... -')) {
  36.                 selectedOption.textContent = defaultLabelOptions[selectElement.id] + optionText;
  37.             }
  39.             // Masquer les options appropriées sans masquer l'élément sélectionné
  40.             if (optionClass === 'display_asc') {
  41.                 var descOptions = selectElement.parentNode.querySelectorAll('.display_desc');
  42.                 descOptions.forEach(function(option) {
  43.                     option.style.display = '';
  44.                 });
  45.             } else if (optionClass === 'display_desc') {
  46.                 var ascOptions = selectElement.parentNode.querySelectorAll('.display_asc');
  47.                 ascOptions.forEach(function(option) {
  48.                     option.style.display = '';
  49.                 });
  50.             }
  51.         });
  52.     });
  54.     $('#sort_lastname, #sort_firstname, #sort_title, #sort_date').on('change', function() {
  55.         var selectedOption = $(this).val();
  56.         if (selectedOption === "AZ" || selectedOption === "-+" || selectedOption === "ZA" || selectedOption === "+-" ) {
  57.             var dataToSend = {};
  58.             var selectedColumn = '';
  59.            
  60.             if ($(this).attr('id') === 'sort_lastname') {
  61.                 selectedColumn = 'lastname';
  62.                 dataToSend['selected_lastname_option'] = 'sort_' + selectedColumn + '_' + selectedOption.toUpperCase();
  63.                 dataToSend['selected_firstname_option'] = 'sort_firstname_' + selectedOption.toUpperCase();
  64.             } else if ($(this).attr('id') === 'sort_firstname') {
  65.                 selectedColumn = 'firstname';
  66.                 dataToSend['selected_firstname_option'] = 'sort_' + selectedColumn + '_' + selectedOption.toUpperCase();
  67.                 dataToSend['selected_lastname_option'] = 'sort_lastname_' + selectedOption.toUpperCase();
  68.             } else if ($(this).attr('id') === 'sort_title') {
  69.                 selectedColumn = 'title';
  70.             } else if ($(this).attr('id') === 'sort_date') {
  71.                 selectedColumn = 'date';
  72.             }
  73.            
  74.             $.ajax({
  75.                 url: '',
  76.                 data: dataToSend,
  77.                 dataType: 'json',
  78.                 success: function(data) {
  79.                     updateIndexData(data, selectedColumn);
  80.                 }
  81.             });
  82.         }
  83.     });
  85.     function updateIndexData(data, selectedColumn) {
  86.         $('#catalog_content .catalog p').each(function(index) {
  87.             $(this).find('.' + selectedColumn).text(data[index][selectedColumn]);
  88.             $(this).find('.isbn').text('ISBN : ' + data[index].isbn);
  89.         });
  90.     }
  91. });


 
 
L'affichage web en local fonctionnait bien avant que j'essaye de trier les données par ordre croissant/décroissant.
S'il vous plaît, j'espère que vous voudrez bien m'aider à identifier l'origine de la non exécution de mon code!


Message édité par relphe le 27-02-2024 à 10:14:31
Reply

Marsh Posté le 27-02-2024 à 06:53:42   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed