1

Tenho essa checklistbox.

<div class="col-md-6">
            <h3 class="text-center">Unidade de negócio</h3>
            <div class="well" style="max-height: 300px;overflow: auto;">
                <ul class="list-group checked-list-box" id="chkLista">
                    <li class="list-group-item" data-style="button">DERMA RX / ONCO</li>
                    <li class="list-group-item" data-style="button" data-color="success">DERMOCOSMÉTICOS</li>
                    <li class="list-group-item" data-style="button" data-color="info">GENÉRICOS</li>
                    <li class="list-group-item" data-style="button" data-color="warning">EXPORTAÇÃO</li>
                    <li class="list-group-item" data-style="button" data-color="danger">MIP</li>
                    <li class="list-group-item" data-style="button">PRESCRIÇÃO</li>
                </ul>
            </div>
        </div>

Preciso checar algum item na lista e pegar esse item via jquery e depois enviar para uma controller. Enviar para controller, sem problema. Não estou conseguindo é pegar o item via jquery.

Essa é minha jquery

function Teste() {

    var realvalues = [];
    var textvalues = [];
    $('#chkLista :selected').each(function (i, selected) {
        realvalues[i] = $(selected).val();
        textvalues[i] = $(selected).text();

        alert(i);
    });

    alert(realvalues);
}

Não dispara o Alert(i), ou seja, não entra no each. Qualquer ajuda é bem-vinda.

Fiz isso e não funcionou.

var checkedItems = {}, counter = 0;

function GravaCargo() {

    $('#get-checked-data').on('click', function (event) {
        event.preventDefault();

        $("#check-list-box li.active").each(function (idx, li) {
            checkedItems[counter] = $(li).text();
            counter++;
        });

        $('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
    });

    var str = "";

    alert(JSON.stringify(checkedItems, null, '\t'));

    $.ajax({

        url: '/CadastroCargo/GravaCargo',
        datatype: 'json',
        contentType: 'application/json;charset=utf-8',
        type: 'POST',
        data: JSON.stringify({ _cargo: checkedItems }),
        success: function (data) {

        },
        error: function (error) {

        }
    })
}

Na busca por resposta, fiz dessa forma e conseguir ter alguma coisa na controller, mas o formato que vem é meio estranho, pois tem \n\t\0:nome1,\n\t\1:nome2 e o que me interessa é nome1 e nome2. Como eu faço para limpar isso? Veja como ficou:

var checkedItems = {}, counter = 0;

function GravaCargo() {

        $("#check-list-box li.active").each(function (idx, li) {
            checkedItems[counter] = $(li).text();
            counter++;
        });

        var str = "";
        var valor = JSON.stringify(checkedItems, null, '\t');

    $.ajax({

        url: '/CadastroCargo/GravaCargo',
        datatype: 'json',
        contentType: 'application/json;charset=utf-8',
        type: 'POST',
        data: JSON.stringify({ _cargo: valor }),
        success: function (data) {

        },
        error: function (error) {

        }
    })
}

Método na minha controller

[HttpPost]
        public void GravaCargo(string _cargo)
        {
            using(RupturaEntities db = new RupturaEntities())
            {
                Cargo crg = new Cargo();
                try
                {
                    crg.NM_Cargo = _cargo;
                    db.Cargo.Add(crg);
                    db.SaveChanges();
                }
                catch(Exception ex)
                {
                    Erro = "Erro na gravação do registro: " + ex.Message;
                }
            }
        }
4
  • Você está a buscar o value de elementos <li> que não são inputs... Você devia ter inputs aí. Tem algum plugin que simula isso?
    – Sergio
    25/08/2014 às 15:49
  • Como assim, Sergio, não entendi.
    – pnet
    25/08/2014 às 15:51
  • O que você espera obter de $(selected).val(); ?
    – Sergio
    25/08/2014 às 15:52
  • Espero trazer os itens checados.
    – pnet
    25/08/2014 às 17:03

1 Resposta 1

2

Segundo http://bootsnipp.com/snippets/featured/checked-list-group, siga exemplo logo abaixo:

Html

<div class="col-xs-6">
    <h3 class="text-center">Colorful Example</h3>
    <div class="well" style="max-height: 300px;overflow: auto;">
        <ul id="check-list-box" class="list-group checked-list-box">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item" data-color="success">Dapibus ac facilisis in</li>
          <li class="list-group-item" data-color="info">Morbi leo risus</li>
          <li class="list-group-item" data-color="warning">Porta ac consectetur ac</li>
          <li class="list-group-item" data-color="danger">Vestibulum at eros</li>
        </ul>
        <br />
        <button class="btn btn-primary col-xs-12" id="get-checked-data">Get Checked Data</button>
    </div>
    <pre id="display-json"></pre>
</div>

Javascript

$('#get-checked-data').on('click', function(event) {
        event.preventDefault(); 
        var checkedItems = {}, counter = 0;
        $("#check-list-box li.active").each(function(idx, li) {
            checkedItems[counter] = $(li).text();
            counter++;
        });
        $('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
    });

Solução

No seu caso particular

function Teste() {        
    var checkedItems = {}, counter = 0;
    $("#chkLista li.active").each(function(idx, li) {
        checkedItems[counter] = $(li).text();
        counter++;
    });
    alert(JSON.stringify(checkedItems, null, '\t'));
}

<button class="btn btn-primary col-xs-12" onclick="Teste()">Verificar Itens Escolhidos</button>

inserir a descrição da imagem aqui

Exemplo OnLine: JSFiddle


Parte do Envio para o Controller

Javascript

$.ajax({
            url: '/CadastroCargo/GravaCargo',
            datatype: 'json',
            contentType: 'application/json;charset=utf-8',
            type: 'POST',
            data: JSON.stringify({ _cargo: checkedItems }),
            success: function (data) {

            },
            error: function (error) {
            }
});

Metodo do Controller CadastroCargo

public ActionResult GravaCargo(Dictionary<string, string> _cargo)
{
            return View();
}

inserir a descrição da imagem aqui

6
  • Uma dúvida. Fiz um alert assim: alet(checkedItems); e não veio nenhum alert, no exemplo postado por Maria.
    – pnet
    25/08/2014 às 16:00
  • alert(JSON.stringify(checkedItems, null, '\t')); se fez assim? faz um coisa também que é bom para verificar os erros de javascript instale o firebug no seu navegador e ali antes do alert coloque um console.log(checkedItems). Inclusive se tiver outros erros na página ele vai identificar ...
    – Maria
    25/08/2014 às 16:02
  • Não consigo passar para minha controller os itens checados, pelo exemplo postado pela Maria.
    – pnet
    25/08/2014 às 17:24
  • Não há erros de js
    – pnet
    25/08/2014 às 17:28
  • Havia um erro sim no Js passado, o event tinha que ser informado, mas, agora eu coloquei no seu padrão e observe que é um <button do type='button'></button>
    – Maria
    25/08/2014 às 19:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .