Discussion :

[BRUNO71]

Bonjour à vous,

Voici un extrait de code qui fonctionne très bien depuis (MVC c#)
Je me sers d'un exemple en me servant de la base de données Northwind.

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
33
34
35
36
37
38
39
40
41
42
43
 <script src="~/Scripts/jquery-3.6.0.min.js"></script>
 
    <script type="text/javascript">
 
        $(document).ready(function () {
 
            $("#CategoryType").change(function () {
                var selectedItem = $(this).val();
                $("#tblProducts tbody tr").remove();
                    $.ajax({
                            type: 'get',
                            url: '@Url.Action("RetourListe")',
                        dataType: 'json',
                            data: { id: selectedItem },
                        success: function (data) {
                            var items = '';
                            $.each(data, function (i, item) {
 
                                var rows = "<tr>"
                                + "<td>" + item.ProductID + "</td>"
                                    + "<td>" + item.ProductName + "</td>"
                                + "<td>" + item.QuantityPerUnit + "</td>"
                                + "<td>" + item.UnitPrice + "</td>"
                                + "<td>" + item.UnitsInStock + "</td>"
                                + "<td>" + item.ReorderLevel + "</td>"
                                + "</tr>";
                                $('#tblProducts tbody').append(rows);
 
                             });
 
                        },
                        error: function (ex) {
                            var r = jQuery.parseJSON(response.responseText);
                            alert("Message: " + r.Message);
                            alert("StackTrace: " + r.StackTrace);
                            alert("ExceptionType: " + r.ExceptionType);
                        }
                    });
               return false;
            })
        });
 
    </script>

J'obtiens un tableau du plus belle effet, mais cependant, lorsque je vérifie le code source de la page j'ai uniquement ceci :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
   <table id="tblProducts" class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">ProductID</th>
                    <th scope="col">ProductName</th>
                    <th scope="col">QuantityPerUnit</th>
                    <th scope="col">UnitPrice</th>
                    <th scope="col">UnitsInStock</th>
                    <th scope="col">ReorderLevel</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

Il n'y à rien dans tbody !!!
Est-ce normal, y a t'il moyen de l'afficher en "dur" pour voir apparaître le résultat dans le code source ?

Merci pour votre réponse..

[mathieu]

dans l'affichage du code source, vous verrez seulement la réponse de la requête http.
pour voir les balises html après modification par le code javascript, vous pouvez utiliser la console de développement de votre navigateur.

[BRUNO71]

Bonjour,

Merci Mathieu pour ta réponse..

Je n'en vois pas plus, mais je travail en localhost depuis VisualStudio !!! Peut-être que c'est normal.

J'ai posé cette question car que je travail sur une carte cliquable avec (maphilight) et selon cette ligne de code :

Code :

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

   $('.map').maphilight({ alwaysOn: true });

, je devrais voir directement les couleurs apparaître !
Il y a logiquement plusieurs lignes, mais je n'ai pas de résultat....donc je doute de mon code !!
Merci

[NoSmoking]

Bonjour,

Est-ce normal, y a t'il moyen de l'afficher en "dur" pour voir apparaître le résultat dans le code source ?

il te faut utiliser les outils de développement, clic droit sur la <table> et choisir Inspecter, tu verras réellement le DOM que le navigateur affiche.

[BRUNO71]

Bonjour,
Merci noSmoking.....
Donc mon code map et area fonctionne bien....car effectivement je vois le résultat.

maphilight ne fonctionne pas, mais bon.....je travail dessus ça devrait aller..
Sinon je poserais une autre question...
Merci à vous

[BRUNO71]

Bonjour,
j'ai besoin d'explication pour 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
15
16
17
18
19
20
  $("#MapWorld area").remove();
                $.ajax({
                    type: 'get',
                    url: '@Url.Action("AffichageShape")',
                    async: false,
                    dataType: "json",
                    data: { Mois: SelectMois, Temp: SelectTemp },
                    success: function (data) {
                        var items = '';
                        $.each(data, function (i, item) {
                            // row 95
                            $("#MapWorld").append('<area>' +  'shape="' + item.ShapeDest + '"' +' coords="' + item.CoordsDest + '"' + ' href="#"' + ' alt="' + item.Destination + '"' + ' title="' + item.Destination + '"' + '/>');
 
                        });
 
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(chr.responseText);
                    }
                });

L'objectif étant de recevoir plusieurs points AREA dans une balise MAP....(j'ai raccourcis les coordonnées pour l'explication)

Après vérification dans la console, j'obtiens le résultat sous forme de texte comme ceci :

<area>
"shape="poly" coords="5088,3415,5108 blabla etc" href="#" alt="ici texte" title="ici texte">"
<area>
"shape="poly" coords="5088,3415,5108 blabla etc" href="#" alt="ici texte" title="ici texte">"

C'est à dire que la balise <AREA> est seule et que :
du mot (shape) à la balise de fin (>)....c'est entre deux quotes ... "" !

J'ai également écrit comme ceci ('<area> shape="' + etc....Mais toujours pareil.

J'ai modifié le DataType ( text, html ) mais rien ne change.

Avez-vous une explication SVP ?

Merci

[ASCIIDEFOND]

Bonsoir,

Et comme ça ?

Code JQuery :

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

1
2
 
$('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}"/>`);

[NoSmoking]

Bonjour,

Avez-vous une explication SVP ?

Tu fermes ta balise <area> trop tôt !

Code :

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

1
2
$("#MapWorld").append('<area>' +  'shape="'
//       fin balise en trop ↑ ici

regarde de près le code fourni par ASCIIDEFOND.

[BRUNO71]

Bonjour,
merci à vous deux.
Super ligne codée..., merci ASCIIDEFOND.
Comment ai-je pu fermer cette balise....area ...

[NoSmoking]

Super ligne codée.

pendant que l'on y est, une façon de faire, peu usitée, mais élégante et lisible, on voit tout de suite ce que l'on fait :

Code :

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

1
2
3
4
5
6
7
8
$("<area>", {                  // ! il faut mettre le balisage complet
    "shape": item.ShapeDest,
    "coords": item.CoordsDest,
    "href": "#",
    "alt": item.Destination,
    "title": item.Destination
  })
  .appendTo("#MapWorld");

Voir la documentation : jQuery( html, attributes )