Checkbox + Vraptor

20 respostas
R

Pessoal bom dia, fiz uma tela para seleção de arquivos utilizando combo select,
criei um ajax para fazer o preenchimento das informações
A questão é agora preciso mudar meu ajax para pegar os valores dos checkbox, com select selecionava um item da lista por vez para
preencher o segundo combo, utilizando a função “onchange”, agora tenho de fazer com que mais de um item seja selecionado e no meu controler identificar cada item que selecionei a cada ‘’ ; ‘’ tipo criar uma lista do que foi selecionado na tela mandar para controller e identificar cada item apos ‘’ ; ‘’

Meu ajax utlizando combo select esta assim:

var urlCarregaTpDocumentos = '<c:url value="/carregaTipoDocumento"/>';/*url para direcionamento*/
    $(document).ready(function() {
      $('#tpArquivo').on('change', function() {             /*-#tpArquivo- id do combo tipo de arquivo */
        $.ajax({ url : urlCarregaTpDocumentos,              /* informando para qual action do controler direcionar*/
              type : 'get',                                 /* informando tipo da requisição*/
              data : {'tpArquivo' : $('#tpArquivo').val() },/* parametros para a action no controller*/
            success : function(data) {			            /* data vai ser o seu JSON formatado, o VRaptor vai colocar ele aqui.*/
            if (data != null) {
                $('#tpDocumento').empty();   /*limpa informações contidas no combo tipo de documento */
                $.each(data, function() {    /*itera sobre cada item do seu json e adiciona um option no combo tipo de documento*/
                  $("#tpDocumento").append('<option value="' + this.value + '">'+this.nome+'</option>');
                });
             }
            },
            error : function() { alert('Ocorreu um erro inesperado.'); }
       });
     });

e meu controller esta assim:

@Get @Path("/carregaTipoArquivo")
    public void carregaTpArquivos(String nickname) throws IOException {

        boolean possuiTextoTraducao = false;

        List<ResultList> strings = new ArrayList<ResultList>();
        ResultList resultList = null;

        //Recupera uma lista de Parcerias.
        List<ParceriaVO> parceriaVOs = this.usuarioLogado.getUsuario().getListaParceria();

        for (ParceriaVO parceriaVO : parceriaVOs) {

            //  verifica se na lista contem uma informação igual ao parametro passado.
            if (parceriaVO.getId().getNomeUsuarioDestinatario().equals(nickname)) {

                //  recuperando uma lista de tipos de documentos correspondente a parceria.
                Set<TipoDocumentoParceriaVO> documentoParceriaVOs = parceriaVO.getListaTipoDocumentoParceria();

                for (TipoDocumentoParceriaVO tipoDocumentoParceriaVO : documentoParceriaVOs) {

                    // valida se possui mapa para texto tradução.
                    if (tipoDocumentoParceriaVO.getFluxo().equals("E") && tipoDocumentoParceriaVO.getCodigoMapaUpload() != null) {

                        possuiTextoTraducao = true;
                    }

                    TipoArquivo tipoArquivo = TipoArquivo.fromString(tipoDocumentoParceriaVO.getTipoDocumento().getNomeTipoDocumento());
                    if  (tipoArquivo != null) {

                        // pega as informações na Hash.
                        String nome = tipoArquivo.getValue();/* Tipo do arquivo*/
                        Integer value = tipoArquivo.getCodigo();/* Codigo do tipo selecionado (*ver Enum)*/

                        resultList = new ResultList(nome, value);

                        // valida se o obj ja existe na lista .
                        if (!strings.contains(resultList) || resultList == null)
                            strings.add(resultList);/*adiciona o bjeto na lista*/
                    }
                }
            break;
            }
        }

        if (possuiTextoTraducao) {
            strings.add(new ResultList(TipoArquivo.FLV.getValue(), TipoArquivo.FLV.getCodigo()));
        }

        result.use(Results.json()).withoutRoot().from(strings).serialize();
    }

Resumindo preciso pegar uma lista do que foi selecionado na tela mandar para controller e identificar cada item apos cada ‘’ ; ‘’ :smiley:
Alguem poderia me dar uma orientação ?
Vlw!

20 Respostas

Lucas_Cavalcanti

se o parametro é tpArquivo, vc recebe isso no método do controller:

public void carregaTpArquivos(String nickname, String tpArquivo) throws IOException {  

      String[] tipos = tpArquivo.split(";");

...
R

Lucas, como eu faço pra pegar o valor do check box

<c:forEach var="destinatario" items="${usuarioLogado.usuario.listaParceria }">
                    <input type="checkbox"
                           id="#nickname"
                           value="${destinatario.id.nomeUsuarioDestinatario}">
                           &nbsp;${destinatario.id.nomeUsuarioDestinatario}<br>
               </c:forEach>

Tenho o id="#nickname" e um value="${destinatario.id.nomeUsuarioDestinatario}" e qdo eu checar preciso pegar o value ??? e passar para o controller ai acho que consigo deixar o restante como estava mesmo ! Obrigado :slight_smile:

Lucas_Cavalcanti

se isso estiver num formulário, vc só precisa deixar do jeito que tá, e dar um name pro input, com um parametro com esse nome no controller.

se for via jquery vc sempre pode fazer $("#nickname").val() se for um input

R

Lucas eu fiz assim e ainda não funcionou nem esta chamando o controller ! oque pode estar errado?

$(document).ready(function() {
  var urlCarregaTpArquivos = '<c:url value="/carregaTipoArquivo"/>';/*url para direcionamento*/

  if($('#nickname:checked').click(function(){

     $.ajax({ url : urlCarregaTpArquivos,
              type : 'get',
              data : {'nickname' : $('#nickname').val()},
              sucess : function(data){
               if(data != null){
                 $('#tpArquivo').empty();
                 $.each(data, function(){
                   $('#tpArquivo').append('<option value="' + this.value + '">'+this.nome+'</option>');
                 });
                   }
              },
       error : function() { alert('Ocorreu um erro inesperado.'); }
     });
    });
  });

Meu form esta assim:

<form id="fileupload" action="<c:url value="/upload"/>"  method="post" enctype="multipart/form-data">
    <fieldset style="border: 2px solid #CE161D;padding: 10px 10px 10px 10px;">
      <legend style="border: none ;width: 11.5em;padding: 15px 5px 0px 0px; color: #CE161D; font-family: Verdana,Helvetica,Arial,sans-serif; font-weight: bold;">
      Transmitir Arquivos
      </legend>
          <table>
            <tr>
              <td><label for="nickname" style="color: #CE161D; font-family: Verdana,Helvetica,Arial,sans-serif; font-weight: bold;">Destinatário</label></td>
              <td><label for="tpArquivo"style="color: #CE161D; font-family: Verdana,Helvetica,Arial,sans-serif; font-weight: bold;">Tipo de Arquivo</label></td>
              <td><label for="tpDocumento"style="color: #CE161D; font-family: Verdana,Helvetica,Arial,sans-serif; font-weight: bold;">Tipo de Documento</label></td>
            </tr>
             <tr>
               <td>
               <c:forEach var="destinatario" items="${usuarioLogado.usuario.listaParceria }">
                    <input type="checkbox" value="${destinatario.id.nomeUsuarioDestinatario}" >
                    ${destinatario.id.nomeUsuarioDestinatario}<br>
               </c:forEach> ...

e o meu controller esta assim:

@Get @Path("/carregaTipoArquivo")
    public void carregaTpArquivos(String nickname) throws IOException {

        boolean possuiTextoTraducao = false;

        List<ResultList> strings = new ArrayList<ResultList>();
        ResultList resultList = null;

        //Recupera uma lista de Parcerias.
        List<ParceriaVO> parceriaVOs = this.usuarioLogado.getUsuario().getListaParceria();

        for (ParceriaVO parceriaVO : parceriaVOs) {

            //  verifica se na lista contem uma informação igual ao parametro passado.
            if (parceriaVO.getId().getNomeUsuarioDestinatario().equals(nickname)) {

                //  recuperando uma lista de tipos de documentos correspondente a parceria.
                Set<TipoDocumentoParceriaVO> documentoParceriaVOs = parceriaVO.getListaTipoDocumentoParceria();

                for (TipoDocumentoParceriaVO tipoDocumentoParceriaVO : documentoParceriaVOs) {

                    // valida se possui mapa para texto tradução.
                    if (tipoDocumentoParceriaVO.getFluxo().equals("E") && tipoDocumentoParceriaVO.getCodigoMapaUpload() != null) {

                        possuiTextoTraducao = true;
                    }

                    TipoArquivo tipoArquivo = TipoArquivo.fromString(tipoDocumentoParceriaVO.getTipoDocumento().getNomeTipoDocumento());
                    if  (tipoArquivo != null) {

                        // pega as informações na Hash.
                        String nome = tipoArquivo.getValue();/* Tipo do arquivo*/
                        Integer value = tipoArquivo.getCodigo();/* Codigo do tipo selecionado (*ver Enum)*/

                        resultList = new ResultList(nome, value);

                        // valida se o obj ja existe na lista .
                        if (!strings.contains(resultList) || resultList == null)
                            strings.add(resultList);/*adiciona o bjeto na lista*/
                    }
                }
            break;
            }
        }

        if (possuiTextoTraducao) {
            strings.add(new ResultList(TipoArquivo.FLV.getValue(), TipoArquivo.FLV.getCodigo()));
        }

        result.use(Results.json()).withoutRoot().from(strings).serialize();
    }

Vlw :slight_smile:

Lucas_Cavalcanti

faltou um id=“nickname” no checkbox?

lembrando que o nickname só vai se o checkbox estiver checado.

R

Então coloquei o id

<div class="menuSelect">
      <form id="fileupload" action="<c:url value="/upload"/>"  method="post" enctype="multipart/form-data">
    	<fieldset style="border: 2px solid #CE161D;padding: 10px 10px 10px 10px;">
      		<legend style="border: none ;width: 11.5em;padding: 15px 5px 0px 0px; color: #CE161D; font-family: Verdana,Helvetica,Arial,sans-serif; font-weight: bold;">
      		Transmitir Arquivos
      		</legend>
          <table>
            <tr>
              <td><label for="nickname" style="color: #CE161D; font-family: Verdana,Helvetica,Arial,sans-serif; font-weight:  bold;">Destinatário</label></td>
              <td><label for="tpArquivo"style="color: #CE161D; font-family: Verdana,Helvetica,Arial,sans-serif; font-weight: bold;">Tipo de Arquivo</label></td>
              <td><label for="tpDocumento"style="color: #CE161D; font-family: Verdana,Helvetica,Arial,sans-serif; font-weight: bold;">Tipo de Documento</label></td>
            </tr>
             <tr>
               <td>
               <c:forEach var="destinatario" items="${usuarioLogado.usuario.listaParceria }">
                  <input type="checkbox" id="nickname" value="${destinatario.id.nomeUsuarioDestinatario}">${destinatario.id.nomeUsuarioDestinatario}<br>
               </c:forEach>

-JQUERY:

$(document).ready(function() {
    var urlCarregaTpArquivos = '<c:url value="/carregaTipoArquivo"/>';/*url para direcionamento*/

    //o nickname so vai se estiver checado
    if($('#nickname:checked').click(function(){

       $.ajax({ url : urlCarregaTpArquivos,
                type : 'get',
                data : {'nickname' : $('#nickname').val()},
                sucess : function(data){
                 if(data != null){
                  // $('#tpArquivo').empty();
                   $.each(data, function(){
                     $('#tpArquivo').append('<option value="' + this.value + '">'+this.nome+'</option>');
                   });
                     }
                },
         error : function() { alert('Ocorreu um erro inesperado.'); }
       });
      });
    });

COLOQUEI UM breakpoint no meu controller e nada ainda sera que tem algum erro na sintaxe do meu jquery?

Lucas_Cavalcanti

if($(’#nickname:checked’).click(function(){

isso nunca vai dar o bind do click… pq o nickname começa deschecado…

vc tem que fazer esse if no click:

$("#nickname").click(function() {
     if($(this).is(":checked")) {
           //o ajax
     }
}
R

Lucas fiz conforme voce me orientou porem ainda não consegui fazer o debug
Poderia ter alguma coisa a ver com o tipo de requisição ‘GET’? não entra no debug !

var urlCarregaTpArquivos = '<c:url value="/carregaTipoArquivo"/>';/*url para direcionamento*/
  $(document).ready(function() {
  $('#nickname').click(function(){
    if($(this).is(":checked",true)) {
      //o ajax
      $.ajax({ url : urlCarregaTpArquivos,
                 type : 'get',
                 data : {'nickname' : $('#nickname').val()},
                 sucess : function(data){
                  if(data != null){
                    // $('#tpArquivo').empty();
                    $.each(data, function(){
                      $('#tpArquivo').append('<option value="' + this.value + '">'+this.nome+'</option>');
                    });
                   }
                 },
          error : function() { alert('Ocorreu um erro inesperado.'); }
       });
     }
  });

antes qdo estava utilizando o ‘nickname’ com combo select ele entrava no debug:

var urlCarregaTpArquivos = '<c:url value="/carregaTipoArquivo"/>';/*url para direcionamento*/
     $(document).ready(function() {
       $('#nickname').on('change', function() { 		      /*-nickname- id do combo parceria */
         $.ajax({ url : urlCarregaTpArquivos, 		      /* informando para qual action do controler direcionar*/
               type : 'get',                   		      /* informando tipo da requisição*/
               data : {'nickname' : $('#nickname').val() },/* parametros para a action no controller*/
            success : function(data) {                    /* data vai ser o seu JSON formatado, o VRaptor vai colocar ele aqui.*/
              if (data != null) {
                 $('#tpArquivo').empty();     /*limpa informações contidas no combo tipo de arquivo */
                 $.each(data, function() {    /*itera sobre cada item do seu json e adiciona um option no combo tipo de arquivo*/
                   $("#tpArquivo").append('<option value="' + this.value + '">'+this.nome+'</option>');
                 });
                 }
               },
               error : function() { alert('Ocorreu um erro inesperado.'); }
           });
       });
     });

aparentemente a unica modificação foi no elemento que utlizo antes era um select agora um checkbox mas o restante continua igual o que podeira ser?

Lucas_Cavalcanti

tenta trocar o .click por .change…

tenta debugar no javascript, colocando alert(“qqer coisa”) ou console.log(“qqercoisa”)

R

Lucas consegui !! :smiley:

<script type="text/javascript">
    var urlCarregaTpDocumentos = '<c:url value="/carregaTipoDocumento"/>';/*url para direcionamento*/
    var urlCarregaTpArquivos = '<c:url value="/carregaTipoArquivo"/>';/*url para direcionamento*/

    $(document).ready(function() {
	      $('#nickname').click(function(){	
	            if($(this).is(":checked",true)) {
	              //o ajax
	              $.ajax({ url : urlCarregaTpArquivos,
	                         type : 'get',
	                         data : {'nickname' : $('#nickname').val()},
	                         sucess : function(data){
	                          if(data != null){
	                            // $('#tpArquivo').empty();
	                            $.each(data, function(){
	                              $('#tpArquivo').append('<option value="' + this.value + '">'+this.nome+'</option>');
	                            });
	                           }
	                         },
	                  error : function() { alert('Ocorreu um erro inesperado.'); }
	               });
	             }
	          });
	
	      $('#tpArquivo').on('change', function() {             /*-#tpArquivo- id do combo tipo de arquivo */
	          $.ajax({ url : urlCarregaTpDocumentos,              /* informando para qual action do controler direcionar*/
	                   type : 'get',                                 /* informando tipo da requisição*/
	                   data : {'tpArquivo' : $('#tpArquivo').val() },/* parametros para a action no controller*/
	              success : function(data) {			            /* data vai ser o seu JSON formatado, o VRaptor vai colocar ele aqui.*/
	              if (data != null) {
	                   $('#tpDocumento').empty();   /*limpa informações contidas no combo tipo de documento */
	                   $.each(data, function() {    /*itera sobre cada item do seu json e adiciona um option no combo tipo de documento*/
	                     $("#tpDocumento").append('<option value="' + this.value + '">'+this.nome+'</option>');
	                   });
	               }
	              },
	              error : function() { alert('Ocorreu um erro inesperado.'); }
	         });
	      });
     });
  </script>

Porem ele so esta chamando meu metodo no controller qdo seleciono o primeiro item , só esta entrando em modo debug qdo seleciono o primeiro checkbox, os demais ele ignora o que poderia fazer para resolver?

Lucas_Cavalcanti

se são vários checkboxes com o mesmo id, troque o id por class e o # por .

não pode ter vários caras com o mesmo id no html.

R

Lucas eu fiz assim:

<c:forEach var="destinatario" items="${usuarioLogado.usuario.listaParceria }">
                  <input type="checkbox"                         id="nickname_${destinatario.id.nomeUsuarioDestinatario}" value="${destinatario.id.nomeUsuarioDestinatario}">${destinatario.id.nomeUsuarioDestinatario}<br>
               </c:forEach>

e no javascript fiz assim so que no controller o nickname esta chegando “nulo” , esta chamando qlq checkbox que seleciono esta chamando o controller mas chega nulo ?
meu javascript esta assim agora:

$(document).ready(function() {
        $("input[id^='nickname_']").change(function(){
              if($(this).is(":checked",true)) {
                //o ajax
                $.ajax({ url : urlCarregaTpArquivos,
                           type : 'get',
                           data : {'nickname' : $('#nickname').val()},
                           sucess : function(data){
                            if(data != null){
                               $('#tpArquivo').empty();
                              $.each(data, function(){
                                $('#tpArquivo').append('<option value="' + this.value + '">'+this.nome+'</option>');
                              });
                             }
                           },
                    error : function() { alert('Ocorreu um erro inesperado.'); }
                 });
               }
            });

meu controller:

@Get @Path("/carregaTipoArquivo")
    public void carregaTpArquivos(String nickname) throws IOException {

        boolean possuiTextoTraducao = false;

        List<ResultList> strings = new ArrayList<ResultList>();
        ResultList resultList = null;

        //Recupera uma lista de Parcerias.
        List<ParceriaVO> parceriaVOs = this.usuarioLogado.getUsuario().getListaParceria();

        for (ParceriaVO parceriaVO : parceriaVOs) {

            //  verifica se na lista contem uma informação igual ao parametro passado.
            if (parceriaVO.getId().getNomeUsuarioDestinatario().equals(nickname)) {

                //  recuperando uma lista de tipos de documentos correspondente a parceria.
                Set<TipoDocumentoParceriaVO> documentoParceriaVOs = parceriaVO.getListaTipoDocumentoParceria();

                for (TipoDocumentoParceriaVO tipoDocumentoParceriaVO : documentoParceriaVOs) {

                    // valida se possui mapa para texto tradução.
                    if (tipoDocumentoParceriaVO.getFluxo().equals("E") && tipoDocumentoParceriaVO.getCodigoMapaUpload() != null) {

                        possuiTextoTraducao = true;
                    }

                    TipoArquivo tipoArquivo = TipoArquivo.fromString(tipoDocumentoParceriaVO.getTipoDocumento().getNomeTipoDocumento());
                    if  (tipoArquivo != null) {

                        // pega as informações na Hash.
                        String nome = tipoArquivo.getValue();/* Tipo do arquivo*/
                        Integer value = tipoArquivo.getCodigo();/* Codigo do tipo selecionado (*ver Enum)*/

                        resultList = new ResultList(nome, value);

                        // valida se o obj ja existe na lista .
                        if (!strings.contains(resultList) || resultList == null)
                            strings.add(resultList);/*adiciona o bjeto na lista*/
                    }
                }
            break;
            }
        }

        if (possuiTextoTraducao) {
            strings.add(new ResultList(TipoArquivo.FLV.getValue(), TipoArquivo.FLV.getCodigo()));
        }

        result.use(Results.json()).withoutRoot().from(strings).serialize();
    }

acho que estou errando no javascript “$(“input[id^=‘nickname_’]”).change(function()” sera isso talvez?

R

Eu mudei o “id” ele esta dinamico

R

Lucas vlw , :smiley: consegui fazer aki da seguinte forma

$(document).ready(function() {
        $("input[id^='nickname_']").change(function(){
              if($(this).is(":checked",true)) {
                //o ajax
                $.ajax({ url : urlCarregaTpArquivos,
                           type : 'get',
                           data : {'nickname' : $(this).val()},
                           success : function(data){
                            if(data != null){
                              // $('#tpArquivo').empty();
                              $.each(data, function(){
                                $('#tpArquivo').append('<option value="' + this.value + '">'+this.nome+'</option>');
                              });
                             }
                           },
                    error : function() { alert('Ocorreu um erro inesperado.'); }
                 });
               }
            });

So não sei o que esse ‘^’ faz mas se tirar ele não funciona :slight_smile: vlw muito obrigado !!

Lucas_Cavalcanti

é o mesmo ^ da regex… ^= é “começa com”… e $= é “termina com”

R

:oops: Lucas so mais uma questão por gentileza
Qdo eu seleciono “checked” é adicionado os itens certo! So que esta duplicando os itens ! como posso fazer o verificação se ja existe
um elemento na lista para evitar de duplicar

Tipo assim se ja tiver tal elemento não adicionar!

como eu faço para tirar os itens que add qdo desmarco o checkbox?

Fiz assim mas não funcionou:

<script type="text/javascript">
    var urlCarregaTpDocumentos = '<c:url value="/carregaTipoDocumento"/>';/*url para direcionamento*/
    var urlCarregaTpArquivos = '<c:url value="/carregaTipoArquivo"/>';/*url para direcionamento*/

    $(document).ready(function() {
        $("input[id^='nickname_']").change(function(){
              if($(this).is(":checked",true)) {

                $.ajax({ url : urlCarregaTpArquivos,
                           type : 'get',
                           data : {'nickname' : $(this).val()},
                           success : function(data){
                            if(data != null){
                             //$('#tpArquivo').empty();
                              $.each(data, function(){
                                $('#tpArquivo').append('<option value="' + this.value + '">'+this.nome+'</option>');
                              });
                             }
                           },
                    error : function() { alert('Ocorreu um erro inesperado.'); }
                 });
               }else if($(this).is(":checked",false)){

                 $.ajax({ url : urlCarregaTpArquivos,
                       type : 'get',
                       data : {'nickname' : $(this).val(null)},
                       success : function(data){
                        if(data == null){
                          $.each(data, function(){
                            $('#tpArquivo').append('<option></option>');
                          });
                         }
                       },
                error : function() { alert('Ocorreu um erro inesperado.'); }
             });
               }

            });
Lucas_Cavalcanti

vc pode trocar o checkbox por um radio, que só deixa selecionar um :wink:

só dar o mesmo name pra todos.

R

Lucas tive de mudar um pouco o contexto de pesquisa e consegui fazer, porem gostaria de lhe perguntar como faço para criar um array no javascript :
Fiz da seguinte forma mas não deu certo

var arquivos=["DOCTXT","DOCCMP","DOCBIN"];

    $(document).ready(function() {

        $('#tpArquivo').on('change', function() {             /*-#tpArquivo- id do combo tipo de arquivo */
         //como faço para comparar o valor do select com os do array?
          if($('#tpArquivo').val()){
              $.ajax({ url : urlCarregaParceria,              /* informando para qual action do controler direcionar*/
                       type : 'get',                                 /* informando tipo da requisição*/
                       data : {'tpArquivo' : $('#tpArquivo').val() },/* parametros para a action no controller*/
                  success : function(data) {			            /* data vai ser o seu JSON formatado, o VRaptor vai colocar ele aqui.*/
                  if (data != null) {
                       $('#destinatario').empty();   /*limpa informações contidas no combo tipo de documento */
                       $.each(data, function() {    /*itera sobre cada item do seu json e adiciona um option no combo tipo de documento*/
                         $("#destinatario").append('<option value="' + this.value + '">'+this.nome+'</option>');
                       });
                   }
                  },
                  error : function() { alert('Ocorreu um erro inesperado.'); }
             });
            });
          }

como faço para comparar o valor do select com os do array? :slight_smile:

Lucas_Cavalcanti

vc quer saber se o item tá la dentro? o que vc quer fazer?

PS: não precisa postar o código inteiro, só a parte que interessa :wink:

R

Foi mal :oops:

Isso mesmo !! preciso saber se o item que selecionei esta naquela lista!!

Criado 26 de julho de 2012
Ultima resposta 27 de jul. de 2012
Respostas 20
Participantes 2