Recuperar objeto MVC e exibir modal [RESOLVIDO]

Front-end JavaScript
#1

Olá amigos

estou precisando recuperar um objeto Parcela e exibir num modal, segue o código

HTML:

<button type="button" class="btn btn-xs btn-link js-pesquisa-uma-parcela" data:item-parcela="${item.id}">
	<i class="glyphicon glyphicon-pencil"></i>
</button>

Código JS:

var Brewer = Brewer || {};

Brewer.PesquisaUmaParcela = (function() {
	function PesquisaUmaParcela() {
		this.parcelaInput = $('.js-pesquisa-uma-parcela');
		this.emitter = $({});	
		this.idParcela = 0;	
		this.on = this.emitter.on.bind(this.emitter);
	}
	
	PesquisaUmaParcela.prototype.iniciar = function() {
		bindBaixaParcela.call(this);	
	}
	
	function bindBaixaParcela() {
		this.parcelaInput.on('click', onParcela.bind(this));
	}
	
	function onParcela(evento) {
		var input = $(evento.target);		
		idParcela = input.data('item-parcela');		
		var resposta = $.ajax({
			url: 'pesquisaparcela',
			method: 'GET',
			data: {
				id : idParcela
			}
		});
		resposta.done(function(data) {
			console.log(data);
//			$("#baixaParcelas").html(data);
            $("#baixaParcelas").modal("show");
        });
	}
	
	return PesquisaUmaParcela;
	
}());

$(function() {
	var pesquisaUmaParcela = new Brewer.PesquisaUmaParcela();
	pesquisaUmaParcela.iniciar();
});

Controller:

@GetMapping("/pesquisaparcela")
public ModelAndView setarParcela(Long id) {
	this.parcela = parcelas.findOne(id);
	ModelAndView mv = new ModelAndView("contrato/BaixaParcelas");		
	mv.addObject(this.parcela);
	return mv;
}

o modal vem sem as informações.

Alguém poderia ajudar?

Muito obrigado

#2

Olá amigos

Acabei descobrindo que ao chamar o modal pela primeira vez não mostra os dados mas, ao chamar pele segunda vez ele mostra as informações.

Alguma sugestão para que eu possa resolver isso?

Muito obrigado

#3

Essa linha deveria estar comentada mesmo?

#4

Olá lucastody

se eu descomentar esta linha:

$("#baixaParcelas").html(data);

o modal não é exibido. Esse é o resultado do log:

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
	xmlns:brewer="http://brewer.algaworks.com">
	
<div class="modal  fade" id="baixaParcelas" tabindex="-1" role="dialog" onload="">
 	<div class="modal-dialog">
   		<div class="modal-content">
   			<div class="modal-header">
       			<button type="button" class="close" data-dismiss="modal"><i>&times;</i></button>
        		<h4 class="modal-title">Baixa Parcelas</h4>
      		</div>

			<div class="row">
				<!-- left column -->
				<div class="col-md-12">
					<!-- general form elements -->
					<div class="box box-primary">
<!-- 						<div class="box-header with-border"> -->
<!-- 							<h3 class="box-title">Pagamento Locatário</h3> -->
<!-- 						</div> -->
						<div class="box-body">
							<form   method="GET" action="/imobweb/baixaparcelas/novo" >
								
								<div class="row">
									<div class="form-group col-sm-3">
										<label class="control-label" for="vencimento">Vencimento</label>
										<input type="text" class="form-control" id="vencimento" name="vencimento" value="22/09/2018"/>
									</div>
									
									<div class="form-group col-sm-4">
										<label class="control-label" for="valorParcela">Valor Aluguel</label>
										<div class="input-group">
						      				<div class="input-group-addon">R$</div> 
											<input type="text" maxlength="14" class="form-control  js-decimal" id="valorParcela" name="valorParcela" value="1.000,00" />
										</div>								
									</div>
								</div>

							</form>
						
						</div>
					</div>
			 	</div>
			 </div>
 		</div>
 	</div>
</div>
	
</html>

pesquisaumaparcela.js:31:4

Muito obrigado

#5

O log que vc colocou é um html. É isso mesmo?

Ao descomentar a linha $("#baixaParcelas").html(data);, dá algum erro no console do navegador?

#6

Nenhum erro, mas deveria retornar o objeto parcela para que eu possa manipular os dados.

muito obrigado

#7 
	resposta.done(function(resposta) {
		console.log(resposta);
        $("#baixaParcelas").modal("show");

    });

coloquei a variável resposta e o html ficou assim:

×

Baixa Parcelas

		<div class="row">
			<!-- left column -->
			<div class="col-md-12">
				<!-- general form elements -->
				<div class="box box-primary">

					<div class="box-body">
						<form   method="POST" action="/imobweb/baixaparcelas/novo" ><input type="hidden" name="_csrf" value="e208ca75-a3e4-4155-95dd-c9a8016cccb0"/>
							
							<div class="row">
								<div class="form-group col-sm-3">
									<label class="control-label" for="vencimento">Vencimento</label>
									<input type="text" class="form-control" id="vencimento" name="vencimento" value="22/09/2018"/>
								</div>
								
								<div class="form-group col-sm-4">
									<label class="control-label" for="valorParcela">Valor Aluguel</label>
									<div class="input-group">
					      				<div class="input-group-addon">R$</div> 
										<input type="text" maxlength="14" class="form-control  js-decimal" id="valorParcela" name="valorParcela" value="1.000,00" />
									</div>								
								</div>
							</div>

						</form>
					
					</div>
				</div>
		 	</div>
		 </div>
	</div>
</div>

veja que as propriedades value dos campos vencimento e valorparcela estão aparecendo mas o modal ainda não mostra nada.

Muito obrigado

#8

Ol amigos

consegui resolver segue o resultado:

	resposta.done(function(resposta) {
		console.log(resposta);
        $("#baixaParcelas").modal("show");
        $("#baixaParcelas").reload;
    });

Muito obrigado