0

Tenho um formulário com diversos campos, um deles eu utilizo TagsManager para inserir tags(clientes cadastrados), agora quando eu envio este formulário eu preciso salvar os ID's destes clientes cadastrados no mesmo campo, separados por vírgula.

Já tentei utilizar o campo Hidden e também o parâmetro: HiddenTagListId, e não funcionou.

Documentação: https://maxfavilli.com/jquery-tag-manager

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!'
                    ]
                },
            })
        );

A busca do autocomplete retorna:

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

echo json_encode($data);

Quando uso a função "typeahead:selected", consigo acessar "label" ou "value".

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

Porém, utilizando as funções "tm:pushed" e "tm:spliced" que você sugeriu, não consigo acessar nem "label" nem "value". O parâmetro item retorna somente o nome que está na tag e item.value dá erro. Como fazer para adicionar essas informações na tag?


Tentei adaptar o cometário do Mahdi-Farhani na documentação mas não consegui também. Segue o link:

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

1 Resposta 1

0

Por padrão quando você cria uma tag o valor dela é adicionado ao input de name hidden-tags:

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

Somente com esse campo já possível obter os dados no servidor, mas supondo que ele não te atenda, vi na documentação que existe uma forma de você controlar quando uma tag é inserida/removida:

tm:pushed Quando uma Tag é inserida.

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

tm:spliced Quando uma Tag é removida.

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

Sabendo disso, criei um método para criar um campo input toda vez que uma TAG for adicionada e remover esse input quando sua respectiva tag for removida, assim você poderá fazer a requisição pelo name do input no lado do servidor, isso retorná para você um vetor com os dados dos clientes:

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

<script src="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>

<link rel="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>

1
  • alguma dica? Já tentei de diversas maneiras e não obtive sucesso. Commented 27/11/2017 às 21:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .