Author Topic: Question about "pqSelect"  (Read 12756 times)

windiver

  • Newbie
  • *
  • Posts: 3
    • View Profile
Question about "pqSelect"
« on: March 03, 2015, 06:30:26 pm »
Hello everyone,

Sorry, I did not post at the correct place...

I'm trying to use the new functionality  "pqSelect", but I fail.

I get something like the picture attached.
1. The list is by default opened - I would like it close as your example/demo (http://paramquery.com/select), open it only when we click on it.
2. There is a strange blue box (at the bottom of the list)
3. When I include this code in my form, the first click (in another input) gives the focus to this SELECT input... What I do not understand why ?

See below my simplified form :



<!doctype html> 
<html lang="fr">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>BioObs</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
      <link rel="stylesheet" type="text/css" href="<?php echo $cur_dir; ?>jquery/jquery-ui.css" />
      <link rel="stylesheet" type="text/css" href="<?php echo $cur_dir; ?>jquery/pqselect.dev.css" />

      <script type="text/javascript" src="<?php echo $cur_dir; ?>jquery/jquery.js"></script>
      <script type="text/javascript" src="<?php echo $cur_dir; ?>jquery/jquery-1.11.1.js"></script>
      <script type="text/javascript" src="<?php echo $cur_dir; ?>jquery/jquery-ui.js"></script>
      <script type="text/javascript" src="<?php echo $cur_dir; ?>jquery/jquery-ui.min.js"></script>
      <script type="text/javascript" src="<?php echo $cur_dir; ?>jquery/pqselect.dev.js"></script>
       
      <script type="text/javascript">
        $(function() {
          $("#id_condition").pqSelect({
              multiplePlaceholder: 'Cliquer ici pour voir la liste',
              deselect: true,
              selectallText: 'Tout sélectionner',   
              checkbox: true,
              search: false
          }).on("change", function(evt){
              var val = $(this).val();
              console.log('Sélectionné : ' + val);
          }).pqSelect( 'open' );
        });
      </script> 
  </head> 
 
  <body>
    <form action="accueil.php"  id="fvn" name="fvn"  method="POST"> 
      <section id="content" style="">
        <div class="wrap-content">
          <div id="box1" class="row box1" style="">
            <input class="label" value="Conditions :" disabled="no" >
            <select id="id_condition" class="saisie" style="display: inline-block;width:300px" multiple="multiple">
                   <option value="Normal"> Normal </option>
                   <option value="Faible houle"> Faible houle </option>
                   <option value="Forte houle"> Forte houle </option>
                   <option value="Vagues"> Vagues </option>
                   <option value="Courant faible"> Courant faible </option>
                   <option value="Courant fort"> Courant fort </option>
            </select>
          </div>
        <div/>
      </section>
    </form>
  </body>
</html>

What It wrong in my code ?
Is somebody have a simple example to compare/investigate between codes ?

Many thanks

Best regards
Laurent

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5198
    • View Profile
Re: Question about "pqSelect"
« Reply #1 on: March 03, 2015, 08:10:10 pm »
Please refer to this jsfiddle.

http://jsfiddle.net/dLvx6u63/

Quote
1. The list is by default opened - I would like it close as your example/demo (http://paramquery.com/select), open it only when we click on it.

Remove .pqSelect( 'open' )

Quote
2. There is a strange blue box (at the bottom of the list)

It goes away by applying this css
Code: [Select]
.pq-select-popup-cont {
    outline:none;
}

Quote
3. When I include this code in my form, the first click (in another input) gives the focus to this SELECT input... What I do not understand why ?
It's because there is only one enabled field in your form. If you enable Conditions: textbox then it can be focused.

windiver

  • Newbie
  • *
  • Posts: 3
    • View Profile
[solved] Question about "pqSelect"
« Reply #2 on: March 03, 2015, 10:05:36 pm »
 :)

So good !!!

Nice tools and great support !!!

Everything solved !!!

Many thanks
Best regards
Laurent