Discussion :

[oitsuki]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
        }
      });
    });
  })

[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.

[oitsuki]

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

.min.js
bootrstrap5 beta 2

[Toufik83]

Le retour d'ajax de success apparait dans la console du navigateur ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

[{"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"}]

[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.

[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) ?

[Toufik83]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
//		fetch("index1.php?mod=tracabiliteEnregistrement&act=transaction&refBancTest="+selectedOptionVal)
		fetch({$url_categories_ajax}+selectedOptionVal)

En tout cas merci beaucoup pour ton aide.

[Toufik83]

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

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
fetch('<?=$url_categories_ajax;?>'+selectedOptionVal)

Ou bien avec echo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
  <!-- code html ou ce que tu veux.... -->
  <!-- chargement de jQuery à la fin -->
  <script
    src="https://code.jquery.com/jquery-3.5.1.js"
    integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    crossorigin="anonymous">
  </script>
  <!-- utilisation de jQuery -->
  <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...