Div che appare appena due form sono compilati

  • Creatore Discussione Creatore Discussione paloppa
  • Data di inizio Data di inizio
paloppa

paloppa

Utente Attivo
26 Feb 2018
68
0
6
31
Salve , stavo cercando di progettare un div che appare soltanto quando due campi (i campi data_arrivo e data_partenza sono stati compilati)

Nello specifico i campi sono di tipo datapicker, e volevo fare un controllo sui due campi e se entrambi risultavano compilati , allora mi spuntava il div.

Ho provato cosi, ma non va
var data1= $( "#data_arrivo" ).val();
var data2= $( "#data_partenza").val();
if($( "#data_arrivo").not(":empty")){
$("#offerte").show();
}


<div id="offerte" style="display:none;">
<p>Queste sono le offerte</p></div>

Ho messo soltanto un campo per vedere se esce, ma niente da fare. Come posso risolvere?

Grazie
 
paloppa ha scritto:
i campi sono di tipo datapicker
Clicca per allargare...
Codice: 
var data1= $( "#data_arrivo" );
var data2= $( "#data_partenza");
var show_dic=[0,0];
data1.on('change',function(){
    show_div[0]=1;
    check_div(show_div);
});
data2.on('change',function(){
     show_div[1]=1;
     check_div(show_div);
});
function check_div(ar){
    if(ar[0] && $ar[1]){
    //visualizzo il div
   }
}
Bruttissima sta cosa ma funziona
 
Ultima modifica:
macus_adi ha scritto:
Codice: 
var data1= $( "#data_arrivo" );
var data2= $( "#data_partenza");
var show_dic=[0,0];
data1.on('change',function(){
    show_div[0]=1;
    check_div(show_div);
});
data2.on('change',function(){
     show_div[1]=1;
     check_div(show_div);
});
function check_div(ar){
    if(ar[0] && $ar[1]){
    //visualizzo il div
   }
}
Bruttissima sta cosa ma funziona
Clicca per allargare...
Brutta perchè?
Ricordati che è la prima volta che scrivo jQuery, quindi chiaramente non sarà perfetto quello che scrivo
 
macus_adi ha scritto:
Brutta quella che ti ho scritto io.!
Clicca per allargare...
Ma non funziona eheheh
Una volta selezionata la data di partenza, il calendario non si chiude, e non appare il div
Codice: 
 $(function() {
       var data1= $( "#data_arrivo" );
       var data2= $( "#data_partenza");
        var show_dic=[0,0];
       data1.on('change',function(){
        show_div[0]=1;
        check_div(show_div);
       });
       data2.on('change',function(){
        show_div[1]=1;
        check_div(show_div);
       });
       function check_div(ar){
        if(ar[0] && $ar[1]){
        $("#offerte").show();
   }
}
     
     
    $( "#data_arrivo" ).datepicker({
        minDate:0,
        dateFormat: "dd/mm/yy",
        onSelect: function (selectedDate) {
                    var depart = jQuery.datepicker.parseDate('dd/mm/yy', selectedDate);
                    depart.setDate(depart.getDate() + 1);
                    $( "#date_partenza" ).datepicker("option", "minDate", selectedDate );
        setTimeout(function(){
            $( "#data_partenza" ).datepicker('show');
        }, 16);    
                }
            });
     
    $( "#data_partenza" ).datepicker({    
        minDate:1,
        dateFormat: "dd/mm/yy",
       
    });
     
        $( "#data_odierna" ).datepicker({    
      changeMonth: true,  
      changeYear:true,
        dateFormat: "yy-mm-dd"
  });
     
     
   
         

     
     
   } );
 
