Get TagsManager IDs

Question

Get TagsManager IDs

Navigation

#1 by (0 votes)

0

I have a form with several fields, one of them I use TagsManager to insert tags (clients registered), now when I send this form I need to save the ID's of these clients registered in the same field, separated by commas.

I have tried to use the Hidden field as well as the parameter: HiddenTagListId, and it did not work.

Documentation: link

HTML:

<div class="form-group col-xs-6">
<label for="parte_interessada">Parte interessada</label>
<input type="text" class="typeahead cliente form-control" id="cliente" name="cliente">
<div class="tags_cliente"></div>

JAVASCRIPT

<script>
    $(document).ready(function() {
        var tagApi = $(".cliente").tagsManager({
            tagsContainer: '.tags_cliente',
        });

        var cliente= new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.whitespace,
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: "busca-cliente.php?query=%QUERY",
                wildcard: "%QUERY"
            }
        });

        $('#cliente').typeahead(null, {
                name: 'cliente',
                display: 'label',
                source: cliente,
                afterSelect: function(item) {
                    tagApi.tagsManager("pushTag", item);
                },
                templates: {
                    header: '<strong>&nbsp;&nbsp;&nbsp;&nbsp;Clientes encontrados:</strong>',
                    empty: [
                        '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Não foram encontrados resultados com os termos informados!'
                    ]
                },
            })
        );

The autocomplete search returns:

while($row = $result->fetch_assoc()){
     $data[] = array(
        'label' => $row['nome'],
        'value' => $row['id'],
    );
}

echo json_encode($data);

When I use the "typeahead: selected" function, I can access "label" or "value".

.on('typeahead:selected', function(event, data){
    $('#id_cliente').val(data.value);
});

However, using the "tm: pushed" and "tm: spliced" functions you suggested, I can not access either "label" or "value". The item parameter returns only the name that is in the tag and item.value gives error. How do I add this information to the tag?

I tried to adapt Mahdi-Farhani's commentary in the documentation but I could not. Follow the link:

github.com/max-favilli/tagmanager/issues/7

tags typeahead

asked by anonymous 13.11.2017 / 14:39

1 answer

Passing information to another Activity Convert java.util.date to java.sql.Date

score 0 · Answer 1

By default when you create a tag its value is added to input of hidden-tags :

<input type="hidden" name="hidden-tags" value="">

Only with this field is it possible to get the data on the server, but assuming it does not meet you, I saw the documentation that there is a way for you to control when a tag is inserted / removed:

tm: pushed When a tag is inserted.

jQuery(".tm-input").on('tm:pushed', function(e, tag) {
   alert(tag + " was pushed!");
});

tm: spliced When a tag is removed.

jQuery(".tm-input").on('tm:spliced', function(e, tag) {
   alert(tag + " was removed!");
});

Knowing this, I've created a method to create a input field every time a TAG is added and remove that input when its respective tag is removed, so you can request name from input on the server side, this will return you a vector with the client data:

<input type="hidden" name="clientes" value="" />

$(document).ready(function() {
  $(".tm-input").tagsManager();
  
  //Quando uma tag for adicionada
  $(".tm-input").on('tm:pushed', function(e, item) {

    //Aqui poderia ser item.id dependendo de como você cria tag
      var inputClientes = "<input type='hidden' name='clientes' value='" + item + "' />";
      
      $("#tagsInseridas").append(inputClientes);
      
    });
    
    //Quando uma tag for removida
    $(".tm-input").on('tm:spliced', function(e, tag) {
      $("input[name='clientes'][value='" + tag +"']").remove();
    });
    
    $("#visualizar").on("click", function(){
      if($("input[name='clientes']").length > 0){
        console.log($("input[name='clientes']"));
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script><linkrel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.css" />

<div>
  <p id="hint">Preencha o nome da tag e pressione enter para criá-la:</p>
  <input type="text" name="tags" placeholder="Tags" class="tm-input"/>
</div>
<div id="tagsInseridas">

</div>
<button type="button" id="visualizar">
  Visulizar inputs criados
</button>