Incompatibilità JQueryValidationEngine e JqueryDataPicker

di il
6 risposte

Incompatibilità JQueryValidationEngine e JqueryDataPicker

Ciao ragazzi, ho inserito nella mia pagina il seguente codice:
<script type="text/javascript">
            $(function() {
                $(".data:input").datepicker({
                        numberOfMonths : [3,4]
                });
            });                        
          </script>
            
          <script type="text/javascript">
            $(function() {
                $('#slider_example_1').timepicker({
                hourGrid: 4,
                minuteGrid: 10
                });
            });                        
          </script>
            
            
            
          <script>
              jQuery(document).ready(function(){
                  // binds form submission and fields to the validation engine
                  jQuery("#f_form_aula").validationEngine();
              });	
              
              $(document).ready(function(){                        
                    $('#tabella tr').mouseover(function(){
                        $(this).css('background-color','#e4f8ff');
                    });
                    $('#tabella tr').mouseout(function(){
                        $(this).css('background-color','white');                            
                    });
                });
          </script>
Che uso nel seguente modo:
<div style="width:975px; float:left; margin-left:35px;">
    <div style="width:100%;">
        <div><h2>AULE » INSERIMENTO NUOVA AULA</h2></div>
        <form name="f_form_aula" id="f_form_aula" method="post" action="transict_inserimento_nuova_aula.php">
            <div>
                <table border="0" width="100%"> <!--background-color:#0099cc;-->                    
                    <?php
                        $query = "SELECT * FROM pls_sedi";
                        $result = mysql_query($query) or die('Error, query failed');                        
                    ?>
                    <tr>
                        <td style="padding:5px;">Sede*</td>
                        <td style="padding:5px;">
                            <select class="validate[required]" style="width:100%;" name="sede_aula">  
                                <option value="">Scegli la sede</option>
                                <?php while($row = mysql_fetch_array($result)){ ?>
                                    <option value="<?=$row['ID'];?>"><?php echo $row['citta']." » Numero Aule: ".$row['numero_aule']; ?></option>
                                <?php } ?>
                            </select>
                        </td>                        
                    </tr>
                    <?php
                        $query = "SELECT * FROM pls_corsi";
                        $result = mysql_query($query) or die('Error, query failed');                        
                    ?>
                    <tr>
                        <td style="padding:5px;">Corso*</td>
                        <td style="padding:5px;">
                            <select class="validate[required]" style="width:100%;" name="corso_aula">  
                                <option value="">Scegli il corso</option>
                                <?php while($row = mysql_fetch_array($result)){ ?>
                                    <option value="<?=$row['ID'];?>"><?php echo $row['nome']." » Durata: ".$row['durata']; ?></option>
                                <?php } ?>
                            </select>
                        </td>                        
                    </tr>
                    <?php
                        $query = "SELECT * FROM pls_docenti WHERE status = 'Disponibile'";
                        $result = mysql_query($query) or die('Error, query failed');                        
                    ?>
                    <tr>
                        <td style="padding:5px;">Docente*</td>
                        <td style="padding:5px;">
                            <select class="validate[required]" style="width:100%;" name="docente_aula">  
                                <option value="">Scegli il docenti</option>
                                <?php while($row = mysql_fetch_array($result)){ ?>
                                    <option value="<?=$row['ID'];?>"><?php echo $row['nome']." ".$row['cognome']; ?></option>
                                <?php } ?>
                            </select>
                        </td>                        
                    </tr>
                    
                    
                    
                    <!--CAMPO TESTUALE NUMERICO SALVANDOLO IN DB -->
                    <tr>
                        <td style="padding:5px;">Numero di persone ammesse all'aula*</td>
                        <td style="padding:5px;"><input class="validate[required,custom[onlyNumber]]" type="text" name="numpersone_aula" style="width:99%; height:20px;" /></td>                                                        
                    </tr>                                        

                    <tr>
                        <td style="padding:5px;">Allievi*</td>
                        <td style="padding:5px;">

                            <?php
                                $query = "SELECT * FROM pls_azienda";
                                $result = mysql_query($query) or die('Error, query failed');
                                while($row = mysql_fetch_array($result)){
                                    print("<span style=\"font-weight:bold;\">".$row['nome']."</span><br/>");
                                        $query2 = "SELECT * FROM pls_allievi WHERE id_azienda = '".$row['ID']."'";
                                        $result2 = mysql_query($query2) or die('Error, query failed');
                                        while($row2 = mysql_fetch_array($result2)){
                                            ?><input type="checkbox" name="allievo" value="<?php print("".$row2['nome']." ".$row2['cognome'].""); ?>" /> <?php print("".$row2['nome']." ".$row2['cognome'].""); ?><br/> <?php
                                        }
                                }
                            ?>                            
                        </td>                        
                    </tr>                                                                                                                         
                    
                    <tr>
                        <td style="padding:5px;">Data*</td>
                        <td style="padding:5px;"><input id="datepicker" class="data" type="text" name="data_aula" style="width:99%; height:20px;" /></td>                        
                    </tr>
                    <tr>
                        <td style="padding:5px;">Ora*</td>
                        <td style="padding:5px;"><input type="text" id="slider_example_1" name="ora_aula" style="width:99%; height:20px;" /></td>                        
                    </tr>

                    <tr>
                        <td style="padding:5px;">Note</td>
                        <td style="padding:5px;"><textarea name="note_aula" style="width:99%; height:30px;"></textarea></td>
                    </tr>                                       
                    <tr>
                        <td colspan="2"><center><input type="submit" name="submit" value="Inserisci nel Database" /></center></td>
                    </tr>
                </table>
            </div>
        </form>
    </div>                 
