Forum : google place autocomplet non visible avec dialog

Bonjour,

j'utilise googleplace autocomplet pour que mon utilisateur puise entrer son adresse
par contre avec jquery dialog cette fonction reste caché derrière la fenetre dialog

j'ai pourtant ajouté ceci dans mon css mais ça fonctionne pas:

.pac-container {
    z-index: 9999 !important;
}

voici mon script:

<div id="config_compte" title="Mon compte" style="display: none;"></div>

<script>

    $( "#config_compte" ).dialog({
        width: 350,
        resizable: false,
        closeText: 'Fermer',
        modal: true,
        autoOpen: false,
        show: {
            effect: "puff",
            duration: 500
        },
        hide: {
            effect: "puff",
            duration: 500
        }
    });

    $("body").on('click', '#ref_config_compte', function(event) {
        event.preventDefault();
        $.ajax({
            url: 'compte/config.php',
            success: function (reponse)
            {
                $('#config_compte').html(reponse);
                $('#config_compte').dialog("open");
            }
        });

    });

</script>

Lartak

Bonjour.
Dans le code HTML que tu nous montre, il n'y a aucun élément ayant la classe qui semblerait être lié avec le script pour Google, je suppose donc qu'il est chargé via Ajax.
Dans ce cas là ça voudrait dire qu'il n'est pas chargé au moment du DOM, par conséquent je ne pense pas que l'évenement soit bien pris en compte par le script de Google.
Tu devrais donc te pencher sur ce point là.

AaFrederic Husson

Auteur

j'ai trouvé ceci mais je vois pas comment utiliser ce code:

I found the answer; and posting it here just in case anyone else faces
the same issue in future...

Here's all you need to do:
Attach a change/keytype listener on your input field and set the z-
index then. Make sure not to call it unnecessarily though...
something like this::

 var pacContainerInitialized = false; 
                        $('#inputField').keypress(function() { 
                                if (!pacContainerInitialized) { 
                                        $('.pac-container').css('z-index', '9999'); 
                                        pacContainerInitialized = true; 
                                } 
                        });

It looks like (after debugging using firebug...) that google creates
the auto complete drop down on the fly using the class "pac-
container". It uses a default z-index of 1000, which is less than what
jquery modal dialog uses and hence the problem!

Some posts say that by simply adding a style in your html will fix the
problem but that didn't work for me! Probably because it's getting
over written by google's code when the pac-container combo box is
actually created; am not sure... but the above method worked for me...

Lartak

Quel est le rapport avec ton système ?
Dans le code que tu montres là, c'est un évènement qui est lié à un input, alors que le tien est en rapport à un click sur un élément.
La seule différence entre ce que tu avait avant et ce code, c'est qu'au lieu qu'une propriété soit définie dans un code CSS et donc déja présent au moment du chargement du DOM, il est appliqué sur l'élément via javascript suite à un évènement effectué par l'utilisateur.
Je ne vois pas en quoi ça va régler ton problème actuel.

AaFrederic Husson

Auteur

 <tr>
            <td align="center"><span>Votre adresse*</span><br>
                <input size="25" type="text" id="user_input_autocomplete_address" name="user_input_autocomplete_address" placeholder="Entrez votre ville">
                <input type="hidden" id="locality" name="locality">
                <input type="hidden" id="administrative_area_level_1" name="administrative_area_level_1">
                <input type="hidden" id="administrative_area_level_2" name="administrative_area_level_2">
                <input type="hidden" id="postal_code" name="postal_code">
                <input type="hidden" id="country" name="country">
            </td>
        </tr>

c'est le même probleme que j'ai il n'y a aucun probleme lors de mon clic, c'est quand je comment à écrire une adresse le div google n'est pas visible alors qu'il devrais se placer en dessous de l'input afin de sélectionner la bonne adresse

Lartak

Si le code que tu montres ci-dessus est chargé en Ajax, le problème reste le même.
Et je ne vois toujours pas l'élément qui a la classe pac-container et la tu nous montre un code qui ne contient pas l'id inputField présente dans le code javascript de ton précédent post.
Si tu ne veux pas de notre aide, continues comme ça en ne nous donnant que des codes partiels et sans apporter d'informations complémentaires suite à nos interventions.

AaFrederic Husson

Auteur

l'élément qui a la classe pac-container n'est pas dans mon code il provient de google place

Lartak

Il serait quand même pertinent que tu montres le code javascript correspondant à l'API, car tu as dis dans un de tes posts précédent que tu avais trouvé un code javascript, mais que tu ne sais pas comment l'utiliser, on ne peut en conclure que tu ne comprends pas à quoi il sert et donc que tu ne le comprends pas.
Il n'est donc pas impossible que tu aies fait des erreurs dans la réalisation du script correspondant à l'API.

google place autocomplet non visible avec dialog

7 réponses