Div che appare appena due form sono compilati

paloppa

Utente Attivo
26 Feb 2018
68
0
6
30
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
 

macus_adi

Utente Attivo
5 Dic 2017
1.343
91
48
IT/SW
i campi sono di tipo datapicker
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:

paloppa

Utente Attivo
26 Feb 2018
68
0
6
30
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
Brutta perchè?
Ricordati che è la prima volta che scrivo jQuery, quindi chiaramente non sarà perfetto quello che scrivo
 

paloppa

Utente Attivo
26 Feb 2018
68
0
6
30
Brutta quella che ti ho scritto io.!
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"
  });
     
     
   
         

     
     
   } );
 

macus_adi

Utente Attivo
5 Dic 2017
1.343
91
48
IT/SW
Ma non funziona eheheh
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
}
 

paloppa

Utente Attivo
26 Feb 2018
68
0
6
30
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
}
Mi risulta di aver messo tutto il codice dentro $(function(){
}

Sbaglio?
 

macus_adi

Utente Attivo
5 Dic 2017
1.343
91
48
IT/SW
$(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(); } }
no
 

paloppa

Utente Attivo
26 Feb 2018
68
0
6
30
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
 

paloppa

Utente Attivo
26 Feb 2018
68
0
6
30
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:(
 

macus_adi

Utente Attivo
5 Dic 2017
1.343
91
48
IT/SW
@paloppa allora.... Inizia ad organizzare a funzioni... Quando carichi nel dom le richiami...

Occhio
setTimeout(function(){
$(
"#data_partenza" ).datepicker('show');
},
16);
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>
Ti ho trovato un bel bug.
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:

paloppa

Utente Attivo
26 Feb 2018
68
0
6
30
@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....
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
 

macus_adi

Utente Attivo
5 Dic 2017
1.343
91
48
IT/SW
@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
 

paloppa

Utente Attivo
26 Feb 2018
68
0
6
30
@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

Io sto utilizzando jquery.UI, sto cercando la funzione load_date_picker corrispondente su jquery.UI
 
Discussioni simili
Autore Titolo Forum Risposte Data
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
L php - pulsante premuto che mostra #div PHP 3
U div fisso che ad un certo punto dello scroll scompare jQuery 3
U [Javascript] div linkabile che apre link e scompare Javascript 3
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
trattorino [PHP] blocchi div che si posizionano in alto automaticamente PHP 5
F [Javascript] Div ed iframe che adatta altezza in base al contenuto Javascript 1
M Div che sballano posizione al ridimensionamento HTML e CSS 2
A testo responsivo che si ridimensiona in un div HTML e CSS 3
C SELECT che popola in contemporanea un DIV e un'altra SELECT PHP 12
B Tabelle che si adattano al Div responsive ? HTML e CSS 1
G Testo che si adatta in grandezza alle misure di un DIV: è possibile farlo? HTML e CSS 2
H div linkabili che si spostano. HTML e CSS 0
asevenx struttura DIV realizzata con float: left che si spezza HTML e CSS 3
asevenx div che non si estende oltre il flot:left HTML e CSS 11
W Link che apre un div non funzionante HTML e CSS 7
metalgemini div affiancato che finisce sotto l'altro HTML e CSS 2
S semplice link che però non compare dentro ad un DIV HTML e CSS 3
V aiuto dreamweaver, div che scorre HTML e CSS 0
A testi che appaiono in un div Javascript 3
G div main che non copre tutta la pagina HTML e CSS 2
emanuelevt testo che si adatta al div HTML e CSS 1
borgo italia div che fa quello che vuole HTML e CSS 1
G Div che non si vedono HTML e CSS 1
M Div con immagini ai bordi: IE aggiunge 4pixel in +! (FF perfetto). Che sarà? HTML e CSS 4
Artemisia Div che slittano verticalmente HTML e CSS 5
Y div che non segue il resto della pagina HTML e CSS 3
M Animazione flash che riempie l'intero <div> come fare?? Flash 3
MattiaBergomi [DIV e CSS] Far contenere ad un Div un immagine senza che esca dai margini HTML e CSS 9
S Div che segue la barra di navigazione,come?? Javascript 2
G altezza di un div che contiene 2 div float:left HTML e CSS 6
I DIV che appaiono diversamente su IE e FireFox. HTML e CSS 1
P riuscire a porre due div sulla stessa orizzontale senza che vadano a capo HTML e CSS 1
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1

Discussioni simili