</div>
Mi si presenta il DataPicker ma non funziona più il validationEngine negli altri campi!!! Help me

6 Risposte

  • Re: Incompatibilità JQueryValidationEngine e JqueryDataPicker

    Come prima cosa ho visto che hai attivato 2 eventHandler solo per creare degli effetti di evidenziazione con il mouseOver e mouseOut. Puoi risolvere tranquillamente questa cosa coni css evitando di appesantire, e i fogli di stile sono molto migliori degli script quando devono fare lo stesso tipo di lavor.
    
    #tabella tr:hover {
    background-color: #e4f8ff;
    }
    
    http://www.w3schools.com/css/css_pseudo_classes.as
    http://www.w3schools.com/css/css_pseudo_elements.as
    Con questi nuovi selettori css si possono creare siti molto dinamici anche senza script.
  • Re: Incompatibilità JQueryValidationEngine e JqueryDataPicker

    Il problema da te citato potrebbe essere causato dal fatto che jQuery per il biding degli eventi asegna la funzione direttamente all'attributo corrispondente all'erento e quindi il tuo secondo ready soprascrive il primo, e non usa il addEventListener come sarebbe piu corretto fare per una migliore gestione degli eventi. Prova a spostare il contenuto della seconda istruzione di ready all'interno del primo, o altrimenti lo cancelli direttamente e lo riproduci nel css come ti suggerivo sopra.
    Fammi sapere se funziona.
  • Re: Incompatibilità JQueryValidationEngine e JqueryDataPicker

    Grazie a entrambi per la risposta! Allora ho cancellato il jquery per l'effetto che mi avete detto, l'ho messo nel CSS. Ora gli script che mi rimangono sono i seguenti ma non funziona ancora...:
    
    <script src="../js/jquery-1.6.min.js" type="text/javascript"></script>
              <script src="../js/languages/jquery.validationEngine-it.js" type="text/javascript" charset="utf-8"></script>
              <script src="../js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
              <script type="text/javascript" src="../js/jquery.js"></script>
              <script type="text/javascript" src="../js/datepicker.js"></script>
              <script type="text/javascript" src="../js/eye.js"></script>
              <script type="text/javascript" src="../js/utils.js"></script>
              <script type="text/javascript" src="../js/layout.js?ver=1.0.2"></script>
              
                <link rel="stylesheet" href="../css/jquery-ui-1.7.2.custom.css" type="text/css" />            
                <script type="text/javascript" src="../js/jquery-1.3.2.min.js" /></script>
                <script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js" ></script>
                <script type="text/javascript" src="../js/ui.datepicker-it.js" ></script>            
                
                                                                
                <link rel="stylesheet" media="all" type="text/css" href="../css/jquery-ui.css" />
                <link rel="stylesheet" media="all" type="text/css" href="../css/jquery-ui-timepicker-addon.css" />
                <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
                <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
                <script type="text/javascript" src="../js/jquery-ui-timepicker-addon.js"></script>
                <script type="text/javascript" src="../js/jquery-ui-sliderAccess.js"></script>
              
              <script type="text/javascript">
                $(function() {
                    $(".data:input").datepicker({
                            numberOfMonths : [3,4]
                    });
                });                        
              </script>
                
              <script type="text/javascript">
                $(function() {
                    $('#slider_example_1').timepicker({
                    hourGrid: 4,
                    minuteGrid: 10
                    });
                });                        
              </script>
                
                
                
              <script>
                  jQuery(document).ready(function(){
                      // binds form submission and fields to the validation engine
                      jQuery("#f_form_aula").validationEngine();
                  });                            
              </script>
    
    Questo è il codice della pagina di inserimento:
    
    <div style="width:975px; float:left; margin-left:35px;">
        <div style="width:100%;">
            <div><h2>AULE » INSERIMENTO NUOVA AULA</h2></div>
            <form name="f_form_aula" id="f_form_aula" method="post" action="transict_inserimento_nuova_aula.php">
                <div>
                    <table border="0" width="100%"> <!--background-color:#0099cc;-->                    
                        <?php
                            $query = "SELECT * FROM pls_sedi";
                            $result = mysql_query($query) or die('Error, query failed');                        
                        ?>
                        <tr>
                            <td style="padding:5px;">Sede*</td>
                            <td style="padding:5px;">
                                <select class="validate[required]" style="width:100%;" name="sede_aula">  
                                    <option value="">Scegli la sede</option>
                                    <?php while($row = mysql_fetch_array($result)){ ?>
                                        <option value="<?=$row['ID'];?>"><?php echo $row['citta']." » Numero Aule: ".$row['numero_aule']; ?></option>
                                    <?php } ?>
                                </select>
                            </td>                        
                        </tr>
                        <?php
                            $query = "SELECT * FROM pls_corsi";
                            $result = mysql_query($query) or die('Error, query failed');                        
                        ?>
                        <tr>
                            <td style="padding:5px;">Corso*</td>
                            <td style="padding:5px;">
                                <select class="validate[required]" style="width:100%;" name="corso_aula">  
                                    <option value="">Scegli il corso</option>
                                    <?php while($row = mysql_fetch_array($result)){ ?>
                                        <option value="<?=$row['ID'];?>"><?php echo $row['nome']." » Durata: ".$row['durata']; ?></option>
                                    <?php } ?>
                                </select>
                            </td>                        
                        </tr>
                        <?php
                            $query = "SELECT * FROM pls_docenti WHERE status = 'Disponibile'";
                            $result = mysql_query($query) or die('Error, query failed');                        
                        ?>
                        <tr>
                            <td style="padding:5px;">Docente*</td>
                            <td style="padding:5px;">
                                <select class="validate[required]" style="width:100%;" name="docente_aula">  
                                    <option value="">Scegli il docenti</option>
                                    <?php while($row = mysql_fetch_array($result)){ ?>
                                        <option value="<?=$row['ID'];?>"><?php echo $row['nome']." ".$row['cognome']; ?></option>
                                    <?php } ?>
                                </select>
                            </td>                        
                        </tr>
                        
                        
                        
                        <!--CAMPO TESTUALE NUMERICO SALVANDOLO IN DB -->
                        <tr>
                            <td style="padding:5px;">Numero di persone ammesse all'aula*</td>
                            <td style="padding:5px;"><input class="validate[required,custom[onlyNumber]]" type="text" name="numpersone_aula" style="width:99%; height:20px;" /></td>                                                        
                        </tr>                                        
    
                        <tr>
                            <td style="padding:5px;">Allievi*</td>
                            <td style="padding:5px;">
    
                                <?php
                                    $query = "SELECT * FROM pls_azienda";
                                    $result = mysql_query($query) or die('Error, query failed');
                                    while($row = mysql_fetch_array($result)){
                                        print("<span style=\"font-weight:bold;\">".$row['nome']."</span><br/>");
                                            $query2 = "SELECT * FROM pls_allievi WHERE id_azienda = '".$row['ID']."'";
                                            $result2 = mysql_query($query2) or die('Error, query failed');
                                            while($row2 = mysql_fetch_array($result2)){
                                                ?><input type="checkbox" name="allievo" value="<?php print("".$row2['nome']." ".$row2['cognome'].""); ?>" /> <?php print("".$row2['nome']." ".$row2['cognome'].""); ?><br/> <?php
                                            }
                                    }
                                ?>                            
                            </td>                        
                        </tr>                                                                                                                         
                        
                        <tr>
                            <td style="padding:5px;">Data*</td>
                            <td style="padding:5px;"><input id="datepicker" class="data" type="text" name="data_aula" style="width:99%; height:20px;" /></td>                        
                        </tr>
                        <tr>
                            <td style="padding:5px;">Ora*</td>
                            <td style="padding:5px;"><input type="text" id="slider_example_1" name="ora_aula" style="width:99%; height:20px;" /></td>                        
                        </tr>
    
                        <tr>
                            <td style="padding:5px;">Note</td>
                            <td style="padding:5px;"><textarea name="note_aula" style="width:99%; height:30px;"></textarea></td>
                        </tr>                                       
                        <tr>
                            <td colspan="2"><center><input type="submit" name="submit" value="Inserisci nel Database" /></center></td>
                        </tr>
                    </table>
                </div>
            </form>
        </div>                 
    </div>
    
  • Re: Incompatibilità JQueryValidationEngine e JqueryDataPicker

    Ho provato a guardare le referenze sul validator ma non mi sembra di aver trovato nulla di strano, le regole mi sembrano rispettate, l'unica che ti chiedo e' se nella gerarchia delle cartelle di js al suo interno tu hai una cartella languages con al suo interno il pacchetto lingua da te richiesto, dalla demo che ho visionato l'altra differenza e' il pacchetto di jquery che il tuo non e' proprio il piu aggiornato, quello del mio esempio e' la v172, ma non dovrebbe cambiare molto dal tuo anche perche nel tutorial usano v144. se sai usare un debuger puoi provare, o se puoi mandarmi il link della tua pagina, visto che usi php immagini che lo hai gia caricato in rete, se cosi non fosse e usi un server locale, apri la pagina con chrome e clicca control+shift+j che appare la finestra di developer tools con la console che ti dice tutti gli eventuali errori comparsi per problemi di variabili, mancanza. Se non riesci a risolvere il problema manda il report degli errori.
  • Re: Incompatibilità JQueryValidationEngine e JqueryDataPicker

    Ti lascio anche il tutoria che ho visto e la sua pagina demo, e poi non e' molto elegante l'uso delle tabelle per l'impaginazione, prova a usare come quello della pagina demo come template che usa i fieldset e legend.
    http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
    http://www.position-relative.net/creation/formValidator/demos/demoValidators.html
    http://www.w3schools.com/tags/tag_fieldset.as
  • Re: Incompatibilità JQueryValidationEngine e JqueryDataPicker

    Grazie ragazzi, il cliente è voluto andare su un altra strada... Quindi niente datapicker... Grazie a tutti ugualmente!
Devi accedere o registrarti per scrivere nel forum
6 risposte