paloppa ha scritto:
Ma non funziona eheheh
Clicca per allargare...
Si ma prima di scrivere ... leggi bene le funzioni che hai scritto.... come bindi i dati?
Come fa a funzionare in quel modo..... o fai tutto dentro a $(document).ready() o modifichi in modo tale da far funzionare il tutto....
$(function(){

//e tutto il codice va qui dentro no fuori
}
 
macus_adi ha scritto:
Si ma prima di scrivere ... leggi bene le funzioni che hai scritto.... come bindi i dati?
Come fa a funzionare in quel modo..... o fai tutto dentro a $(document).ready() o modifichi in modo tale da far funzionare il tutto....
$(function(){

//e tutto il codice va qui dentro no fuori
}
Clicca per allargare...
Mi risulta di aver messo tutto il codice dentro $(function(){
}

Sbaglio?
 
paloppa ha scritto:
$(function() { var data1= $( "#data_arrivo" ); var data2= $( "#data_partenza"); var show_dic=[0,0]; data1.on('change',function(){ show_div[0]=1; check_div(show_div); }); data2.on('change',function(){ show_div[1]=1; check_div(show_div); }); function check_div(ar){ if(ar[0] && $ar[1]){ $("#offerte").show(); } }
Clicca per allargare...
no
 
macus_adi ha scritto:
yea
Clicca per allargare...
PHP: 
$(function() {
       var data1= $( "#data_arrivo" );
       var data2= $( "#data_partenza");
        var show_dic=[0,0];
       data1.on('change',function(){
        show_div[0]=1;
        check_div(show_div);
       });
       data2.on('change',function(){
        show_div[1]=1;
        check_div(show_div);
       });
       function check_div(ar){
        if(ar[0] && $ar[1]){
        $("#offerte").show();
   }
}
      
      
    $( "#data_arrivo" ).datepicker({
        minDate:0,
        dateFormat: "dd/mm/yy",
        onSelect: function (selectedDate) {
                    var depart = jQuery.datepicker.parseDate('dd/mm/yy', selectedDate);
                    depart.setDate(depart.getDate() + 1);
                    $( "#date_partenza" ).datepicker("option", "minDate", selectedDate );
        setTimeout(function(){
            $( "#data_partenza" ).datepicker('show');
        }, 16);     
                }
            });
      
    $( "#data_partenza" ).datepicker({     
        minDate:1,
        dateFormat: "dd/mm/yy"
        });
      
        $( "#data_odierna" ).datepicker({     
      changeMonth: true,   
      changeYear:true,
        dateFormat: "yy-mm-dd"
  });
      
      
    
          

      
      
   } );

Giuro di non capire dove sbaglio
 
Ti ho trovato un bel bug.
Avevi scritto una c al posto di una v in show_div.

Adesso però cosi non lo continua a mostrare:(
 
@paloppa allora.... Inizia ad organizzare a funzioni... Quando carichi nel dom le richiami...

Occhio
paloppa ha scritto:
setTimeout(function(){
$( "#data_partenza" ).datepicker('show');
}, 16);
Clicca per allargare...
Stai aspettando 0.0016 secondi......


HTML: 
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <input type="text" name="data_arrivo" id="arrivo">
            </div>
            <div class="form-group">
                <input type="text" name="data_partenza" id="partenza">
            </div>
            <div class="hidden show_div">
                <div class="container_wrap">
                    <h3>
                        Funziona
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>
paloppa ha scritto:
Ti ho trovato un bel bug.
Clicca per allargare...
Guarda la "C" e la "V" come sono posizionate.....
Codice: 
$(function(){

    var self=this;
    self.data_arrivo=$('#arrivo');
    self.data_partenza=$('#partenza');
    self.data_arrivo.datepicker();
    self.data_partenza.datepicker();
    self.check_next=[0,0];
    self.data_arrivo.on('change',function(){
        self.check_next[0]=1;
        if(check_div(self.check_next))load_date_picker();
    });
    self.data_partenza.on('change',function(){
       self.check_next[1]=1;
        if(check_div(self.check_next))load_date_picker();
    });
});
function check_div(ar){
    if(ar[0] && ar[1])return true;
    else return false;
}

function load_date_picker(){
    $('.show_div').removeClass('hidden');
}

Funziona ! Testato! Questo puoi copiarlo e incollarlo....
 
Ultima modifica:
macus_adi ha scritto:
@paloppa allora.... Inizia ad organizzare a funzioni... Quando carichi nel dom le richiami...

Occhio

Stai aspettando 0.0016 secondi......


HTML: 
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <input type="text" name="data_arrivo" id="arrivo">
            </div>
            <div class="form-group">
                <input type="text" name="data_partenza" id="partenza">
            </div>
            <div class="hidden show_div">
                <div class="container_wrap">
                    <h3>
                        Funziona
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>

Guarda la "C" e la "V" come sono posizionate.....
Codice: 
$(function(){

    var self=this;
    self.data_arrivo=$('#arrivo');
    self.data_partenza=$('#partenza');
    self.data_arrivo.datepicker();
    self.data_partenza.datepicker();
    self.check_next=[0,0];
    self.data_arrivo.on('change',function(){
        self.check_next[0]=1;
        if(check_div(self.check_next))load_date_picker();
    });
    self.data_partenza.on('change',function(){
       self.check_next[1]=1;
        if(check_div(self.check_next))load_date_picker();
    });
});
function check_div(ar){
    if(ar[0] && ar[1])return true;
    else return false;
}

function load_date_picker(){
    $('.show_div').removeClass('hidden');
}

Funziona ! Testato! Questo puoi copiarlo e incollarlo....
Clicca per allargare...
Ho aperto un nuovo file dove ho postato sia html che gli script, ma non mi continua a funzionare.
Appena carico la pagina c'è subito la scritta FUNZIONA
 
@paloppa ho utilizzato bootstrap per nascondere il div... se tu non usi bootstrap devi adattare la funzione load_date_picker() con il codice che ti serve....
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>



    <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <script
            src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
            integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <input type="text" name="data_arrivo" id="arrivo">
            </div>
            <div class="form-group">
                <input type="text" name="data_partenza" id="partenza">
            </div>
            <div class="hidden show_div">
                <div class="container_wrap">
                    <h3>
                        Funziona
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js_prova.js"></script>
</body>
</html>
Occhio alla fine script src.... metti bene il file e provalo
 
macus_adi ha scritto:
@paloppa ho utilizzato bootstrap per nascondere il div... se tu non usi bootstrap devi adattare la funzione load_date_picker() con il codice che ti serve....
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>



    <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <script
            src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
            integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <input type="text" name="data_arrivo" id="arrivo">
            </div>
            <div class="form-group">
                <input type="text" name="data_partenza" id="partenza">
            </div>
            <div class="hidden show_div">
                <div class="container_wrap">
                    <h3>
                        Funziona
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js_prova.js"></script>
</body>
</html>
Occhio alla fine script src.... metti bene il file e provalo
Clicca per allargare...

Io sto utilizzando jquery.UI, sto cercando la funzione load_date_picker corrispondente su jquery.UI
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

T
Far sparire dalla pagina div che saranno inseriti successivamente
Risposte
0
Visite
3K
jQuery
the_indios
T
E
Div che scompare con scroll jquery
Risposte
0
Visite
1K
Javascript
enzo7903
E
L
php - pulsante premuto che mostra #div
Risposte
3
Visite
2K
PHP
luigi777
L
U
div fisso che ad un certo punto dello scroll scompare
Risposte
3
Visite
5K
jQuery
fede12
F
U
[Javascript] div linkabile che apre link e scompare
Risposte
3
Visite
2K
Javascript
criric
criric
D
[HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div
Risposte
28
Visite
6K
HTML e CSS
Max 1
Max 1
trattorino
[PHP] blocchi div che si posizionano in alto automaticamente
Risposte
5
Visite
1K
PHP
trattorino
trattorino
F
[Javascript] Div ed iframe che adatta altezza in base al contenuto
Risposte
1
Visite
2K
Javascript
Max 1
Max 1
M
Div che sballano posizione al ridimensionamento
Risposte
2
Visite
1K
HTML e CSS
Max 1
Max 1
A
testo responsivo che si ridimensiona in un div
Risposte
3
Visite
3K
HTML e CSS
Amedeo Borgia
A
C
SELECT che popola in contemporanea un DIV e un'altra SELECT
Risposte
12
Visite
4K
PHP
marino51
marino51
B
Tabelle che si adattano al Div responsive ?
Risposte
1
Visite
2K
HTML e CSS
Giovanni Omeri
Giovanni Omeri
R
larghezza div rimane sempre la stessa anche aumentando i px
Risposte
8
Visite
1K
HTML e CSS
rosallo
R
G
Testo che si adatta in grandezza alle misure di un DIV: è possibile farlo?
Risposte
2
Visite
8K
HTML e CSS
ginotullio
G
H
div linkabili che si spostano.
Risposte
0
Visite
1K
HTML e CSS
Hachi Komatsu
H
asevenx
struttura DIV realizzata con float: left che si spezza
Risposte
3
Visite
2K
HTML e CSS
asevenx
asevenx
S
[jQuery] Far apparire un div per qualche secondo
Risposte
4
Visite
3K
Javascript
sunlightbanana
S
asevenx
div che non si estende oltre il flot:left
Risposte
11
Visite
3K
HTML e CSS
Fez Vrasta
F
W
Link che apre un div non funzionante
Risposte
7
Visite
2K
HTML e CSS
wiko85
W
metalgemini
div affiancato che finisce sotto l'altro
Risposte
2
Visite
3K
HTML e CSS
metalgemini
metalgemini
Alto Basso