preenchimento de 3 combos, através de eventos, on, emitter
Olá amigos!
Sou novo no fórum e desculpem se postei errado.
Gostaria de uma orientação no código que estou implementando, tenho 3 combos departamento, divisão e seção, e gostaria de ao selecionar a 1ª combo Departamento que já está preenchida, preencher a 2ª combo Divisão e ao preencher a 2ª combo divisão , preencher a 3ª combo seção, consegui implementar o preenchimento da 2ª combo Divisão através de um evento, mas não estou conseguindo, fazer o mesmo para o preenchimento da 3ª combo seção.Se algum amigo mais experiente puder me orientar ficarei muito grato. segue o código em JavaScript para melhor analise dos amigos .Desde já agradeço a atenção dos amigos e um grande abraço.
var Cofipa = Cofipa|| {};
Cofipa.ComboDepartamento = (function() { // criei o objeto departamento
function ComboDepartamento() {
this.combo = $('#departamento');
this.emitter = $({});
this.on = this.emitter.on.bind(this.emitter); // lanço um evento através do emitter
}
ComboDepartamento.prototype.iniciar = function() { //
this.combo.on('change', onDepartamentoAlterado.bind(this));
}
function onDepartamentoAlterado() {
this.emitter.trigger('alterado', this.combo.val());
}
return ComboDepartamento;
}());
Cofipa.ComboDivisao = (function() {
function ComboDivisao(comboDepartamento) {
this.comboDepartamento = comboDepartamento;
this.combo = $('#divisao');
this.imgLoading = $('.js-img-loading');
}
ComboDivisao.prototype.iniciar = function() {
reset.call(this);
this.comboDepartamento.on('alterado', onDepartamentoAlterado.bind(this));
}
function onDivisaoAlterada() {
this.emitter.trigger('alterado', this.combo.val());
}
function onDepartamentoAlterado(evento, codigoDepartamento) {
console.log('departamento selecionado', codigoDepartamento)
if (codigoDepartamento) {
var resposta = $.ajax({
url: this.combo.data('url'),
method: 'GET',
contentType: 'application/json',
data: { 'departamento': codigoDepartamento},
beforeSend: iniciarRequisicao.bind(this),
complete: finalizarRequisicao.bind(this)
});
resposta.done(onBuscarDivisoesFinalizada.bind(this));
} else {
reset.call(this);
}
}
function onBuscarDivisoesFinalizada(divisoes) {
var options = [];
divisoes.forEach(function(divisao) {
//console.log('divisoes', divisao)
options.push('<option value"' + divisao.codigo + '">' + divisao.nome + '</option>');
});
this.combo.html(options.join(''));
this.combo.removeAttr('disabled');
}
function reset() {
this.combo.html('<option value="">Selecione a divisao</option>');
this.combo.val('');
this.combo.attr('disabled', 'disabled');
}
function iniciarRequisicao() {
reset.call(this);
this.imgLoading.show();
}
function finalizarRequisicao() {
this.imgLoading.hide();
}
return ComboDivisao;
// até aqui consigo preencher a combo divisão.
}());
Cofipa.ComboSecao = (function() {
function ComboSecao(comboDivisao) { // daqui em diante não consigo pegar o id(codigoDivisão)
this.comboDivisao = comboDivisao;
this.combo = $('#secao');
this.imgLoading = $('.js-img-loading');
}
ComboSecao.prototype.iniciar = function() {
reset.call(this);
this.comboDivisao.on('alterado', onDivisaoAlterada.bind(this));
}
function onDivisaoAlterada(evento, codigoDivisao) {
console.log('divisao selecionado', codigoDivisao) // aqui mostra apenas o nome não o código
if (codigoDivisao) {
var resposta = $.ajax({
url: this.combo.data('url'),
method: 'GET',
contentType: 'application/json',
data: { 'divisao': codigoDivisao},
beforeSend: iniciarRequisicao.bind(this),
complete: finalizarRequisicao.bind(this)
});
resposta.done(onBuscarSecoesFinalizada.bind(this));
} else {
reset.call(this);
}
}
function onBuscarSecoesFinalizada(secoes) {
var options = [];
secoes.forEach(function(secao) {
console.log('secoes', secao)
options.push('<option value"' + secao.codigo + '">' + secao.nome + '</option>');
});
this.combo.html(options.join(''));
this.combo.removeAttr('disabled');
}
function reset() {
this.combo.html('<option value="">Selecione a secao</option>');
this.combo.val('');
this.combo.attr('disabled', 'disabled');
}
function iniciarRequisicao() {
reset.call(this);
this.imgLoading.show();
}
function finalizarRequisicao() {
this.imgLoading.hide();
}
return ComboSecao;
}());
$(function() {
var comboDepartamento = new Cofipa.ComboDepartamento();
comboDepartamento.iniciar();
var comboDivisao = new Cofipa.ComboDivisao(comboDepartamento);
comboDivisao.iniciar();
var comboSecao = new Cofipa.ComboSecao(comboDivisao);
comboSecao.iniciar();
});Discussão (0)
Carregando comentários...