Bonjour,

J'arrive pas à resoudre cette, J'utilise la librairie token-input et je souhaite mettre à l'intéreiru d'un table créé en js (ajout d'une ligne) champs permettant l'autocompletion.
Le code cide ssous devrait fonctionner et ce n'est pas le cas et j'arrive pas à trouver la solution; La console n'indique absolument aucune action avec le id.

Mes connaissances sont limité en js et j'aurais aimé savoir si vous pouvez me donner un petit coup de main.

Merci

version HTML

note :specification_row est un incrément issue du nombre de ligne dans la table
look `$(document).ready(function()` and `id="specificationName' + specification_row + '"` sont identique mais ne fonctionne pas

Table script js

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
30
31
32
33
34
35
 <script type="text/javascript"><!--
      var specification_row = 3;
 
        $(document).ready(function() {
        $("#specificationName' + specification_row + '").tokenInput("http://....../products_specification_ajax.php" ,
            {
              tokenLimit: 1,
              resultsLimit: 5,
              onResult: function (results) {
                $.each(results, function (index, value) {
                  value.name = value.id + " " + value.name;
                });
                return results;
              }
            });
      });
 
 
      function addSpecificationValue() {
       html  = '<tr id="specification-row' + specification_row + '">';
 
    //specification_name
       html += '<td>';
       html += '  <input type="text" name="products_specification[' + specification_row + '][name]" value="" id="specificationName' + specification_row + '" class="form-control token-input" />';
       html += '  <input type="hidden" name="product_specification[' + specification_row + '][specification_id]" value="" />';
       html += '</td>';
 
    //remove    
        html += '  <td class="text-md-right"><button type="button" onclick="$(\'#specification-row' + specification_row + '\').remove();" data-toggle="tooltip" title="Remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
        html += '</tr>';
 
        $('#specification tbody').append(html);
 
        specification_row++;
    }

Mon code en php


Code php : 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
 
 
            $content .= '<tr id="specification-row' . $t . '">';
// Mon autocompletion (fonctionne)
            $content .= '  <td>' . HTML::inputField('products_specification[' . $t . '][name]', $specification_name, 'class="form-control token-input" id="specificationName' . $t . '"', null, null, null);
    </td>';
              $content .= ' </tr
>';
//ajout d'une nouvelle ligne
              $content .= '    </tbody>
                                  <tfoot>
                                    <tr>
                                      <td colspan="5"></td>
                                      <td class="text-md-right"><button type="button" onclick="addSpecificationValue();" data-toggle="tooltip" title="' . $this->app->getDef('button_add') . '" class="btn btn-primary"><i class="fas fa-plus-circle"></i></button></td>                             
                                    </tr>
                                  </tfoot>
                                </table></td>
                              </tr>
                            </table>
                     ';
 
 
 
 
     $products_specification_ajax = OSCOM::link('products_specification_ajax.php');
 
              $output = <<<EOD
            <script type="text/javascript"><!--
    
    
              var specification_row = $t; // increment element 
    // call token-input js for autocompletion : data list
    
    
    
                $(document).ready(function() {
                $("#specificationName' + specification_row + '").tokenInput("{$products_specification_ajax}" ,
                    {
                      tokenLimit: 1,
                      resultsLimit: 5,
                      onResult: function (results) {
                        $.each(results, function (index, value) {
                          value.name = value.id + " " + value.name;
                        });
                        return results;
                      }
                    });
              });
    
  Création de la nouvelle ligne en js 
    
              function addSpecificationValue() {
               html  = '<tr id="specification-row' + specification_row + '">';
    
               html += '<td>';
    
// input autocompketion 
               html += '  <input type="text" name="products_specification[' + specification_row + '][name]" value="" id="specificationName' + specification_row + '" class="form-control token-input" />';
    
    
               html += '  <input type="hidden" name="product_specification[' + specification_row + '][specification_id]" value="" />';
               html += '</td>';  
 //remove    
                html += '  <td class="text-md-right"><button type="button" onclick="$(\'#specification-row' + specification_row + '\').remove();" data-toggle="tooltip" title="Remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
                html += '</tr>';
    
                $('#specification tbody').append(html);
    
                specification_row++;
            }
            </script>
        EOD;