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 :

Propriété Combobox JQuery


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2015
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Octobre 2015
    Messages : 9
    Points : 13
    Points
    13
    Par défaut Propriété Combobox JQuery
    Bonjour,
    Je me permet de poster ce message car je suis actuellement bloqué sur un problème avec la combobox de JQuery dont j'ai besoin pour une application. Pour résumer j'ai plusieurs champs déroulants select/option que je transforme en combobox. Dans le constructeur de la combobox j'ai ajouté la propriété required aux champs input qui sont créés pour que l'utilisateur soit obligé de les remplir avant de valider, cependant j'ai besoin qu'un seul d'entre eux n'ai pas cette propriété mais vu mon mauvais niveau dans ce language, je n'y arrive pas !

    Voici mon code HTML / PHP :

    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
     
                            <label for="commune">Commune : </label>
    				<select name="commune" id="commune"/>
    					<option value=""></option>
    					<?php
                                            foreach($communeAll AS $result)
                                            {
                                                    $commune = new Commune($result);
                                                    echo '<option value="'.$commune->insee_commune.'">'.$commune->nom_commune.' - '.$commune->cp_commune.'</option>' ;
                                            }
                                            ?>
    				</select><br>
     
    			<label for="commune2">Commune 2: </label>
    				<select name="commune2" id="commune2">
    					<option value=""></option>
    					<?php
                                            foreach($communeAll AS $result)
                                            {
                                                    $commune = new Commune($result);
                                                    echo '<option value="'.$commune->insee_commune.'">'.$commune->nom_commune.' - '.$commune->cp_commune.'</option>' ;
                                            }
                                            ?>
    				</select><br>
                         <label for="idEtab">Établissement actuel : </label>
    				<select name="idEtab" id="idEtab"/>
    					<option value=""></option>
    					<?php
                                                    foreach($etabEl AS $result)
                                                    {
                                                            $etab = new Etab($result);
                                                            echo '<option value="'.$etab->rne_etab.'">'.$result->nom_type.' '.$etab->nom_etab.' - '.$etab->commune_etab.'</option>' ;
                                                    }
                                            ?>
    Mon JQuery :

    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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
     
      $( function() {
        $.widget( "custom.combobox", {
          _create: function() {
            this.wrapper = $( "<span>" )
              .addClass( "custom-combobox" )
              .insertAfter( this.element );
            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
          },
     
          _createAutocomplete: function() {
            var selected = this.element.children( ":selected" ),
              value = selected.val() ? selected.text() : "";
     
            this.input = $( "<input>" )
              .appendTo( this.wrapper )
              .val( value )
              .attr( "title", "" )
              .addClass( "custom-combobox-input" )
          	  .prop('required',true) /* On rajoute l'obligation de remplir le champ*/
              .autocomplete({
                delay: 0,
                minLength: 0,
                source: $.proxy( this, "_source" )
              })
              .tooltip({
                classes: {
                  "ui-tooltip": "ui-state-highlight"
                }
              });
     
            this._on( this.input, {
              autocompleteselect: function( event, ui ) {
                ui.item.option.selected = true;
                this._trigger( "select", event, {
                  item: ui.item.option
                });
              },
     
              autocompletechange: "_removeIfInvalid"
            });
          },
     
          _createShowAllButton: function() {
            var input = this.input,
              wasOpen = false;
     
            $( "<a>" )
              .attr( "tabIndex", -1 )
              .attr( "title", "Tout montrer" )
              .tooltip()
              .appendTo( this.wrapper )
              .button({
                icons: {
                  primary: "ui-icon-triangle-1-s"
                },
                text: false
              })
              .removeClass( "ui-corner-all" )
              .addClass( "custom-combobox-toggle ui-corner-all" )
              .on( "mousedown", function() {
                wasOpen = input.autocomplete( "widget" ).is( ":visible" );
              })
              .on( "click", function() {
                input.trigger( "focus" );
     
                // Close if already visible
                if ( wasOpen ) {
                  return;
                }
     
                // Pass empty string as value to search for, displaying all results
                input.autocomplete( "search", "" );
              });
          },
     
          _source: function( request, response ) {
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
            response( this.element.children( "option" ).map(function() {
              var text = $( this ).text();
              if ( this.value && ( !request.term || matcher.test(text) ) )
                return {
                  label: text,
                  value: text,
                  option: this
                };
            }) );
          },
     
          _removeIfInvalid: function( event, ui ) {
     
            // Selected an item, nothing to do
            if ( ui.item ) {
              return;
            }
     
            // Search for a match (case-insensitive)
            var value = this.input.val(),
              valueLowerCase = value.toLowerCase(),
              valid = false;
            this.element.children( "option" ).each(function() {
              if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                this.selected = valid = true;
                return false;
              }
            });
     
            // Found a match, nothing to do
            if ( valid ) {
              return;
            }
     
            // Remove invalid value
            this.input
              .val( "" )
              .attr( "title", value + " n'existe pas" )
              .tooltip( "open" );
            this.element.val( "" );
            this._delay(function() {
              this.input.tooltip( "close" ).attr( "title", "" );
            }, 2500 );
            this.input.autocomplete( "instance" ).term = "";
          },
     
          _destroy: function() {
            this.wrapper.remove();
            this.element.show();
          }
        });
     
        $( "#commune" ).combobox();
        $( "#commune2" ).combobox();
        $( "#idEtab" ).combobox();
    En gros je voudrais que l'input de commune 2 ne soit pas required, mais impossible de le "sélectionner" une fois créé pour faire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     $('#commune2 input').combobox().prop('required', false)
    Qui ne marche pas...!
    J'espère avoir été a peu près clair, j'ai un très faible niveau en JQuery et JavaScript, mon appli fonctionne essentiellement en PHP, j'en ai juste besoin pour apporter un peu de confort a l'utilisateur.
    Merci d'avance !

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    bonjour,
    pour qu'une zone de texte soit NON required, on fait :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#txt_required").prop("required",false);
    mais ce code doit être dans un $(document).ready() ou dans une $(function(){}). finalement tu dois avoir un code qui ressemble a celui là :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    $(function(){
       $("#txt_required").prop("required",false);
    });
    /* ou bien 
    $(document).ready(function(){
      $("#txt_required").prop("required",false);
    });
    */

  3. #3
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2015
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Octobre 2015
    Messages : 9
    Points : 13
    Points
    13
    Par défaut
    Tout d'abord, merci de ta réponse !
    J'ai essayé ce que tu m'as dit et je comprend très bien, sauf que la combobox créé des champs que je "contrôle" pas.
    C'est le champ input que je veux faire passer à false, et non pas le select, du coup je ne sais pas comment le "pointer",voila ce qui ressort dans le navigateur :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <select id="commune2" name="commune2" style="display: none;">
        <span class="custom-combobox">
            <input class="custom-combobox-input ui-autocomplete-input" title="" required="" autocomplete="off">
            <a class="ui-button ui-widget ui-state-default ui-button-icon-only custom-combobox-toggle ui-corner-all" tabindex="-1" title="Tout montrer" role="button">
                <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span>
                <span class="ui-button-text"></span>
    du coup si je fais
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    $('#commune2').prop("required",false);
    il applique ça au select et non à l'input
    C'est donc le input qui me pose problème ! je me disais que peut-être je pourrais faire hériter le nom de la classe du "créateur" de la combobox, et ensuite appliquer une condition avec la fonction hasClass(), mais je n'y arrive pas, je crois que cela dépasse de loin mes compétences !
    Merci encore

    PS: C'est un copier-coller de firebug, la balise "select" en haut du code est bien fermée et remplie de balises "option", je ne l'ai pas déroulée car est longue et cachée par l'application de l'autocomplete.

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    dans un <select> on met des <option> et pas d'autres éléments html.
    si tu change ton select en div et tu met :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    $("#commune2 .custom-combobox-input").prop("required", false);// required=false
      console.log($("#commune2 .custom-combobox-input").prop("required"));// affiche false
    ça devrai fonctionner.

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    197
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 197
    Points : 300
    Points
    300
    Par défaut
    Bonjour,

    Quand on regarde l'exemple de combobox de jquery ui, on s'aperçoit que l'input n'est pas un objet enfant du select mais se trouve en fait dans une span elle-même parente du select.
    Donc pour y accéder, une possibilité serait de remonter au parent du select et de trouver l'input dans la hiérarchie de ce parent.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    var input = $('#commune2').parent().find('input');
    Il est aussi possible de cibler directement la span soeur du select (on sait qu'elle possède la classe "custom-combobox" et qu'elle se trouve directement après le select) et piocher l'élément input figurant à l'intérieur :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    var input = $('#commune2 + .custom-combobox input');

  6. #6
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2015
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Octobre 2015
    Messages : 9
    Points : 13
    Points
    13
    Par défaut
    Super !!! c'est exactement ce qu'il me fallait, en plus j'ai compris d’où venais mon erreur et appris comment faire donc merci énormément !
    Je passe le sujet en résolu et je remercie encore toute la communauté qui m'a rendu un grand service !

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

Discussions similaires

  1. [XL-2013] Alternativa à utilisation de TAG ds fenêtre propriété Combobox et listbox
    Par joel50 dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 07/07/2015, 19h20
  2. [XL-2010] Propriétés combobox désactivés
    Par cag's dans le forum Excel
    Réponses: 1
    Dernier message: 24/06/2015, 11h43
  3. [Débutant] Propriété combobox au premier plan
    Par GuillaumeNcy dans le forum VB.NET
    Réponses: 2
    Dernier message: 20/03/2014, 17h12
  4. [XL-2010] Propriété Combobox: Empécher modification
    Par bastou93 dans le forum Macros et VBA Excel
    Réponses: 7
    Dernier message: 18/07/2011, 14h25
  5. [VBA-Excel] Propriété combobox
    Par marsupilami34 dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 09/01/2007, 17h14

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