Bonjour a tous j'espère que vous aller bien aller c'est le week-end ce soir courage à tous ce qui bosse, alors je viens vers vous car j'ai un petit soucis d'ordre général
alors voila je créer une boutique et j'ai un petit problème de variable je veux afficher en Ajax le produit au clique d'un produits
j'ai une listes de produits et lorsque je clique sur un "td" que j'ai nommé test pour l'instant ça ne fonctionne pas car dans mon appelle en ajax je dit qu'il doit m'afficher une route avec un paramètre qui est un id je vous montre un peux mon code
déjà ma vue avec la listes des produits
{% extends 'back/base.html.twig' %}
{% block body %}
<br>
<br>
<br>
<br>
<div class="container-fluid">
<h1 class="text-center">Listes de tous les produits</h1>
<div id="resultat">
</div>
<table id="para" class="table table-hover">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Nom du produit</th>
<th scope="col">Publier</th>
<th scope="col">Description</th>
<th scope="col">Image</th>
<th scope="col">Prix</th>
<th scope="col">Référence</th>
<th scope="col">Catégorie</th>
<th scope="col">
<a class="btn btn-success" href="{{ path('add-product') }}">
Ajouter un produit
</a>
</th>
<th></th>
</tr>
</thead>
<tbody>
{% for product in products %}
<tr class="table-primary">
<th scope="row">{{ product.id }}</th>
<td>
<a href="{{ path('show-product', {id: product.id}) }}">
{{ product.name }}
</a>
</td>
<td>{% if product.isPublished == '1' %}
<span class="badge badge-success">Oui</span>
{% elseif product.isPublished == '0' %}
<span class="badge badge-danger">Non</span>
{% endif %}
</td>
<td>{{ product.description | truncate('50') }}</td>
<td><img src="{{ asset('images/products/'~product.imageName) }}" alt="{{ product.imageName }}" width="50px" height="50"> </td>
<td>{{ product.price }}€</td>
<td>{{ product.reference }}</td>
<td>{{ product.category}}</td>
<td>
<a href="{{ path('show-product', {id: product.id}) }}" class="btn btn-info">Voir</a>
<a href="{{ path('edit-product', {id: product.id}) }}" class="btn btn-success">Modifier</a>
<a href="{{ path('delete-product', {id: product.id}) }}" class="btn btn-danger delete" data-confirm="Voulez vous vraiment supprimer cette catégorie ?">Supprimer</a>
</td>
<td id="sub2">test</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<script>
$('#sub2').on('click', function(){
// J'initialise le variable box
var box = $('#resultat');
// Je définis ma requête ajax
$.ajax({
// Adresse à laquelle la requête est envoyée
url: '{{ path('show-product', {id: showProduct.id}) }}',
type: 'GET',
// La fonction à apeller si la requête aboutie
success: function (data) {
// Je charge les données dans box
box.html(data);
document.getElementById('para').innerHTML = "<p>Retour à la listes des produit <a href='{{ path('listes-product') }}'>ici</p></p>";
},
// La fonction à appeler si la requête n'a pas abouti
error: function() {
// J'affiche un message d'erreur
box.html("Désolé, aucun résultat trouvé.");
}
});
});
</script>
{% endblock %}
la variable product il l'affiche bien pas de soucis mais le problème la variable "showProduct" ne la trouve pas alors qu'elle est dans mon controller qui me permet d'afficher un produit :
"Impossible to access an attribute ("id") on a null variable." si je met a la main un id par exemple 3 ou 7 bah il m'affiche bien le produit mais si je le met dynamiquement ça ne fonctionne pas help me pliz.
voila si vous avez une solution merci de m'en proposer une, merci à vos future réponse te bon courage !
En ajax,tu ne dois pas passer le paramètre dans la route directement mais plutôt en utilisant l'option data:
$.ajax({
// Adresse à laquelle la requête est envoyée
url: '/showProduct',
type: 'GET',
data: {
id: ton_id
}
// La fonction à apeller si la requête aboutie
success: function (data) {
// Je charge les données dans box
box.html(data);
document.getElementById('para').innerHTML = "<p>Retour à la listes des produit <a href='{{ path('listes-product') }}'>ici</p></p>";
},
De plus, évites la syntaxe twig dans ton script js parce que tu vas devoir externaliser ce code dans un fichier à part et cela ne fonctionnera plus.
Utilises plutôt ton_elem.val pour récupérer la valeur d'un élément en JS.
"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain
Merci beaucoup pour ton retour, si je doit mettre l'url comme tu l'indique je fait comment pour passer l'id en paramettre ?
j'ai fait ça mais on me dit que l'id est inconnue (je suis pas super fort en javascript j'ai des petit notions ^^')
$(document).ready(function () {
$('#sub2').on('click', function(e){
e.preventDefault();
// J'initialise le variable box
var box = $('#resultat');
// Je définis ma requête ajax
$.ajax({
// Adresse à laquelle la requête est envoyée
url: '/produits/id',
type: 'GET',
data: {
id: id
},
// La fonction à apeller si la requête aboutie
success: function (data) {
// Je charge les données dans box
box.html(data);
document.getElementById('para').innerHTML = "<p>Retour à la listes des produit <a href='{{ path('listes-product') }}'>ici</p></p>";
},
// La fonction à appeler si la requête n'a pas abouti
error: function() {
// J'affiche un message d'erreur
box.html("<p>Désolé, aucun résultat trouvé.</p>");
}
});
});
});
Alors la je vous cache pas je suis complètement paumé j'ai essayer ce ci mais le problème c'est que ça rentre toujours dans le else moi ce que j'ai pas très bien compris c'est comment mettre l'id dans l'url ? pourquoi il y a me chercher par exemple l'id numéro 3
/produits/3
j'ai effectuer ce code mais ça rentre dans le else :
$(document).ready(function () {
$('#sub2').on('click', function(e){
e.preventDefault();
// J'initialise le variable box
var box = $('#resultat');
// Je définis ma requête ajax
$.ajax({
// Adresse à laquelle la requête est envoyée
url: '/produits/id',
type: 'GET',
data: {
id: $('#sub2').val()
},
// La fonction à apeller si la requête aboutie
success: function (data) {
// Je charge les données dans box
box.html(data);
document.getElementById('para').innerHTML = "<p>Retour à la listes des produit <a href='{{ path('listes-product') }}'>ici</p></p>";
},
// La fonction à appeler si la requête n'a pas abouti
error: function() {
// J'affiche un message d'erreur
box.html("<p>Désolé, aucun résultat trouvé.</p>");
}
});
});
});
$(document).ready(function () {
$('#sub2').on('click', function(e){
e.preventDefault();
// J'initialise le variable box
var box = $('#resultat');
// Je définis ma requête ajax
var id = $('#sub2').data('id)
$.ajax({
// Adresse à laquelle la requête est envoyée
url: '/produits/id',
type: 'GET',
data: {
id: id
},
// La fonction à apeller si la requête aboutie
success: function (data) {
// Je charge les données dans box
box.html(data);
document.getElementById('para').innerHTML = "<p>Retour à la listes des produit <a href='{{ path('listes-product') }}'>ici</p></p>";
},
// La fonction à appeler si la requête n'a pas abouti
error: function() {
// J'affiche un message d'erreur
box.html("<p>Désolé, aucun résultat trouvé.</p>");
}
});
});
});
"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain
il va aller chercher l'id associer au produit donc moi ce que je veux c'est récupérer l'id dynamiquement et le code que vous m'avez proposer il ne fonctionne pas enfin il marche mais ça me retourne une erreur 500 vous penser que ça doit un problème d'url ? vue que mon url doit être comme ce ci : /produits/5 ou l'id 7
merci pour votre aide c'est gentille ! bon courage a vous
$(document).on('click', '#sub2', function (e) {
e.preventDefault();
var link = $('#show-product-link').attr('href');
var id = link.split("/").pop();
$.ajax({
url: 'contact/showProduct/' + id,
method: 'POST',
data: {
id: id
}
}).done(function (data) {
console.log('success');
}).fail(function (data) {
console.log('fail');
});
});
Code PHP:
/**
* @param int $id
* @Route("/contact/showProduct/{id}", name="show-product")
*/
public function showProduct(int $id)
{
dump($id);
die();
}
"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain
Symfony variable global n’existe pas
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
https://dev-crown.com/
https://dev-crown.com/
https://dev-crown.com/
https://dev-crown.com/