Checklistbox when dynamically loaded does not mount the check’s

Asked

Viewed 289 times

1

When it was manual, the check’s(the check boxes) were all ok. As I now mounted via jquery and controller, no longer assembles the check’s, is like a listbox without being able to make selection. See below my code. My jquery:

function PreencheCheckList() {

    var str = "";

    $.ajax({

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

            str += '<div class="col-md-6">';
            str += '<h3 class="text-center">Unidade de negócio</h3>';
            str += '<div class="well" style="max-height: 350px;overflow: auto;">';
            str += '<ul class="list-group checked-list-box" id="check-list-box">';

            $(data.result_ap).each(function(){
                str += '<li class="list-group-item" data-style="button" data-color="success">' + this.Unidade_Negocio + '</li>';
            })

                str += '</ul>';
                str += '</div>';
                str += '</div>';

                str += '<div class="col-md-6">';
                str += '<br /><br /><br />';
                str += '<div class="well" style="max-height: 300px;overflow: auto;">';
                str += '<ul class="list-group list-box">';
                str += '<li class="list-group-item" data-style="button">Gerente Região Norte</li>';
                str += '<li class="list-group-item" data-style="button" data-color="success">Gerente Região Sul</li>';
                str += '<li class="list-group-item" data-style="button" data-color="info">Gerente São Paulo</li>';
                str += '</ul>';
                str += '</div>';
                str += '</div>';

                $('#checkList').html(str);

            str = "";

        },
        error: function (error) {

        }
    })
}

My controller:

[HttpPost]
        public JsonResult carregaCheckBox()
        {
            RupturaEntities db = new RupturaEntities();

            var result_ap = db.Apresentacao
                            .Select (a => new {a.Codigo_Unidade_Negocio, a.Unidade_Negocio}).ToList().Distinct();

            return Json(new { result_ap }, JsonRequestBehavior.AllowGet);
        }

This is my cshtml I’m using.

@model IEnumerable<Ruptura.Models.RupturaEntities>
@using System.Data.Entity.Migrations.Model

@{
    ViewBag.Title = "CadastroCargo";
    Layout = "~/Views/Shared/_LayoutBase.cshtml";
}

<link href="~/Content/Jqwidgets/jqx.base.css" rel="stylesheet" />
<link href="~/Content/Jqwidgets/jqx.summer.css" rel="stylesheet" />

<br />

<h3>Cadastro de Cargos</h3>

<br />

<div class="container">
    <div class="row">
        <div class="col-md-12">
            @*<div class="col-md-1">
                    <label for="txtCargo">Cargo:</label>
                </div>*@
            <div class="col-md-4">
                <input type="text" class="form-control col-md-6" name="txtCargo" id="txtCargo" placeholder="Digite um cargo válido">
            </div>
        </div>

        <br /><br />

        <div id="checklist">

        </div>
        <div class="col-md-12">
            <div class="col-md-6">
                <label class="checkbox" for="ckbAtivo">
                    <input type="checkbox" checked="checked" class="checkbox large" data-label="suffix" data-label-prepend="prefix" name="ckbAtivo" id="ckbAtivo">Ativo
                </label>
            </div>
        </div>

        </div>

            <div id="content">
                <div class="listTree"></div>
                <button class="btn btn-success" onclick=" return GravaCargo();">Gravar</button>
                @Html.ActionLink("Voltar", "Index", "Home", new { }, new { @class = "btn btn-danger" })
            </div>
        </div>

        <script src="~/Scripts/CheckListBox/CheckListBox.js"></script>
        <script src="~/Scripts/CadastroCargo/CadastroCargo.js"></script>

Here’s all my . js

var checkedItems = {}, counter = 0;

function GravaCargo() {

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

        var str = "";

    $.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) {

        }
    })
}

function PreencheCheckList() {

    var str = "";

    $.ajax({

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

            str += '<div class="col-md-6">';
            str += '<h3 class="text-center">Unidade de negócio</h3>';
            str += '<div class="well" style="max-height: 350px;overflow: auto;">';
            str += '<ul class="list-group checked-list-box" id="check-list-box">';

            $(data.result_ap).each(function(){
                str += '<li class="list-group-item" data-style="button" data-color="success">' + this.Unidade_Negocio + '</li>';
            })

            str += '</ul>';
            str += '</div>';
            str += '</div>';

            str += '<div class="col-md-6">';
            str += '<br /><br /><br />';
            str += '<div class="well" style="max-height: 300px;overflow: auto;">';
            str += '<ul class="list-group list-box">';
            str += '<li class="list-group-item" data-style="button">Gerente Região Norte</li>';
            str += '<li class="list-group-item" data-style="button" data-color="success">Gerente Região Sul</li>';
            str += '<li class="list-group-item" data-style="button" data-color="info">Gerente São Paulo</li>';
            str += '</ul>';
            str += '</div>';
            str += '</div>';

            $('#checklist').html(str);
            //$("#checklist").

            str = "";

        },
        error: function (error) {

        }
    })
}

