Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Plugin Selectize não funcionou no Select

Oi Alura, seguinte eu importei o arquivo selectize.js (com depêndencias menos jquery) pra pasta js e o arquivo selectize.default.css pra pasta dele também libs/css e importei no html os arquivos só que não aconteceu nada no select já procurei algum erro e não achei. O comportamento do selectize de adicionar um novo usuário e de categorizar ele não ta funcionando, invocado que na aba Sources ele tá sendo importado normalmente, como ainda não aprendi a depurar em Javascript a não ser por console.log to meio perdido, desde já agradeço. Segue os códigos abaixo:

principal.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link rel="stylesheet" href="css/libs/google-fonts.css">
    <link rel="stylesheet" href="css/libs/selectize.default.css">

    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container">
    <h1 class="center"> Alura Typer </h1>
    <p class="frase left-align">O Tribunal Superior Eleitoral (TSE) rejeitou nesta terça-feira (11) um pedido do PT para
        investigar kkkkk ppppppp DAS D
    </p>

    <div class="center">
        <img src="img/spinner.gif" alt="Spinner" id="spinner">
        <p id="erro">Ocorreu um erro, por favor tente novamente</p>
    </div>

    <ul class="informacoes center">

        <li><i class="small material-icons icones">description</i><span id="quantidadepalavras"> 10 </span> palavras
        </li>
        <li><i class="small material-icons icones">query_builder</i><span id="tempoRestante">5</span> segundos</li>

    </ul>

    <textarea class="campodigitacao" rows="10" cols="40"></textarea>
    <button class="btn-floating btn-large waves-effect waves-light red" id="botaoReiniciar"><i class="material-icons">restore</i>
    </button>
    <button class="btn-floating btn-large waves-effect waves-light green" id="botaoPlacar"><i class="material-icons">assignment</i>
    </button>
    <button class="btn-floating btn-large waves-effect waves-light blue" id="trocaFrase"><i class="material-icons">shuffle</i>
    </button>
    <button class="btn-floating btn-large waves-effect waves-light blue" id="botaoFraseId"><i class="material-icons">repeat_one</i>
    </button>
    <div class="select-usuarios">
        <select id="usuarios">
            <option value="Maison">Maison</option>
            <option value="Jose">Jose</option>
            <option value="Luciano">Luciano</option>
            <option value="Socorro">Socorro</option>
        </select>
    </div>
    <button class="btn-floating btn-large waves-effect waves-light yellow" id="botaoSync"><i class="material-icons">swap_vert</i>
</button>
    <input type="number" min="0" id="idFrase">



    <ul class="center">
        <li><span id="contador-caracteres">0</span> caracteres</li>
        <li><span id="contador-palavras">0</span> palavras</li>
    </ul>

    <section class="placar"><h3 class="center">Placar</h3>
        <table class="centered bordered">
            <thead>
            <tr>
                <th>Nome</th>
                <th>Numero de Palavras</th>
                <th>Remover</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </section>

</div>
<script src="js/jquery.js"></script>
<script src="js/selectize.js"></script>
<script src="js/main.js"></script>
<script src="js/placar.js"></script>
<script src="js/frase.js"></script>

</body>
</html>

main.js

$(function () {
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();
    $("#botaoReiniciar").click(reiniciaJogo);
    atualizaPlacar();
    $("#usuarios").selectize({
        create: true,
        sortField: 'text'
    });
});
8 respostas

Mensagem de erro no console


> Erro no console:

