Ir para conteúdo
rafaelmaiabr

Jquery Repeater + Autocomplete

Recommended Posts

Olá comunidade!

 

Estou com dificuldades em utilizar duas funções Jquery (Repeater e Autocomplete). Separado funciona, mas se eu utilizar o autocomplete dentro do repeater não funciona.

 

Bibliotecas: jquery-3.3.1.min.js, jquery-ui.js e jquery.repeater.min.js

<script type="text/javascript">

$(document).ready(function()
{
    $('.autocompletar').autocomplete(
    {
        source: "./includes/input_autoCompletar.php",
        minLength: 3
    });
});

  
$(document).ready(function () {
    'use strict';
    $('.repeater').repeater({
        show: function () {
            $(this).slideDown();
        },
        initEmpty: true,
        hide: function (deleteElement) {
            if(confirm('Deseja excluir este item?')) {
                $(this).slideUp(deleteElement);
            }
        },
        ready: function (setIndexes) {

        }
    });

});

</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Depois de horas quebrando a cabeça consegui resolver...

Segue o código abaixo

 

$(document).ready(function () {
    'use strict';   
    $('.repeater').repeater({
        show: function () {
            $(this).slideDown();
            //Auto completar para campos dentro da função repeater
            $('.autocompletar_multiplo').autocomplete(
            {
                source: "<?=$urlPrincipal.'includes/input_autoCompletar.php'?>",
                minLength: 1
            });

        },
        initEmpty: true,
        hide: function (deleteElement) {
            if(confirm('Deseja excluir este item?')) {
                $(this).slideUp(deleteElement);
            }
        },
        ready: function (setIndexes) {

        }
    });

});

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Maykel-ctba
      Tenho a seguinte necessidade. Tenho que fazer uma solução similar à Locaweb onde movo 3 sliders ao mesmo tempo. E eles devem ter os steps definidos de acordo com os valores do plano.
       
      Exemplo: https://www.locaweb.com.br/cloud/cloud-hosting/

       
      Primeira dúvida é: Como estabelecer os steps dinamicamente entre os valores? Eu tenho um array (2, 4, 8, 16, 32) que são os valores da "memória" por exemplo. Mas não consigo fazer com que o slider pule para a próxima opção.
       
      A outra dúvida é: Como fazer com que os slides sejam acionados ao mesmo tempo?
      $(function(){ var arrayCPU = [2,4,8,16,32]; var arrayRAM = [7,15,30,60,120]; var arrayDisco = [50,100,200,400,400]; $("#sliderCPU").slider({ min: 2, max: 120 }); $("#sliderRAM").slider({ min: 7, max: 120 }); $("#sliderDisco").slider({ min: 50, max: 50 }); });
    • Por kelvim
      Boa tarde,
       
      estou usando o calendário do jquery ui o datepicker e funciona perfeitamente. estou usando assim:
      $("#data_vinculo_outorga").datepicker({ language: "pt-BR", format: "dd/mm/yyyy" }); O problema é que preciso usar data por extenso. algo como dia "03 de Março de 2017"
      tentei "dd 'de' MM 'de' yyyy" mas o resultado é: 03 '3e' Março 3e 2017
       
      Alguém sabe como fazer isso?
       
      Agradeço desde já.
    • Por buschdead
      Estou com um problema com draggable. o código funciona normal! mais quando eu adiciono via jquery um novo código o draggable não funciona!
       
      O que pretendo fazer:
       
      Eu quero criar um construtor de html de forma que eu coloque os elementos e possa distribuir ele aonde eu quiser no corpo do HTML como um WIX porem mais simples! o draggable deixa eu arrastar o elemento na tela como eu quero. porem se eu adicionar um novo elemento via jquery este elemento fica travado! vou deixar meu codigo que está funcionando 'EM PARTE':
       
      Me ajudem por favor!
       
      este é o index:
       
      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="css/jquery-ui.css"> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> </head> <body> <iframe src="template2.html" width="1000px" height="600px"> </iframe> </body> </html> Este é o iframe:
       
      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="css/jquery-ui.css"> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <style> *, *:before, :after { box-sizing: border-box; } * { margin: 0; padding: 0; } .clearfix:after { content: '.'; display: block; clear: both; height: 0; font-size: 0; line-height: 0; visibility: hidden; overflow: hidden; } body { font-family: sans-serif; font-size: 14px; line-height: 1.5; margin: 20px; } /* Drag e Drop system */ .drag-container, .drop-container { width: 50%; background: #333; font-size: 0; text-align: center; float: left; color: #fff; height: 190px; } .drag, .placeholder { font-size: 12px; width: 90%; height: 50px; line-height: 50px; background: #0074a2; margin: 10px auto; } .drop-container { background: #222; } .drop-container p { font-size: 18px; line-height: 190px; } .placeholder { background: none; border: 1px dotted #eee; } .lixeira { margin: 20px 0; background: #ddd; border: 2px dotted #999; text-align: center; line-height: 50px; color: #999; font-weight: 700; font-size: 18px; } .lixeira-ativa { border: 2px dotted red; } </style> <script> $(function(){ $('.drag').draggable(); $('.drop-container').sortable({ placeholder: 'placeholder', activate: function(event, ui){ $('.drop-container p').remove(); } }); $('.lixeira').droppable({ hoverClass: 'lixeira-ativa', drop: function(event, ui) { $(ui.draggable).remove(); } }); $('.salvar').click(function(){ var valores = new Array(); $('.drop-container .drag').each(function(){ valores.push( $(this).html() ); }); alert(valores); }); }); function addText(){ $(".drag-container").append("<div class='drag' style='position:relative;'><p>Test</p></div>"); } function addImg(){ $(".drag-container").append('<div class="drag"><img width="30px" height="30px" src="https://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg" /></div>' ); } </script> </head> <body> <button onclick="addText();">ADD Texto</button> <button onclick="addImg();">ADD Img</button> <div class="drag-drop clearfix"> <div class="drag-container clearfix"> <div class="drag">1</div> <div class="drag">2</div> <div class="drag">3</div> </div> <!-- .drag-container --> <div class="drop-container clearfix"> <p>Arraste números aqui</p> </div> <!-- .drop-container --> </div> <!-- .drag-drop --> <div class="lixeira"> Arraste aqui para apagar </div> <!-- .lixeira --> <button class="salvar">Salvar</button> </body> </html>  
      Vou disponibilizar um link online para vocês observarem o problema!
       
      Segue o link
       
      http://infotechfacil.com.br/dinamico/
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.