Div che appare appena due form sono compilati

paloppa

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