Recuperation d'Id d'une tr apres le chargement par ajax

Fermé
nada12345 Messages postés 6 Date d'inscription mercredi 25 janvier 2017 Statut Membre Dernière intervention 26 janvier 2017 - Modifié par nada12345 le 25/01/2017 à 15:49
nada12345 Messages postés 6 Date d'inscription mercredi 25 janvier 2017 Statut Membre Dernière intervention 26 janvier 2017 - 26 janv. 2017 à 09:24
Bonjour,
j’ai un tableau dynamique ou je veux récupérer l'id de la ligne selictionné pour la modifier,
mon problème c'est que je peux pas utiliser l'objet $(this) après le chargement de ma page par ajax

<tbody class="table-article-tbody" id="table_article_tbody">
     {% for ligne in liste_article %}
              <tr id="{{ ligne.ref_article }}">
                    <td>{{ ligne.descripton_article }}</td>
                    <td>{{ ligne.compte_article }}</td>
                    <td>{{ ligne.quantite_article }}</td>
                    <td>{{ ligne.prix_unitaire }}</td>
                    <td>{{ ligne.tva_article }}</td>
                    <td>{{ ligne.montant_article }}</td>
                    <td><a id="update_ligne" href="#" rel="nofollow noopener noreferrer" target="_blank">modifier</a></td>
               </tr>
 {% endfor %}

voici mon script ou je veux recu
pérer id du tr pour la modifier

<script>
        $('#table_article tr').on('click', function(event){
            event.preventDefault();
            if($(this).attr('id') != undefined){
                alert($(this).attr('id'));
                $.ajax({
                    type: 'GET',
                    url : "{% url 'updateligneFacture_tem' %}",
                    data: $("#form_facture").serialize(),
                    success : function(data){
                        $('#contenue').[/contents/498-html-langage html](data);
                        $(this).html("
                        <td>{{ formFacture.description_article }}</td>
                        <td>{{ formFacture.compte_article }}</td>
                        <td>{{ formFacture.quantite_article }}</td>
                        <td>{{ formFacture.prix_unitaire_article }}</td>
                        <td>{{ formFacture.tva_article }}</td>
                        <td>{{ formFacture.montant }}</td>
                            ");
                        $('#table_article tr:last').remove();

                        $('.selectpicker').selectpicker();
                    },
                    error : function(){
                        alert("Erreur update !!");
                    }
                });
            }
        });
</script>



Merci d'avance

1 réponse

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
25 janv. 2017 à 16:02
Salut,

Essaye de modifier la déclaration de ton listener comme ceci :
$('body').on('click', '#table_article tr', function(event){


Explication ici : https://api.jquery.com/on/#direct-and-delegated-events

Bonne journée,
0
nada12345 Messages postés 6 Date d'inscription mercredi 25 janvier 2017 Statut Membre Dernière intervention 26 janvier 2017
25 janv. 2017 à 16:15
merci Pilet,
mais toujours le mème problème qaund j'ai essayer de récupérer l'id de mon tr et l'afficher dans alert par alert($(this).attr('id')); il m'afficher undefined
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
25 janv. 2017 à 16:53
Effectivement j'avais mal compris le problème.

Si tu veux utiliser la $this de ton listener (la première fonction) dans la fonction success de la requête ajax, tu peux simplement enregistrer la variable $this dans une autre variable. Par exemple :
<button class="btn">test</button>

<script src=""quot;https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(function () {
        $('.btn').click(function () {
            // creation variable
            var $this = $(this);
            console.log($this);
            $.ajax({
                url: '#',
                success: function (data) {
                    // utilisation variable
                    console.log($this);
                }
            });
        });
    });
</script>
0
nada12345 Messages postés 6 Date d'inscription mercredi 25 janvier 2017 Statut Membre Dernière intervention 26 janvier 2017 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
25 janv. 2017 à 17:14
merci bien Pilet grâce au stockage du variable $this maintenant je peux récupérer l id de mon tr mais ce code ne fonctionne pas si vous avez une aidé pour quoi ça marche pas
$this.html("
<td>{{ formFacture.description_article }}</td>
<td>{{ formFacture.compte_article }}</td>
");
et merci encore une foie
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
25 janv. 2017 à 17:39
La syntaxe {{ data }} semble provenir d'un moteur de template (Twig ?) qui est donc à interpréter en PHP et non en Javascript.

La génération du html "<td>{{ formFacture.description_article }}</td>..." devrait être fait dans le script PHP de traitement de la requête ajax afin que celui-ci retourne uniquement le code html avec les données.
0
nada12345 Messages postés 6 Date d'inscription mercredi 25 janvier 2017 Statut Membre Dernière intervention 26 janvier 2017 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
25 janv. 2017 à 17:54
{{ formFacture.description_article }} c'est champ de text prévient d'une view django et je l'ai déja générer dans mon html mais je veux l'afficher encore une fois par le code ajax afin de modifier l tr de mon tableau
mon code html
{% for ligne in liste_article %}
<tr id="{{ ligne.ref_article }}">
<td>{{ ligne.descripton_article }}</td>
<td>{{ ligne.compte_article }}</td>
</tr>
{% endfor %}
<tr>
<td>{{ formFacture.description_article }}</td>
<td>{{ formFacture.compte_article }}</td>
</tr>
0