javascript response does not appear on the page, only in the console
Good Night,
I'm using codeigniter, I'm implementing the pagseguro api, and I'm using javascript to set the session id and call the payment methods, so far everything is working, only in a function listarMeiosPag() in javascript, it brings the result only in console.log, if I send it to show the result in a Div of the page, it simply does not show, nor alert displays tb, but if I put the alert directly in the script of page it displays, I do not know how to solve this, if anyone can help me thank you.
My javascript looks like this:
var pg = function (){
var setSessionId = function(){
$.ajax({
url: 'http://[::1]/teste/pg_session_id',
dataType: 'json',
success: function(res){
if (res.erro == 0) {
var id_sessao = res.id_sessao;
PagSeguroDirectPayment.setSessionId(id_sessao);
} else {
alert('Erro: '+ res.erro +' '+res.msg);
}
}
});
}
//Mostrar Métodos do pagamento
function listarMeiosPag(){
$('.btn-pagamento').on('click', function(e){
PagSeguroDirectPayment.getPaymentMethods({
amount: 500.00,
sucess:function(res){
if (res.erro == 0) {
$.each(res.paymentMethods.CREDIT_CARD.options, function(i, obj){
console.log(res); //aqui exibe a respota certa
$('meio-pag').append("<span>"+ obj.name +"</span>"); </div>');
//na div da pagina fica em branco a resposta
});
/* console.log(res);*/
} else {
alert('Erro: '+ res.erro +' '+res.msg);
}
},
error: function(res){
console.log(res);
}
});
});
}
return {
init:function(){
listarMeiosPag()
setSessionId();
}
}
}();
jQuery(document).ready(function(){
pg.init();
});
My page looks like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Chama o jQuery -->
<script src="<?php echo base_url('public/js/pagamentos.js') ?>"></script>
//aqui é o botão que chama os métodos de pagamento
<button class="btn btn-primary btn-pagamento"> Pagar </button>
//aqui era a div que ele deveria exibir a resposta
<div class="meio-pag"> </div>
The function listarMeiosPag, should show the result in the div, but it does not work, and I do not know the pq, if you can help me thank you.
2 answers
Hello @ Ragnar
Was seeing that you are assigning in the function a parameter "res", is it an object? If so, where is it being called?
Within the framework of your code, the res is behaving like an object that has attributes, make sure that this function is treating correctly or that the parameter received by the function is in fact receiving an object with the properties it is trying to access.
res = {
erro: "algum erro",
msg: "alguma mensagem de erro
}
If res. error gets string, so in the comparison if(res.erro == 0) it should be some other validation like if(res.erro == "") that would indicate that the error attribute is empty. If you are going to do the count, you must use some method of type get.
function(res){ if (res.erro == 0) { var id_sessao = res.id_sessao; PagSeguroDirectPayment.setSessionId(id_sessao); } else { alert('Erro: '+ res.erro +' '+res.msg); } }
Make sure you are accessing the properties correctly. This parameter, apparently, seems enough for what you need.
if (res.erro == 0) { $.each(res.paymentMethods.CREDIT_CARD.options, function(i, obj){ console.log(res); //aqui exibe a respota certa $('meio-pag').append("<span>"+ obj.name +"</span>"); </div>'); //na div da pagina fica em branco a resposta });
You could try putting $('meio-pag').append("<span>"+ res.PROPRIEDADE.name +"</span>"); </div>');
If or
console.log(res);
Displays the right answer, "res" is the answer, then:
$('meio-pag').append("<span>"+ res +"</span>"); </div>');
Just watch out for the possibility of res being an object and needing the property, type, res.qualquerCoisa