Multiselect Jquery UI

30 de outubro de 2012 7 respostas

kaahxd 30 de outubro de 2012

Olá, estou com dificuldades com o Multiselect e não sei onde estou errando, segui esta referência para criar o multiselect: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

De acordo com a referência inclui na minha página os arquivos necessários:

<script type="text/javascript" src="${Vjs}/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="${Vjs}/e2s.js"></script>
<script type="text/javascript" src="${Vjs}/jquery.multiselect.js"></script>
<script type="text/javascript" src="${Vjs}/jquery-ui-1.9.1.custom.min.js"></script>
<link rel="stylesheet" href="${Vcss}/jquery-ui-1.9.1.custom.min.css" />
<link rel="stylesheet" href="${Vcss}/jquery.multiselect.css" />
<link rel="stylesheet" href="${Vcss}/e2s.css" />

Inicializei o script

<script type="text/javascript">
$(document).ready(function(){
	   $("#c").multiselect();
	});
</script>

Tudo isso dentro do HEAD da minha página e fiz a lista da seguinte forma:

<td>
<select name="c" id="c" multiple="multiple"> 
	<c:forEach var="cnai" items="${dao.lista}">
	<option value="${cnai.id}">${cnai.codigo}</option>
 	</c:forEach>
</select>
</td>

Porém não acontece NADA, se eu tirar o Jquery, a inicialização, os arquivos .js e .css necessários, vai continuar do mesmo jeito, ou seja a lista está igual se tivesse feito apenas com html simples!! A multisect não funciona!

Alguém tem ideia do que eu possa ter feito errado?

7 Respostas

windsofhell 30 de out. de 2012

Ola,

Olhando por cima, eu acho que o problem eh que, $(document).ready eh executado, antes do seu select estar totalmente renderizado.

Faca um teste:

<script type="text/javascript">  
    $(document).ready(function(){  
       $("#c").multiselect();  // abra o firebug e adicione um breakpoint aqui.
    });  
</script>

Quando o debugger chegar nesse ponto, adicione um watcher para $("#c") e veja se vc esta recebendo algum valor.

Se estiver, outra coisa que vc pode verificar eh se o multiselect esta sendo carregado corretamente, abra o firebug e examine todos os scripts que estao sendo carregados na tab “net”.

//Daniel

kaahxd 30 de out. de 2012

Os scripts verifiquei através do código fonte que estão sendo chamados corretamente, além de que outras funções Jquery como mascaras estarem funcionando perfeitamente, eu nunca usei o firebug na verdade não sei nem como usa-lo

windsofhell 30 de out. de 2012

Ok, agora eu entendi o seu problema. Se vc ver a parte que vc inclui os scripts na sua pagina:

<script type="text/javascript" src="${Vjs}/jquery-1.8.2.min.js"></script>  
<script type="text/javascript" src="${Vjs}/e2s.js"></script>  
<script type="text/javascript" src="${Vjs}/jquery.multiselect.js"></script>  
<script type="text/javascript" src="${Vjs}/jquery-ui-1.9.1.custom.min.js"></script>

jquery.multiselect eh dependente do jquery-ui, entao vc tem que primeiro adicionar jquery-ui

A ordem correta eh:

<script type="text/javascript" src="${Vjs}/jquery-1.8.2.min.js"></script>  
<script type="text/javascript" src="${Vjs}/e2s.js"></script>  
<script type="text/javascript" src="${Vjs}/jquery-ui-1.9.1.custom.min.js"></script>  
<script type="text/javascript" src="${Vjs}/jquery.multiselect.js"></script>

Veja se funciona

//Daniel

kaahxd 30 de out. de 2012

Sem sucesso

Aparentemente está tudo perfeito, devia funcionar …

AbelBueno 30 de out. de 2012

Uma das "pegadinhas" do javascript nos browsers mais novos é que ele falha silenciosamente.
Com isso você tem a impressão que está tudo ok, mas nem sempre é o caso.

No Firefox, ao abrir sua página, vá no menu Tools -> Web Developer - Error Console ( Ctrl + Shift + J )
No Chrome ou IE, vá para o console ( F12)

Bem, nesses locais deve aparecer alguma mensagem de erro.
Cole aqui pra gente conseguir analisar o que acontece.

Outra coisa, querer fazer coisa não trivial com javascript, sem Firebug ou equivalente, é masoquismo.
Aprenda a usar que vai ajudar muito sua vida.

windsofhell 30 de out. de 2012

AbelBueno:

Outra coisa, querer fazer coisa não trivial com javascript, sem Firebug ou equivalente, é masoquismo.
Aprenda a usar que vai ajudar muito sua vida.

Exatamente!! Assino embaixo! Para trabalhar com Javascript tem que usar firebug nao tem jeito.

Eu fiz um exemplo completo usando o multiselect mas esta no trabalho, amanha eu posto aqui, talvez te ajude.

//Daniel

windsofhell 31 de out. de 2012

Aqui eh o exemplo que eu fiz e funciona perfeitamente.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>			
	<script type="text/javascript" src="multiselect/jquery.multiselect.min.js"></script>

	<link rel="stylesheet" type="text/css" href="multiselect/jquery.multiselect.css" />
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />

	<script type="text/javascript">
	
	$(document).ready(function() {	
		$("select").multiselect();	
	});	
	
	</script>
	
</head>
<body>
	
<select title="Basic example" multiple="multiple"  size="5">
	<option value="option1">Option 1</option>
	<option value="option2">Option 2</option>
	<option value="option3">Option 3</option>
	<option value="option4">Option 4</option>
	<option value="option5">Option 5</option>
	<option value="option6">Option 6</option>
	<option value="option7">Option 7</option>
	<option value="option8">Option 8</option>
	<option value="option9">Option 9</option>
	<option value="option10">Option 10</option>
	<option value="option11">Option 11</option>
	<option value="option12">Option 12</option>
</select>
</body>
</html>

Duas coisas que vc pode testar, primeiro se vc esta pegando o domNode corretamente, segundo se vc esta carregando o plugin corretamente. Como vc nao tem experiencia com o firebug (recomendo fortemente instalar), vc pode fazer o seguinte, mude o seu codigo para:

$(document).ready(function() {
    var _select  = $("select");
    if(_select != null) {
       try {
         _select.multiselect();		
       } catch(err) {
         alert("Nao pode executar a funcao multiselect.");
       }
   } else {
       alert("Nao pode encontrar o domNode.");
   }		
});

Dessa forma vc vai receber umas mensagens de erro que poderao ser uteis para identificar o problema.
Mais uma vez, nunca eh recomendado tentar achar bugs usando prints, alerts e coisas do tipo, entao repito o mantra “instale o firebug”, “instale o firebug”…

//Daniel

Criado 30 de outubro de 2012

Ultima resposta 31 de out. de 2012

Respostas 7

Participantes 3

7 Respostas

Topicos relacionados