Multiselect Jquery UI

Front-end
#1

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:

[code]

[/code]

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:

[code]

${cnai.codigo} [/code]

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?

#2

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

#3

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

#4

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

#5

Sem sucesso :frowning:

Aparentemente está tudo perfeito, devia funcionar …

#6

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.

#7

[quote=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.[/quote]

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

#8

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

#9