Ajax,dropdown, mustache and php / mysql

bonjour,

je souhaite réaliser ce process mais je suis bloqué (pas bon en js)

j'affiche sur ma page un dropdown avec les catégories, à côté j'ai un bouton ajouté.
je peux sélectionner ma catégories ou éventuellement ajouter une nouvelle catégories en cliquant sur le bouton.

J'ai besoin de réaliser un script qui permet lorsque j'ai ajouté la catégorie et que je clique sur la dropdown, la nouvelle catégories s'affiche dans la dropdown.

Voilà ou j'en suis :

categories_ajax.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  $Qcheck = $OSCOM_Db->prepare('select distinct c.categories_id as id,
                                         cd.categories_name as name
                                   from :table_categories c,
                                        :table_categories_description cd
                                   where  c.categories_id = cd.categories_id  
                                  ');
    $Qcheck->execute();
 
    $list = $Qcheck->rowCount() ;
 
    if ($list > 0) {
      $array = [];
 
      while ($value =  $Qcheck->fetch() ) {
        $array[] = $value;
      }
 
    # JSON-encode the response
      $json_response = json_encode($array); //Return the JSON Array
 
    # Return the response
      echo $json_response;

Résultat

Code:

[{"id":"22","name":"Barri\u00e8res"},{"id":"22","name":"Barriers"},{"id":"21","name":"Entrance"},{"id":"21","name":"Entr\u00e9e"},{"id":"23","name":"Panneaux Signal\u00e9tique"},{"id":"20","name":"Signage Camping"},{"id":"20","name":"Signal\u00e9tique Camping"},{"id":"23","name":"Signs and Signs"}]

mon fichier

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
 
 <?php
          $categories_ajax = OSCOM::link('categories_ajax.php');
?>
 
        <script type="text/javascript">
          function Mycategory_id() {
            $("#myAjax").on('click', function(){
              $.ajax({
                url: '<?php echo $categories_ajax; ?>',
                dataType: 'json',
                success: function(data){
                  //data returned from php
                  var options_html = '';
                  for(index in data){
                    var category_id = data[index]['categories_id'];
                    var category_name = data[index]['categories_name'];
                    options_html += '<option value="'+category_id+'">' + category_name + '</option>';
                  }
                  $('#category_id').html(options_html);
                }
              });
            )};
</script>

A partir de la pour afficher le résultat dans la dropdown, je suis bloqué.
Comment utiliser mustache dans la création du dropdown <select id="">{{...}}</select>

Merci de votre aide.