[BooStrap] Actutalisation Dropdown

Version imprimable

Bonjour,

Pas sur que je suis dans le bon forum.

Depuis quelque temps mon dropdowwn ajax ne fonctionne plus,je suppose que c'est le passage à Boostrap 5 mais j'en suis pas sur.
- Sur une modale je crée une nouvelle catégorie
- Je clique sur la dropdown et la catégorie devrait apparaitre, ce qui ne ne se fait pas

Merci

1ere poartie le code
data-bs-refresh="true". Peux etre un probléme ici ?

Code : Tout sélectionner

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
       $content .= '<div id="myAjax">';
        $content .= HTML::selectMenu('move_to_category_id[]', $category_tree, $current_category_id, 'id="move_to_category_id"');
        $content .= '</div>';
        $content .= HTML::hiddenField('current_category_id', $current_category_id);
        $content .= '<a href="' . $this->app->link('CategoriesPopUp') . '"  data-bs-toggle="modal" data-bs-refresh="true" data-bs-target="#myModal">' . HTML::image($this_Template->getImageDirectory() . 'icons/create.gif', $this->app->getDef('text_create')) . '</a>';
        $content .= '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
        $content .= '<div class="modal-dialog">';
        $content .= '<div class="modal-content">';
        $content .= '<div class="modal-body"><div class="te"></div></div>';
        $content .= '</div> <!-- /.modal-content -->';
        $content .= '</div><!-- /.modal-dialog -->';
        $content .= '</div><!-- /.modal -->';
        $content .= '</div>';

le javascript

Code:

1
2
3
4
5
<script>
$('#tab1ContentRow1').append(
    '{$content}'
);
</script>

le fichier est bien lu et la console affiche la nouvelle données. Donc peut etre c'est au niveau du refresh de la dropdown.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  jQuery(document).ready(function() {
    $("#myAjax").on('click', function () {
      var selectedOptionVal = $('#category_id').val();
      $.ajax({
        url: '{$categories_ajax}',
        dataType: 'json',
        success: function (data) {
          //data returned from php
          var options_html = '';
          for (var index in data) {
            var category_id = data[index]['id'];
            var category_name = data[index]['text'];
            var selectedString = category_id == selectedOptionVal ? ' selected="selected"' : '';
            options_html += '<option value="' + category_id + '"' + selectedString + '>' + category_name + '</option>';
          }
          $('#category_id').html(options_html);
        }
      });
    });
  })

26/02/2021, 13h57
Toufik83

Bonjour,

Quelle version de bootstrap utilises-tu compressée (.min.js) ou normal (.js) ? parce que je viens de tester et le modal s'affiche sans souci.
26/02/2021, 14h30
oitsuki

Bonjour,
Merci pour ton retour
Le modal est ok, c'est l'actualisation du dropdown qui pose souci.

.min.js
bootrstrap5 beta 2
26/02/2021, 15h06
Toufik83
Le retour d'ajax de success apparait dans la console du navigateur ?
Code:

1 2 3 4 success: function (data){ console.log("Data est :",data);//cette ligne apparait ? }
26/02/2021, 16h07
oitsuki

Oui la ligne apparait lors de la crèation de la catégorie vial modal
Via le modal j'ai crée la catégories test1
Cliquez sur dropdown et dans mon retour de console j'ai bien test1 mais celui ne s'affiche pas dans le dropdown comme il le devrait.
Je suis obligé de retélécharger la page pour voit Test1

Code:

[{"id":"0","text":"--- Top ---"},{"id":30,"text":"test"},{"id":31,"text":"test"},{"id":32,"text":"test1"},{"id":14,"text":"Camera"},{"id":8,"text":"Components"},{"id":9,"text":" Mice and Trackballs"},{"id":10,"text":" Monitors"},{"id":2,"text":"Desktops"},{"id":1,"text":" MacBook"},{"id":4,"text":" PC"},{"id":3,"text":"Laptops & Notebooks"},{"id":5,"text":" Mac"},{"id":6,"text":" Windows"},{"id":13,"text":"Phones & PDAs"},{"id":12,"text":"Tablets"}]
26/02/2021, 16h35
Toufik83

Probablement parce que l'élément ayant l'id #category_id n'existe pas dans ton code html, et c'est la ligne $('#category_id').html(options_html); qui permet d'ajouter le contenu du retour ajax dans #categorie_id.

Inspectes le code html et vérifies qu'il y'a bien une balise ayant l'id en question.
27/02/2021, 09h09
oitsuki

Oui tu as raison,
changé categorie_id par move_to_category_id
Merci beaucoup

Juste une question, connais tu un script similaire mais en pure js que je pourrais appliquer (j'essaye de supprimer jquery) ?

Bonjour,

D'abord, marque la discussion comme résolue puis tu peux utiliser la fonction fetch à la place :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
window.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOM entièrement chargé et analysé");
	document.querySelector('#myAjax')
	.addEventListener('click',function(e){
		 var selectedOptionVal = document.querySelector('#move_to_category_id').value
		 ,options_html="";
		fetch("index1.php?mod=tracabiliteEnregistrement&act=transaction&refBancTest="+selectedOptionVal)
		  .then(function(response) {
			return response.json();
		  })
		  .then(function(jsonResponse) {
			// équivalent à success d'ajax 
			console.log("data is :",jsonResponse);
			for(var index in jsonResponse){
				let category_id = jsonResponse[index].id;
				let category_name = jsonResponse[index].text;
				let selectedString = category_id == selectedOptionVal ? ' selected="selected"' : '';
				options_html += '<option value="' + category_id + '"' + selectedString + '>' + category_name + '</option>';
			}
			$('#move_to_category_id').html(options_html);
		  })
		  .catch(function(err) {
			  //équivalent à error d'ajax 
			alert("error :"+err);
		});
 
	});
});

Puis-je savoir pourquoi tu veux supprimer jQuery ?

27/02/2021, 14h53
oitsuki
Boostrap 5 n'utilise plus jquery
pas d'actualisation de library donc pas de pb d'imcompabilité à priori,
Enfin cela évite de mettre à chaque des plug in jquery. Cela fais gagner aussi du temps en téléchargement d'une page,
Je vois ca comme ca

Je fais ça petit à petit et en fonction de mes connaissances si peut soit elle en js.

https://www.developpez.com/actu/2460...ur-JavaScript/

sinon fois au niveau de l'appel du fichier ajax dans ton exemple ci dessus . Cela se passe comme ca ?
Code:

1 2 // fetch("index1.php?mod=tracabiliteEnregistrement&act=transaction&refBancTest="+selectedOptionVal) fetch({$url_categories_ajax}+selectedOptionVal)
En tout cas merci beaucoup pour ton aide.

Si tu veux intégrer une variable php dans le contexte js c'est comme ça :
Code:

1 2 fetch('<?=$url_categories_ajax;?>'+selectedOptionVal)
Ou bien avec echo :
Code:

1 2 fetch('<?php echo $url_categories_ajax;?>'+selectedOptionVal)
Et pour le temps de chargement d'une page, rien ne t'empêche de mettre tes scripts jQuery à la fin du body :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html lang="fr"> <head><title>Titre de page</title></head> <body>   <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"> </script>  <script> $(document).ready(function(){ console.log('document prêt'); }); </script> </body> </html>
jQuery c'est seulement du javascript pur mais avec sa propre syntaxe comme n'importe quelle autre bibliothèque...