Modification d'un tr en recupérant son id

**123nada1** · 25/01/2017, 16h57

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**123nada1** · 25/01/2017, 19h06

{{ 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Toufik83** · 25/01/2017, 19h52

essaie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**123nada1** · 25/01/2017, 20h04

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

**Toufik83** · 25/01/2017, 22h34

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.

**SpaceFrog** · 26/01/2017, 10h09

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var $this = $(this);

=>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

this.innerhtml

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

**123nada1** · 26/01/2017, 10h36

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

erreur unterminated string literal

**SpaceFrog** · 26/01/2017, 11h27

tu n'aurais pas des " dans ta description par hasard ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
alert('{{ formFacture.description_article }}')

**123nada1** · 26/01/2017, 11h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$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

**SpaceFrog** · 26/01/2017, 12h07

Tu peux nous montrer le code html généré (source de la page en visualisation )

**SpaceFrog** · 26/01/2017, 12h30

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

**123nada1** · 26/01/2017, 12h33

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**123nada1** · 26/01/2017, 12h51

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

**SpaceFrog** · 26/01/2017, 14h43

Il doit retourner le html ...

**Toufik83** · 26/01/2017, 15h01

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é.

**123nada1** · 26/01/2017, 16h41

j'ai essayé ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Toufik83** · 26/01/2017, 17h37

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

var tr=$("#row")

positionne toi sur la page demandé, puis appuie sur CTRL+U, et montre nous le code html généré.

**123nada1** · 26/01/2017, 17h38

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é

**Toufik83** · 26/01/2017, 17h45

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?

**123nada1** · 26/01/2017, 17h57

{{ 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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Modification d'un tr en recupérant son id [AJAX]

jQuery

Discussions similaires

Partager

Partager