Recuperar objeto MVC e exibir modal [RESOLVIDO]

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

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

Essa linha deveria estar comentada mesmo?

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

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

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

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

muito obrigado

	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

Ol amigos

consegui resolver segue o resultado:

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

Muito obrigado