Modification d'un tr en recupérant son id

Version imprimable

Voir 40 message(s) de cette discussion en une page

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

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<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 recupérer id du tr pour la modifier

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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 pour votre aide

afficher un champ de text previent de view django par ajax

{{ 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 probléme c'est que $this.innerhtml il me donne cet erreur "unterminated string literal"
voici mon code html

Code:

1
2
3
4
5
6
7
8
9
10
{% 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>

voici mon code javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
        $('#table_article tr').on('click', function(event){
            event.preventDefault();
            if($(this).attr('id') != undefined){
                var $this = $(this);
                $.ajax({
                    type: 'GET',
                    url : "{% url 'updateligneFacture_tem' %}",
                    data: $("#form_facture").serialize(),
                    success : function(data){
                        $('#contenue').html(data);
 
                        this.innerhtml("
                        <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 pour votre aide

essaie :

Code:

1
2
 
$('#table_article').on('click','tr', function(event){alert($(this).attr("id"));});

25/01/2017, 19h04
123nada1

salut
l'alert c'est juste pour vérifier si je peux récupérer id de mon tr et ça marche bien, mais mon probleme c'est que je peux pas afficher mes champ par .innerhtml
25/01/2017, 21h34
Toufik83

Citation:

Envoyé par 123nada1

mais mon probleme c'est que je peux pas afficher mes champ par .innerhtml

je crois que c'est une erreur de syntaxe, c'est innerHTML et pas innerhtml.
vérifie si tu as des erreurs dans la console...
puis si tu travail avec jQuery, tu peux utiliser $.html() directement.

Code:

var $this = $(this);

Code:

1
2
3
4
5
6
$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>" )

pas

Code:

this.innerhtml

:nono:

et en js si tu veux écrire sure plusieurs lignes il faut mettre un \ !

26/01/2017, 09h36
123nada1

bonjours,merci pour vos aides

j'ai tester le code que vous avez me proposer avec $this.innerHTML et $this.html il me donne le meme

Code:

erreur unterminated string literal
26/01/2017, 10h27
SpaceFrog
tu n'aurais pas des " dans ta description par hasard ?
Code:

1 2 alert('{{ formFacture.description_article }}')
26/01/2017, 10h53
123nada1

quand je l'affiche dans une alert comme vous avez me proposer elle m'affiche le meme erreur unteminated string literal ,j'ai essayé d'executer ce code

Code:

$this.html("<td>test</td>");

au milieu de mon code ajax et il m'affiche le même erreur,mais quand je le mets en dehors du ajax il fonctionne, j'arrive pas a comprendre ou se trouve le problème exactement
26/01/2017, 11h07
SpaceFrog

Tu peux nous montrer le code html généré (source de la page en visualisation )
26/01/2017, 11h30
SpaceFrog

Regarde dans la console dans l'onglet XHR ce que tu reçois en retour de ton ajax ...

1 pièce(s) jointe(s)

le concept c'est j'ai un tableau ou j'affiche les articles de qui j'ai dans ma table, et je veux quand je click sur une ligne m'affiche sont contenue dans des champs de texte affin de le modifier voici mon code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <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="#">modifier</a></td>
            </tr>
       {% endfor %}
           <tr>
              <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>
              <td></td>
           </tr>
 </tbody>

voici mon code javascripte qui me permet d'appeler ma view ou 'ai créer objetForm formFacture pour afficher les champs de texte

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
        $('#table_article tr').on('click', function(event){
            event.preventDefault();
            if($(this).attr('id') != undefined){
                var $this = $(this);
                $.ajax({
                    type: 'GET',
                    url : "{% url 'updateligneFacture_tem' %}",
                    data: $("#form_facture").serialize(),
                    success : function(data){
                        $('#contenue').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>

je suis pas sur si cet logique me conduit au resultat qui je cherche
et merci beaucoup pour votre aide

26/01/2017, 11h51
123nada1

Citation:

Envoyé par SpaceFrog

Regarde dans la console dans l'onglet XHR ce que tu reçois en retour de ton ajax ...

il me renvoie la view django ou je fait le traitement updateligneFacture_tem qui j'appelé dans url, svp confermez moi si ce logique et faisable ou non parce que j'ai passé beaucoup de temps dans cette étape
26/01/2017, 13h43
SpaceFrog

Il doit retourner le html ...
26/01/2017, 14h01
Toufik83

oui elle est faisable bien sûr, il vous faut juste respecter la syntaxe de jQuery et suivre les conseils qu'on vous ai donné.

j'ai essayé ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 success : function(data){
                        $('#contenue_fact').html(data);
                        var row = $this.attr('id');
                        var tr = document.getElementById("row")
                        alert(row);
                        var td = tr.insertCell(0);                 
                        td.innerHTML = "test";
 
                        $('#table_article tr:last').remove();
                        $('.selectpicker').selectpicker();
                    },
                    error : function(){
                        alert("Erreur update !!");
                    }

il me donne cet erreur tr is null mais quand j'affiche alert($(this).attr('id')); il m'affiche l'id de la ligne clické et alert(tr); me donne null je vois pas pourquoi me donne cet erreur

26/01/2017, 16h37
Toufik83

Code:

var tr = document.getElementById("row")

tu es sûre que tu as un tr avec id "row" ?
puis si t'utilise jQuery, utilise le correctement, l'équivalant de document.getElementById("row") en jQuery est :

Code:

var tr=$("#row")

positionne toi sur la page demandé, puis appuie sur CTRL+U, et montre nous le code html généré.
26/01/2017, 16h38
123nada1
c'est bon le code td.innerHTML fonctionne maintenant, le probléme qui reste c'est je peut passer l'objet {{formFacture.description_article}} du form django
Code:

1 2 3 4 var row = $this.attr('id'); var tr = document.getElementById(row); var td = tr.insertCell(0); td.innerHTML = "{{ formFacture.description_article }}";
si vous avez une aidé comment j peux l’appelé
26/01/2017, 16h45
Toufik83

d'après ce que j'ai compris, "{{ formFacture.description_article }}" est la description de l'article, elle est stocké dans une base de donnée non?
eh ben dans ce cas, il faut utiliser le "data" que tu as mis dans la fonction ajax, si tu fais une console.log(data), qu'est ce que tu vois dans la console?

{{ formFacture.description_article }} la description de l'article, elle est stocké dans une base de donnée,
formFacture c'est un objetForm de type formulaire qui j'ai creer dans une view et description_article est une choicefield (comboboxe) déclaré dans le form. au niveau du html ça fonctionne voici une exemple qui j'ai utilisé
Code:

1 2 3 4 5 6 7 <tr> <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> </tr>
mais au niveau javascript ne fonctionne pas, c'est ma première fois d'utiliser javascript dans projet django ,moi je veux quand je click sur une ligne d'afficher son contenue dans une choicefield (combobox) pour le modifier

Voir 40 message(s) de cette discussion en une page