$(document).ready(function () {
    PreencheCheckList();
})

With the script below, if I do how it works. Now, if I do exactly that, however via jquery and dynamically, then it doesn’t work.

<div id='jqxWidget'>
    <div style='float: left; width:auto;'>
        <div id='jqxTree' style='visibility: hidden; float: left; margin-left: 20px;'>
            <ul>
                <li item-checked='false' item-expanded='false'>
                    Produto
                    <ul>
                            <li item-expanded='true'>
                                MIP
                                <ul>
                                    <li item-expanded='true'>
                                        Família: ACCUVIT
                                        <ul>
                                            <li>ACCUVIT COMREV FRX30</li>
                                        </ul>
                                    </li>
                                    <li item-expanded='true'>
                                        Família: FLOGORAL
                                        <ul>
                                            <li>FLOGORAL SPRAY CEREJA CTX30ML</li>
                                            <li>FLOGORAL SPRAY MENTA CTX30ML</li>
                                            <li>FLOGORAL CREM DENTAL CTX70G</li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                </li>
            </ul>

        </div>

        <div style='margin-left: 60px; float: left;'>
            <div style='margin-top: 10px;'>
                <input id='jqxCheckBox' type="hidden">
            </div>
        </div>

    </div>
</div>

This is my new jquery

function MontaArvore() {

    var str = "";
    var motivo = "";
    var unidade_neg = "";
    var familia = "";

    $.ajax({

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

            $(data.monta_arvore).each(function () {

                if (motivo != this.Motivo1) {
                    str += '<ul>';
                    str += '<li item-checked="false" item-expanded="false">';
                    str += this.Motivo1;
                }

                if (unidade_neg != this.Unidade_Negocio) {
                    str += '<ul>';
                    str += '<li item-expanded="false">';
                    str += this.Unidade_Negocio;
                }

                if (familia != this.Familia) {
                str += '<ul>';
                str += '<li item-expanded="false">';
                    str += this.Familia;
                }
                str += '<ul>';
                    str += '<li>' + this.Descricao + '</li>';
                str += '</ul>';

                str += '</li>';//Familia
                str += '</ul>';//Familia

                str += '</li>';//Unidade de negocio
                str += '</ul>';//Unidade de negocio

                motivo = this.Motivo1;
                unidade_neg = this.Unidade_Negocio;
                familia = this.Familia;

                str += '</li>';//li item-checked após o ul principal
                str += '</ul>';
            })

                $('#jqxTree').html(str);

            str = "";
        },
        error: function (error) {

        }
    })
}
c# jquery asp.net-mvc-5

  • I thought this might have something to do with jquery. Here comes the question: How can I create dynamically using only the MVC Helper, that is, bring the result of the controller to the view and fill only the names? That way I would do a foreach inside cshtml and load the controller’s return.

1 answer

1

Your jquery script is not writing any checkbox.

Make him write it like this:

    <input type="checkbox" name="Caminho no objeto da model" id="Caminho no objeto da model com underlines" value="valor a atribuir se checkado" />

Example: Your model has a list of booleans called listCheckbox where its structure is:

    Model {
       public List<Classe> listCheckbox {
        public Bool Valor;
       }
    }

So the path to her would be listCheckbox[Indice]. Value;

the structure of the checkbox would be:

<input type="checkbox" name="listCheckbox[1].Valor" id="listCheckbox_1__Valor" value="True" />

<input type="checkbox" name="listCheckbox[2].Valor" id="listCheckbox_2__Valor" value="True" />

It is important to use two underscores after the Indice.

If it is not a list, it is a single checkbox. Example:

Model {
  public Classe ClasseComCheckbox {
     public Boolean ckbValor;
  }
}

Then the way would be: Classecomcheckbox.ckbValor

Example:

<input type="checkbox" name="ClasseComCheckbox.ckbValor" id="ClasseComCheckbox_ckbValor" value="True" />

  • He writes yes. If I do outside of jquery it works and well. I will edit and post the current code that mounts without jquery and with jquery nothing happens.

Browser other questions tagged c# jquery asp.net-mvc-5

You are not signed in. Login or sign up in order to post.