Bonjour tout le monde,
je vous expose mon problème :
Pour l'affichage des données, j'utilise la méthode 'classique' donc la méthode 'renderView' côté serveur et je renvois donc une JsonResponse avec une variable 'body' qui contient ma page twig remplie avec les données. Dans mon success de mon appel Ajax, je fais donc un .html(data.body). Tout fonctionne bien !
Ce que je voudrais faire maintenant, c'est juste renvoyer les données et pas le fichier twig dans la JsonResponse (jusque là je sais faire). Mais c'est après que je ne sais pas comment faire, pour utiliser un template twig, le remplir avec mes données et l'afficher mais côté client donc dans mon JS.
Est-ce que vous auriez une solution à ce problème ?
D'avance, merci !
5 réponses
Bonsoir.
J'ai un peu de mal à te suivre là.
Tu veux juste récupérer les données donc sous le format json et non le code HTML de la page, jusque là aucun soucis.
Mais ta requête ajax, elle est faîte où, au niveau de la page voulue ou non ?
Bonsoir Lartak,
Ce sera peut-être + lisible comme ceci :) :
<script type="text/javascript">
$(function () {
setup_widgets_desktop();
$.ajax({
type: 'POST',
url: '{{ url }}',
success: function (data) {
$('#widget-companies .widget-body').html(data.body);
}
});
});
</script>
<div class="jarviswidget" id="widget-companies"
data-widget-colorbutton="false"
data-widget-editbutton="false"
{#data-widget-load="{{ url }}"#}>
<header class="header_widget">
<span class="widget-icon"> <i class="fa fa-table"></i>
</span>
<h2 id="title-widget-companies">
<strong>
{{ title | raw }}
<b></b>
</strong>
</h2>
<div class="widget-toolbar pull-right">
<a type="button" href="{{path('addCompanyDialog')}}"
class="btn btn-success dialog-link-company">
<i class="glyphicon glyphicon-plus"></i>
{{ 'company.page.buttons.add' | trans }}
</a>
</div>
<div class="widget-toolbar pull-right">
<a type="button" href="{{ path('exportCSVCompanies') }}"
class="btn btn-default btn-load-page">
CSV
</a>
<a type="button" href="{{ path('exportPDFCompanies') }}"
class="btn btn-default btn-load-page">
PDF
</a>
</div>
<div class="widget-toolbar" id="switch_search">
<span class="onoffswitch-title">
<i class="fa fa-location-arrow"></i>
{{ 'global.actions.advanced.search' | trans }}
</span>
<span class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox switch_advanced_search" id="switch_advanced_search_companies">
<label class="onoffswitch-label" for="switch_advanced_search_companies">
<span class="onoffswitch-inner" data-swchoff-text="OFF" data-swchon-text="ON"></span>
<span class="onoffswitch-switch"></span> </label>
</span>
</div>
</header>
<div class="widget-body">
<p class="text-left">
<span class="widget-icon">
<i class="fa fa-gear fa-2x fa-spin"></i>
</span>
Chargement en cours ...
</p>
</div>
</div>De cette manière tu ne peux pas.
Tu devrais regarder du côté de Mustache pour faire ce que tu demandes : Tutoriel Vidéo Javascript » Mustache et petite info au passage, pour éviter que Twig y mette son petit grain d'sel en essayant d'interpréter le code que tu utiliseras pour Mustache sur ta page, il te suffira d'utiliser verbatim.
Par exemple :
{% verbatim %}
// contenu qu'utilisera Mustache
<div id="mustache_tpl">
<div class="user">
{{ user.username }}
</div>
<div class="article">
{{ article.name }}
</div>
</div>
// fin du contenu pour Mustache
{% endverbatim %}Bon, j'ai testé Mustache, ça convient à mon besoin ! Le seul souci que j'ai, c'est que, par exemple, quelque chose comme ça :
<a class="show_link" href="{{ path('showCompany', {'id': id})}}">{{name}}</a>Il ne m'interprète pas la fonction path si je la mets dans le verbatim.