Uncaught SyntaxError: Unexpected token < jquery.js:3784 jQuery.Deferred exception: $(...).selectize is not a function TypeError: $(...).selectize is not a function at HTMLDocument. (http://localhost:3000/js/main.js:11:20) at mightThrow (http://localhost:3000/js/jquery.js:3508:29) at process (http://localhost:3000/js/jquery.js:3576:12) undefined jQuery.Deferred.exceptionHook @ jquery.js:3784 process @ jquery.js:3580 setTimeout (async) (anonymous) @ jquery.js:3614 fire @ jquery.js:3243 fireWith @ jquery.js:3373 fire @ jquery.js:3381 fire @ jquery.js:3243 fireWith @ jquery.js:3373 ready @ jquery.js:3853 completed @ jquery.js:3863 jquery.js:3793 Uncaught TypeError: $(...).selectize is not a function at HTMLDocument. (main.js:11) at mightThrow (jquery.js:3508) at process (jquery.js:3576) (anonymous) @ main.js:11 mightThrow @ jquery.js:3508 process @ jquery.js:3576 setTimeout (async) jQuery.readyException @ jquery.js:3792 (anonymous) @ jquery.js:3812 mightThrow @ jquery.js:3508 process @ jquery.js:3576 setTimeout (async) (anonymous) @ jquery.js:3614 fire @ jquery.js:3243 fireWith @ jquer

Acabei descobrindo mais uma coisa ao baixar os arquivos da transcrição do vídeo o selectize funcionou, o que eu estava usando são as novas versões disponibilizadas no repositório essas não funcionam e queria saber o porquê.

Galera da uma ajuda aí, queria saber porque não está funcionando com a nova versão do jquery e do plugin.

Oi Maison, tudo bem? Você tá usando a versão 3 do jQuery e o curso usa a 2, certo? O jQuery removeu várias funções de manipulação do DOM na versão 3, pode ser que seja algo nessa linha.

Oi Wanderson, eu tentei utilizar a última versão a 3.3.1 do jQuery e não funcionou na tentativa de resolver eu usei a 2 que é usada no curso e tudo funcionou, meu intuito é aprender a depurar quando isso acontece e porquê, não tem saída só voltando a versão ? Foi quebrada a compatibilidade ?

Não é que a compatibilidade foi quebrada, é alguma função que existia no jQuery na versão anterior que foi removida. Pra debugar isso bem de perto, você ia precisar conhecer um pouco mais a fundo o código das duas bibliotecas.

Do jQuery é fácil ver o que foi depreciado e removido da lib em cada versão. Há um histórico aqui: https://api.jquery.com/category/deprecated/

Não sei se o Selectize tem algo nessa linha. Nessa linha, você detecta que mudanças aconteceram nas libs pra elas não serem compatíveis mais.

solução!

Oi Wanderson obrigado pela ajuda, eu li o link que você enviou mas não achei nada referente ao selectize e também puderá porque o que é retirado são funções, o selectize é um plugin e na página dele informa que ele funciona com jquery 1.7 ou superior, logo se estou utilizando o 3.1 não deveria haver problema então fui investigar mais a fundo e acabei achando o problema fui na página do selectize no Github e lá seção de instalação tem escrito que ele precisa pra funcionar do selectize.js e do arquivo css o que aconteceu foi o seguinte eu cliquei no link do github e salvei o arquivo no meu projeto só que o link trás outro arquivo html e não o javascript. O link da página aponta para um arquivo html

https://github.com/selectize/selectize.js/blob/master/dist/js/standalone/selectize.js

E o arquivo que realmente é o javascript tá nesse link:

https://raw.githubusercontent.com/selectize/selectize.js/master/dist/js/standalone/selectize.js

Por isso quando eu importei ele no meu projeto deu erro não reconhecendo como uma função.

Os links que utilizei:

https://plugins.jquery.com/selectize/ https://github.com/selectize/selectize.js

Até apontei uma issue informando do ocorrido e perguntando se se trata de um problema no link das de pendencias.

Ao voltar no projeto tudo funcionou como esperado.

Hm, entendi errado o problema de fato então. Que bom que resolveu. Só fica atento, não necessariamente por que diz que funciona com 1.7 acima, que realmente funciona com 3.1 por exemplo.

Depois do jQuery ter dado essa fragmentada com versão slim e não slim, a gente precisa ter um pouco mais de cuidado com os plugins de terceiros.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software