jquery - Get data from a Symfony controller action with AJAX -
i have simple showaction show user's information:
/** * @route("/user/{id}", name="show_user", options={"expose"=true}) * @method("get") * * @param user $user * @return \symfony\component\httpfoundation\response */ public function showaction(user $user) { return $this->render('user/showuser.html.twig', array( 'user' => $user, )); }
i try information ajax display in seperate div:
$('.showuser').click(function (e) { var geturl = routing.generate('show_user', {'id': $(this).attr('id')}); e.preventdefault(); $.ajax({ url: geturl, success: function (data) { $("#userdetails").html(data); } }); });
my list of users overview in html:
<table class="table-title table table-striped table-bordered"> <thead> <tr> <th class="col-md-2">name</th> <th class="col-md-1">age</th> <th class="col-md-1">actions</th> </tr> </thead> <tbody> <tr> {% user in users %} <td>{{ user.name }}</td> <td>{{ user.age }}</td> <td> <button id="{{ user.id }}" type="button" class="deleteuser btn btn-lg btn-danger">delete</button> <button id="{{ user.id }}" type="button" class="showuser btn btn-lg btn-primary">show</button> </td> </tr> {% endfor %} </tbody> </table> <div class="displayuser col-sm-4"> {% include 'user/showuser.html.twig' %} </div>
and showuser template display selected user:
<div id="userdetails"> {{ dump(user) }} </div>
what happening when load page, {{ dump(user) }}
contains array of users, , not empty. when click on show button display 1 user's information {{ dump(user)}}
change show correct information.
also when change {{ dump(user) }}
{{ user.name }} - {{ user.age }}
, , reload page error:
key "name" array keys "0, 1" not exist in user/showuser.html.twig @ line 2
can me? explain me doing wrong? think there wrong ajax call, have never used ajax before, , have created based on samples managed find, further don't get.
all want display user's information in div when clicking on user's show button.
i think figured out:
i changed ajax function:
$('.showuser').click(function() { var geturl = routing.generate('show_user', {'id': $(this).attr('id')}); $.get(geturl, function (data) { $(".userdetails").html(data); }); });
i removed twig include (also peter popelyskho said in comments) , paste div in showuser.html in place:
<table class="table-title table table-striped table-bordered"> <thead> <tr> <th class="col-md-2">name</th> <th class="col-md-1">age</th> <th class="col-md-1">actions</th> </tr> </thead> <tbody> <tr> {% user in users %} <td>{{ user.name }}</td> <td>{{ user.age }}</td> <td> <button id="{{ user.id }}" type="button" class="deleteuser btn btn-lg btn-danger">delete</button> <button id="{{ user.id }}" type="button" class="showuser btn btn-lg btn-primary">show</button> </td> </tr> {% endfor %} </tbody> </table> <div class="userdetails"></div>
inside user/showuser.html.twig
template have: {{ user.name}} - {{ user.age }}
.
and looks good!
if thinks there better way or more convenient way, please feel free show me, want learn possible.
Comments
Post a Comment