Loading data in twig from controller using AJAX in symfony 3.4 - json

Question

i am trying to load data in twig from controller using AJAX ,
this is my controller action:
public function ajaxAction(Request $request) {
$students = $this->getDoctrine()
->getRepository('techeventBundle:event')
->findAll();
if ($request->isXmlHttpRequest() || $request->query->get('showJson') == 1) {
echo "request successfull";
$jsonData = array();
$idx = 0;
foreach($students as $student) {
$temp = array(
'name' => $student->getTitre(),
'address' => $student->getDescription(),
);
$jsonData[$idx++] = $temp;
}
return new JsonResponse($jsonData);
} else {
return $this->render('#reservation/Default/ajax.html.twig');
}
}
this is my twig file :
<!-- test Ajax --->
<button id="loadstudent">load events</button>
<div id="student">
<div id="name"></div>
<div id="address"></div>
</div>
<!-- test Ajax --->
<script language = "javascript"
src = "https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script language = "javascript">
$(document).ready(function(){
$("#loadstudent").on("click", function(event){
$.ajax({
url: '/student/ajax',
type: 'POST',
dataType: 'json',
async: true,
success: function(data, status) {
var e = $('<tr><th>Name</th><th>Address</th></tr>');
$('#student').html('');
$('#student').append(e);
for(i = 0; i < data.length; i++) {
student = data[i];
var e = $('<tr><td id = "name"></td><td id = "address"></td></tr>');
$('#name', e).html(student['name']);
$('#address', e).html(student['address']);
$('#student').append(e);
alert('Ajax request success');
}
},
error : function(xhr, textStatus, errorThrown) {
alert('Ajax request failed.');
}
});
});
});
</script>
let me describe to you the problem , when i click on the button ("#loadstudent") it shows up the 'Ajax request failed ' alert , added to that if you have seen in my action code i have added echo "request successfull"; after that :
if ($request->isXmlHttpRequest() || $request->query->get('showJson') == 1) {
it's not displaying that , which means that it's not getting into the condition ! help please i am stuck in this problem since one week ,

Answer 1

Add a route name in the controller #Route("/student/ajax", name="get-students")
Example:
/**
* #Route("/student/ajax", name="get-students")
*/
public function ajaxAction(Request $request) {
if ($request->isXmlHttpRequest() || $request->query->get('showJson') == 1) {
$jsonData = array(
array(
'name' => 'name1',
'address' => 'addres1',
),
array(
'name' => 'name2',
'address' => 'addres2',
),
);
return new JsonResponse($jsonData);
} else {
return $this->render('#reservation/Default/ajax.html.twig');
}
}
Now, in $.ajax send the request to route name url: "{{ path('get-students') }}"
<script language = "javascript">
$(document).ready(function () {
$("#loadstudent").on("click", function (event) {
$.ajax({
url: "{{ path('get-students') }}",
type: 'POST',
dataType: 'json',
async: true,
success: function (data, status) {
var e = $('<tr><th>Name</th><th>Address</th></tr>');
$('#student').html('');
$('#student').append(e);
for (i = 0; i < data.length; i++) {
student = data[i];
var e = $('<tr><td id = "name"></td><td id = "address"></td></tr>');
$('#name', e).html(student['name']);
$('#address', e).html(student['address']);
$('#student').append(e);
alert('Ajax request success');
}
},
error: function (xhr, textStatus, errorThrown) {
console.log(xhr, textStatus, errorThrown);
alert('Ajax request failed.');
}
});
});
});
</script>
Twig file output:
Name Address
name1 addres1
name2 addres2