Bonjour à tous,
Je débute en Symfony et j'ai un niveau assez faible en Jquey/Ajax.
Ce que je fais
Je voudrais charger les commentaires associés à mon objet dans ma vue grace à une requete Ajax.
La vue et le code Jquey Ajax
<div class="row d-flex justify-content-center mt-4">
<div id="comments"></div>
</div>
<div class="row d-flex justify-content-center mt-4">
<button id="moreComments" type="button" class="btn btn-primary mb-4" >Voir plus de commentaires</button>
</div>
<!-- fin List Comments section -->
</div>
{% block javascripts %}
<script>
$(document).ready(function() {
function seeMore() {
const nbComments = $('#comments div.card').length;
const url = "{{ path('app_comment_seemore', {'trick_id': trick.id, 'offset': 'nb_comments'|default(null) }) }}";
const urlFormat = url.replace('nb_comments', nbComments);
$.ajax({
url: urlFormat,
type: 'GET',
success: function (response) {
$('#comments').append(response);
}
});
}
seeMore();
$('#moreComments').click(function () {
seeMore();
});
$('#seeMedia').click(function () {
$('.trickMedia').toggle('fast', function () {
if (this.style.display === 'block') {
$('#seeMedia').html('cacher les médias');
} else {
$('#seeMedia').html('voir les médias');
}
});
});
})
</script>
{% endblock %}
Le controller
/**
* @Route("Ajax/seemore/{trick_id}/{offset}", condition="request.isXmlHttpRequest()")
* @ParamConverter("trick", options={"mapping": {"trick_id": "id"}})
* @param $offset
* @return Response
*/
public function seeMore(Trick $trick, $offset, CommentRepository $commentRepo)
{
$comments = $commentRepo->findBy(['trick' => $trick->getId()],['id' => 'DESC'], 10, $offset);
dd($comments);
return $this->render('/comment/seeMore.html.twig', ['trick' => $trick, 'comments' => $comments]);
}
le template que je veux rendre dans ma vue
{% for comment in comments %}
<div class="row">
<div class="col-md-6">
<div class="card mb-2" style="width: 18rem;">
{% if comment.author.avatarFilename == null %}#}
<img class="img-thumbnail" src={{ asset('img/avatar-placeholder.png') }}>
{% else %}
<img class="img-thumbnail"
src="{{ asset('uploads/pictures/' ~ comment.author.avatarFilename) }}">
{% endif %}
<div class="card-body">
<h5 class="card-title">{{ comment.author.userName }}</h5>
<h6 class="card-subtitle mb-2"><small>{{ comment.createdAt|date("d/m/Y") }}</small></h6>
<p class="card-text">{{ comment.text }}</p>
{{% if app.user and comment.author.userName == app.user.userName %}
<a class="ml-2 text-danger" href="{{ path('comment_delete', {'id':comment.id}) }}">effacer mon commentaire</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
Ce que je veux
J'aimerai qu'au clic sur le bouton moreComments les datas soit intégrées dans la div #comments
Ce que j'obtiens
Si je dumpe le résultat de ma requete j'ai bien des données mais quand je retire le dd($comments) c'est le drame.
No route found for "GET /commentAjax/seemore/59/0" (from "http://127.0.0.1:8000/trick/59")