Send data from JS to function in the Controller and get the result from the function

Question

Please I need help I am stuck in this since yesterday, the probleme is I got a numberInput I use jquery autocomplete that helps me select a user's subscription number. With that number I want to get the full name of a user and show it on the twig. I am calling the JS function getInfoOfInput() once my input is changed, these are the JS function that I use:

function getInfoOfInput()
 {
 var tutoreSelectionne = document.getElementById("numAdherent");
 var tutore = tutoreSelectionne.value;
 //alert(tutoreSelectionne.value);
 recupName(tutore);
 }
 function recupName(tutoreSelectionne) {
 var DATA = {tutoreSelectionne: tutoreSelectionne};
 var request = $.ajax({
 type: "POST",
 url: "{{ path('paces_statistique_default_getnometprenomtutore') }}",
 data: DATA,
 success: function(data){
 $('#name').html(data);
 }
 });
 return false;
 }

This is the function in my controller :

 /**
 * get fullName
 * @Secure(roles="ROLE_ADMIN")
 * @Route("/recupFullName/")
 * @param Request $request La requête ajax qui envoie le numAd
 * @return Response $fullnam
 */
public function getNomEtPrenomTutore($request){
 $em = $this->getDoctrine()->getManager();
 $tutoRepo = $em->getRepository(Tutore::class);
 if ($request->isXmlHttpRequest()) {
 $numTutore = $request->request->get('tutoreSelectionne');
 $tutore = $tutoRepo->findOneBy(['username' => $numTutore]);
 $nom = $tutore->getNom();
 $prenom = $tutore->getPrenom();
 $fullName = "$nom $prenom";
 return $this->render("PACESStatistiqueBundle:Default:index.html.twig", array('fullName'=>$fullName));
 }
}

PS: The 'username' is the user's subsription number ^^ I know it's not the good the name to use for it.

My input on the twig :

<div class="ui-autocomplete-input">
<input type="number" id="numAdherent" value="" onchange="getInfoOfInput();" onkeyup="this.onchange();" oninput="this.onchange();" onautocomplete="this.onchange();">
</div>

I use this to override the value of the input when I change it

// INPUT VALUE OVERRIDE
 $(function () {
 {% if is_granted('ROLE_ADMIN') %}
 $('td input[id^=numAdherent]').each(
 function (){
 $(this).on("change paste keyup", function()
 {$(this).attr('value', $(this).val())})
 }
 );
 {% endif %}
 });

this is the error that I get In JS with "Inspect Element"

jquery-1.11.3.min.js:5 POST http://localhost:8000/recupFullName/ 500(Internal Server Error)
send @ jquery-1.11.3.min.js:5
ajax @ jquery-1.11.3.min.js:5
recupName @ vueStatistique:231
getInfoOfInput @ vueStatistique:226
onchange @ vueStatistique:276
oninput @ vueStatistique:276

Thank you in advance for any help you can give me :)

Answer 1

Internal Server Error normally means, that something is not right in your controller action.

$tutore = $tutoRepo->findOneBy(['username' => $numTutore]);

This line might be the problem. For me, username does not sound like a number. Is this line really correct?

Edit: After checking the error message, here is the solution: Change

public function getNomEtPrenomTutore($request){

to

public function getNomEtPrenomTutore(Request $request){

and make sure that you actually import the Request class.

• Uness: Yes, I know it sounds weird but the username is the user subscription number
• Emanuel Oster: In that case, I would suggest to use the browser debug tools to find out what the error message is. To do so, do the following (At least in chrome, FF should be similar). Press F12 to open debug tools. Switch to the network tab. AFTER that trigger the ajax call. You should see a new item in the list on the left side. Check that item's Preview tab to see the server response (aka the error message) rendered as html.
• Uness: Controller "EnhancedProxy62db1e3f_856e7bba52f64f2dfd7076a0fac10a57e3836e6f__CG__\PACES\StatistiqueBundle\Controller\DefaultController::getNomEtPrenomTutore()" requires that you provide a value for the "$request" argument (because there is no default value or because there is a non optional argument after this one).
• Uness: Ok it's working but I still got a minor problem I need to modify the call of on change in the input the function is called for every modification in the input