When it was manual, the check's (check boxes) were all ok. As I now mounted via jquery and controller, it no longer mounts the check's, it stays as 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 that 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 as it is working. Now, if I do just that, but using jquery and dynamically, it does not work there.
<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) {
}
})
}