IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Mise à jour MAP AREA après requête AJAX [AJAX]


Sujet :

jQuery

  1. #1
    Membre averti Avatar de BRUNO71
    Homme Profil pro
    Retraité
    Inscrit en
    Janvier 2007
    Messages
    501
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Janvier 2007
    Messages : 501
    Points : 317
    Points
    317
    Par défaut Mise à jour MAP AREA après requête AJAX
    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...

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 213
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 213
    Points : 15 499
    Points
    15 499
    Par défaut
    essayez de faire l'appel à "maphilight" après l'ajout des "textarea" dans le code.

  3. #3
    Membre averti Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    Novembre 2002
    Messages
    193
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : Novembre 2002
    Messages : 193
    Points : 356
    Points
    356
    Par défaut
    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
    });

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    abus manifeste de $(function () { au mauvais endroit.

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Sinon essaye de forcer le usemap APRES la modification ...


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#IdWorld_Map").attr("usemap","#MapWorld")
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre averti Avatar de BRUNO71
    Homme Profil pro
    Retraité
    Inscrit en
    Janvier 2007
    Messages
    501
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Janvier 2007
    Messages : 501
    Points : 317
    Points
    317
    Par défaut
    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...

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Essaye de réinitialiser après l'attribution du nouveau map ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  8. #8
    Membre averti Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    Novembre 2002
    Messages
    193
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : Novembre 2002
    Messages : 193
    Points : 356
    Points
    356
    Par défaut
    Bonjour à tous,

    Et avec 'alwaysOn: false' ?

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Citation Envoyé par BRUNO71
    NoSmoking, effectivement je viens de supprimer ($(function () {), mais pas de changement.
    il fallait pousser la réflexion ...


    Citation Envoyé par BRUNO71
    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);
        }
      });

  10. #10
    Membre averti Avatar de BRUNO71
    Homme Profil pro
    Retraité
    Inscrit en
    Janvier 2007
    Messages
    501
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Janvier 2007
    Messages : 501
    Points : 317
    Points
    317
    Par défaut
    Bonjour à tous,

    Merci de vous penchez sur mon projet, j’ai fait une petite vidéo d’écran de 47 secondes :

    J’ai un bouton essai pour afficher la balise area déjà en place dans le code map.
    L’exemple s’affiche, ensuite je click sur le bouton recherche dans la base de données (qui n’a pas beaucoup d’exemple pour l’instant) .
    Effacement de ce qui est éventuellement en place et affichage du résultat…mais in ne se passe rien.
    Je constate au passage que la balise area issu de la base de données est étrange, car le résultat n’est pas issu de la base de données…
    Au lieu de ceci : coords="5088,3415,5108,3450,5099,3465,5101,3474….etc
    J’ai ce résultat : coords="668,448,671,453,670,455,670,456… etc
    Je re click de nouveau et là effectivement j’ai le bon résultat, mais rien ne s’affiche.
    Et même avec le bouton essai…..
    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
     
       $.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
                                        })
                                        alert('ok');
                                    },
                                    error: function(xhr, ajaxOptions, thrownError) {
                                      alert(chr.responseText);
                                    }
                                  });
    Le message ok arrive bien...je ne sais plus quoi faire...par avance merci...

  11. #11
    Membre averti Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    Novembre 2002
    Messages
    193
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : Novembre 2002
    Messages : 193
    Points : 356
    Points
    356
    Par défaut
    Salut à tous,

    BRUNO71, à mon avis il faut rafraichir le ‘maphilight’. Essaie avec une fonction que tu appelleras une fois ton code créer.

    Code JQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    function AreaRefresh() {
      $('.map').maphilight({
        alwaysOn: true,
        strokeWidth: 1,
        fillColor: "ff0000",
        fillOpacity: 0,
        singleSelect: true
      });
    }

    Ou plus simplement
    Code JQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}" >`).trigger('alwaysOn.maphilight');

  12. #12
    Membre averti Avatar de BRUNO71
    Homme Profil pro
    Retraité
    Inscrit en
    Janvier 2007
    Messages
    501
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Janvier 2007
    Messages : 501
    Points : 317
    Points
    317
    Par défaut
    Bonjour ASCIIDEFOND,

    Toujours pareil, rien ne s'affiche.
    J'ai même essayé ceci :

    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
                    $FunctMaphilight = function () {
                    var data = {};
                    $('#IdWorld_Map').maphilight();
                    data.alwaysOn = true;
                    data.strokeWidth = '2';
                    data.fillColor = 'ff0000';
                    data.fillOpacity = '0';
                    $('area').data('maphilight', data).trigger('alwaysOn.maphilight');
                };
     
    // puis :
     
      $.ajax({
                                    type: 'get',
                                    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 --
     
                                      $FunctMaphilight();
     
                                    },
                                    error: function(xhr, ajaxOptions, thrownError) {
                                      alert(chr.responseText);
                                    }
                               });
    je ne sais plus quoi faire....Existe t'il autre chose et plus simple que Maphilight ?

    Merci

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Aucune raison pour que cela ne fonctionne pas sauf ... si ... l'erreur est ailleurs

    J'ai fait un exemple pour montrer que l'intégration de ce plugin est des plus simples :
    Fichier en ligne : Plugin maphilight by David Lynch

    Cela m'a permis de voir son fonctionnement et ses « failles », bien faibles somme toutes.

    Maintenant revenons à ...
    Au lieu de ceci : coords="5088,3415,5108,3450,5099,3465,5101,3474….etc
    J’ai ce résultat : coords="668,448,671,453,670,455,670,456… etc
    On constate que le rapport entre les valeurs est de 7.612, l'erreur semble plutôt venir du fait que tu redimensionnes l'image alors que les coordonnées des <area> sont pour l’échelle 1.

    Ton image de départ fait 10000 x 5280, vu dans ton code, et tu dois l'afficher réduite, quelque chose comme 1300 x 686.

    Malheureusement le plugin ne le prend pas en compte.

  14. #14
    Membre averti Avatar de BRUNO71
    Homme Profil pro
    Retraité
    Inscrit en
    Janvier 2007
    Messages
    501
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Janvier 2007
    Messages : 501
    Points : 317
    Points
    317
    Par défaut
    Bonjour,
    Bon !
    Merci à vous tous, je vais réfléchir à autre chose..
    Je mets de côté ce projet pour quelques jours...
    Cordialement,

  15. #15
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Merci à vous tous, je vais réfléchir à autre chose..
    pas nécessairement, bien qu'il y ait également le SVG qui semblerait correspondre à ton cas, mais tu ne nous dis pas si le soucis vient d'un problème de dimensionnement de l'image.

    La mise à l'échelle des <area> des <map> est un problème connu et « facilement » soluble.

    J'ai modifié l'exemple liée pour le prendre en compte, c'est perfectible mais devrait résoudre ton problème si celui-ci est bien lié au dimensionnent de ton image bien sûr !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 10
    Dernier message: 30/04/2021, 00h31
  2. [AJAX] Mise à jour CSS suite à la requête ajax
    Par Brebiou dans le forum jQuery
    Réponses: 2
    Dernier message: 07/11/2017, 17h03
  3. Réponses: 8
    Dernier message: 04/11/2008, 12h05
  4. Mise à jour de champs aprés importation excel
    Par MAMANHOU dans le forum IHM
    Réponses: 3
    Dernier message: 15/10/2008, 17h23
  5. Réponses: 2
    Dernier message: 02/05/2006, 23h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo