How to display Ajax jquery Symfony3.2 - php

Question

I start with ajax with symfony 3.2 and I have a small test sum of the two numbers, the query has been sent well but it does not show, because the status is 200 OK(Inspected google chrome) but does not display. thank you for helping me
this my Controller:
/**
* #Route("/cal",name="cal_page")
*/
public function ajaxAction(Request $request)
{
$num1=$request->query->get('nbr1');
$num2=$request->query->get('nbr2');
$som=$num1+$num2;
var_dump($som);
return $this->render('ProjetBundle:Default:ajax.html.twig',array('som'=>$som));
}
view:
<table>
<tr>
<td>Nombre1</td>
<td><input type="text" name="" id="num1"></td>
</tr>
<tr>
<td>Nombre2</td>
<td><input type="text" name="" id="num2"></td>
</tr>
<tr>
<td>Resultat</td>
<td><span id="resultat"></span></td>
</tr>
<tr>
<td colspan="2"><input type="button" name="" id="bttn" value="somme"></td>
</tr>
</table>
JS:
{% block javascripts %}
<script type="text/javascript">
$(document).ready(function(){
$( "#bttn" ).click(function(e) {
e.preventDefault();
var nbr1 = $('#num1').val();
var nbr2 = $('#num2').val();
if (isNaN(nbr1)|| isNaN(nbr2)) {
alert('nbr1 ou nbr2 number');
}
else{
$.ajax({
type:'GET',
data:{nbr1:nbr1,nbr2:nbr2},
url:'{{path('cal_page')}}',
success:function(data){
$('#resultat').html(data);
console.log('aiza ah');
}
});
}
});
});
</script>
{%endblock%}
Maybe it's at the twig level that there is something that does work, thank in advance for your help

Answer 1

You have to actually tell your twig template to show your answer, it won't just magically appear.
For example, to place it in your element with id resultant, you could do the following. The |default filter will take care of the case where som variable is empty.
<table>
<tr>
<td>Nombre1</td>
<td><input type="text" name="" id="num1"></td>
</tr>
<tr>
<td>Nombre2</td>
<td><input type="text" name="" id="num2"></td>
</tr>
<tr>
<td>Resultat</td>
<td><span id="resultat">{{ som|default }}</span></td>
</tr>
<tr>
<td colspan="2"><input type="button" name="" id="bttn" value="somme"></td>
</tr>
</table>