Jump to content
ribeiro3001

preenchimento de 3 combos, através de eventos, on, emitter

Recommended Posts

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();
	
});

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By dutopfave
      Galera tenho um cadastro de cliente que preenche nome e login, ai quando digita o nome, automaticamente ele preenche o login, pra agiliza, ta assim: $("#inputdonome").blur(function(){ $("#login").val($(this).val()); }); só que to com problema de nome repetido, então vou muda ao invés de preenche automático com nome, preenche com EMAIL, porém tem como preenche automático o login só q para antes de chega no '@'   ai ficaria assim:

      E-mail: contato2019@site.com.br
      Login: contato2019
    • By nathicoelhoo
      Tenho um cadastro de cliente e no cadastro é selecionado o sexo e o estado, por exemplo. Na área de edição, preciso puxar esses dados JÁ SELECIONADOS para um combobox. Tentei fazer com foreach porém não funcionou. Alguém pode me ajudar?
      <div class="form-group col-md-5" > <label for="inputSexo">Sexo</label> <select name="sexo_cliente" id="sexo_cliente" class="form-control" disabled> <option selected disabled="">Sexo</option> <?php require_once "api/conexao.php"; try { $prepared3 = $conexao_pdo->prepare("select * from sexo"); $prepared3->execute(); $result3 = $prepared3->fetchAll(); foreach($result3 as $resultado3) { echo "<option value='". $resultado3["cod"] ."'>". $resultado3["sexo"] ."</option>"; } } catch (PDOException $e) { echo "<option></option>"; } ?> </select> </div>  
    • By padini
      Boa noite pessoal, estou com problemas em criar um menu dropdown onde as opções deem um resultado final na própria página. 
       
      Exemplo: 
      Caixa 1 - Estados 
      Caixa 2 - cidades 
      Resultado em texto abaixo: Lojas daquela cidade e estado e caso não houver nenhuma loja, o resultado seria uma mensagem padrão. 
       
      é como este: https://www.unimed.coop.br/servicos/segunda-via-de-boletos Porem esse gera um terceiro dropdown e depois uma página externa. 
       
      Já consegui gerar o banco de dados para que cidade e estados estejam interligados, porem não consigo fazer aparecer o resultado. 
       
       
    • By alessandrolcruz
      Ola amigos,
      Gostaria de uma ajuda,
      Foi me solicitado para que eu criasse um sistema de preenchimento de cartas onde estas ja estao em um modelo padronizado. Ent'ao eu precisaria pegar os dados em uma tabela e depois com estes resultados os mesmos fossem para este modelo de carta preenchendo apenas alguns campos.
       
      Alguem teria alguma ideia de como fazer
    • By carlinhos.eltz
      Boa noite amigos!!!

      Estou eu aqui novamente com uma dúvida.

      Tenho um formulário que carrega as informações de um determinado cliente cadastrado no banco de dados, com a opção para alterar os dados. Nos dados referentes ao município, ele carrega um combobox com as opções de municípios cadastrados no banco, porém, não estou conseguindo fazer retornar o nome do município que está cadastrado no cliente no banco. Exemplo.: cliente mora no município de Gramado, quando carregar as informações, o nome em destaque no combobox seria Gramado, mas junto teríamos os demais municípios para alteração.

      Como poderia ser feito este combo?

      Desde já, obrigado a todos.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.