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.