Discussion :

[BRUNO71]

Bonjour à tous,
Dernière ligne droite pour la réussite de mon code, enfin je crois !
Suite aux échanges de NoSmoking et ASCIIDEFOND, que je remercie, j'ai de nouveau besoin d'aide pour ce bout de 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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
           $("#MapWorld area").remove();
 
            $("#BtnRechCarte").click(function () {
 
                $("#MapWorld area").remove();
 
                if ($('#ChoixMois')[0].selectedIndex <= 0) { $("#MapWorld area").remove(); document.getElementById("ChoixMois").focus(); return false; }
                if ($('#ChoixTemp')[0].selectedIndex <= 0) { $("#MapWorld area").remove(); document.getElementById("ChoixTemp").focus(); return false; }
                var SelectMois = $('#ChoixMois option:selected').val();
                var SelectTemp = $('#ChoixTemp option:selected').val();
 
                $.ajax({
                    type: 'post',
                    url: '@Url.Action("AffichageShape")',
                    async: false,
                    dataType: "json",
                    data: { Mois: SelectMois, Temp: SelectTemp },
                    success: function (data) {
                        var items = '';
                        $("#MapWorld area").remove();
                        $.each(data, function (i, item) {
 
                            $('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}" >`);
                        });
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(chr.responseText);
                    }
                });
 
                $(function () {
                    $('.map').maphilight({
                        alwaysOn: true,
                        strokeWidth: 2,
                        fillColor: "ff0000",
                        fillOpacity: 0,
                        singleSelect: true
 
                    });
                });
 
 
            });

Dans la console j'ai bien le code area complet, MAIS !

Je souhaiterais afficher un pays à l'aide du code ci-dessous :

Code :

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

1
2
3
4
5
6
7
8
9
10
               $(function () {
                    $('.map').maphilight({
                        alwaysOn: true,
                        strokeWidth: 2,
                        fillColor: "ff0000",
                        fillOpacity: 0,
                        singleSelect: true
 
                    });
                });

Mais cela ne fonctionne pas.
Si je copie depuis la console le code Area ainsi obtenu et que je le colle directement dans la balise map comme ceci :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
            <div id="IdCarte">
                <div id="DivMapWorld">
                    <img id="IdWorld_Map" usemap="#MapWorld" width="10000" height="5280" title="Map monde en français" class="img-fluid map" src="~/Content/Images/World_Map.jpg" />
                    <map id="MapWorld" name="MapWorld">
 
                        <area shape="poly" coords="5088,3415,5108,3450,5099,3465,5101,3474,5133,3472,5137,3465,5161,3445,5166,3427,5182,3424,5191,3433,5212,3444,5239,3437,5248,3410,5264,3407,5273,3396,5279,3377,5283,3375,5297,3360,5317,3339,5335,3334,5346,3322,5379,3329,5388,3328,5402,3337,5409,3374,5415,3394,5416,3450,5417,3453,5416,3460,5418,3476,5425,3477,5438,3474,5430,3509,5422,3530,5394,3556,5376,3578,5359,3610,5344,3622,5331,3635,5312,3657,5264,3690,5253,3697,5233,3699,5222,3705,5205,3711,5171,3709,5167,3711,5151,3708,5134,3711,5126,3719,5104,3722,5072,3735,5065,3731,5055,3721,5044,3716,5036,3709,5032,3713,5030,3708,5034,3692,5021,3671,5022,3668,5028,3668,5035,3660,5032,3643,5012,3602,5002,3584,4996,3557,4984,3536,4993,3528,5000,3527,5017,3537,5029,3540,5045,3542,5056,3546,5080,3530,5088,3529,5088,3416" href="#" alt="Afrique du Sud" title="Afrique du Sud">
 
                    </map>
 
 
                </div>
            </div>

Et QUE je click sur le bouton à l'aide de 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
        $("#Btnok").click(function () {
 
                          $(function () {
                    $('.map').maphilight({
                        alwaysOn: true,
                        strokeWidth: 2,
                        fillColor: "ff0000",
                        fillOpacity: 0,
                        singleSelect: true
 
                    });
                });
 
            });

Et bien cela fonctionne, le pays en question est coloré en rouge....

Avec mes mots à moi :

Comment faire pour prendre en compte le code html (area) réalisé avec Ajax (en virtuel ! si je puis dire !) ?

Il est existant dans la console, mais il n'est pas pris en compte par ($('.map').maphilight) ?

Avez-vous une idée ?

Par avance merci...

[mathieu]

essayez de faire l'appel à "maphilight" après l'ajout des "textarea" dans le code.

[ASCIIDEFOND]

Bonjour à tous,

Pas trop d’idée… Ou peut-être alors en sélectionnant l’ID de la balise 'img' ?

Code JQuery :

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

1
2
3
4
5
6
7
8
 
$('#IdWorld_Map').maphilight({
    alwaysOn: true,
    strokeWidth: 2,
    fillColor: "ff0000",
    fillOpacity: 0,
    singleSelect: true
});

[NoSmoking]

Bonjour,
abus manifeste de $(function () { au mauvais endroit.

[SpaceFrog]

Sinon essaye de forcer le usemap APRES la modification ...

Code :

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

$("#IdWorld_Map").attr("usemap","#MapWorld")

[BRUNO71]

Bonjour à vous,

mathieu, (après l'ajout des "textarea" dans le code) ?? à quel niveau ?

ASCIIDEFOND, pas de différence avec L'ID de la balise img, merci.

NoSmoking, effectivement je viens de supprimer ($(function () {), mais pas de changement.

SpaceFrog, je viens d'essayer de forcer le usemap APRES la modification, mais pas de changement.

Merci à vous, c'est quand même étrange que le code ainsi créé n'est pas pris en compte... !

Ben là, je ne sais pas quoi faire...

[SpaceFrog]

Essaye de réinitialiser

Code :

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

$('.map').maphilight({

après l'attribution du nouveau map ?

[NoSmoking]

NoSmoking, effectivement je viens de supprimer ($(function () {), mais pas de changement.

il fallait pousser la réflexion ...

SpaceFrog, je viens d'essayer de forcer le usemap APRES la modification, mais pas de changement.

Aucune raison que cela ne fonctionne pas, ton appel n'est pas au bon endroit !

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
  $.ajax({
    type: 'post',
    url: '@Url.Action("AffichageShape")',
    async: false,
    dataType: "json",
    data: {
      Mois: SelectMois,
      Temp: SelectTemp
    },
    success: function(data) {
      var items = '';
      $("#MapWorld area").remove();
      $.each(data, function(i, item) {
        $('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}" >`);
      });
      //-- Mise à jour ici --
      $('.map').maphilight({
        alwaysOn: true,
        strokeWidth: 2,
        fillColor: "ff0000",
        fillOpacity: 0,
        singleSelect: true
      });
    },
    error: function(xhr, ajaxOptions, thrownError) {
      alert(chr.responseText);
    }
  });