-2

I had a jquery snippet working but the minute I add another javascript code in the existing script the JS stops working. The code I added is the one below, which works in this snippet:

$("ul").on("click", ".init", function() {
  $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
  allOptions.removeClass('selected');
  $(this).addClass('selected');
  $("ul").children('.init').html($(this).html());
  allOptions.toggle();
  console.log($('.selected .value').text());
});

The snippet I am working on is this

Here my HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
        type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css"
      rel="Stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="list-unstyled" style="list-style: none;">
    <li class="init">--SELECT--</li>
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li>
    <li data-value="value 3"><span class="value">Durban</span><span class="numbers">1400</span></li>
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li>
</ul>

<div class="date-example-container">            
            <div class="selection">
                <div class="label">
                    <label>Waarheen gaan jy?</label>    
                    <select id="selection">                                 
                        <option value="">Naam van Blyplek</option>                  
                        <option value="karoo">Karoo</option>                    
                        <option value="knysna">Knysna</option>                  
                        <option value="durban">Durban</option>                  
                        <option value="pretoria">Pretoria</option>                  
                        <option value="kaapstad">Kaapstad</option>                  
                        <option value="tuinroete">Tuinroete</option>                
                    </select>
                </div>              

                <div class="icon" tabindex="0">                 
                    <div>                       
                        <i class="fa fa-search" aria-hidden="true"></i>                 
                    </div>              
                </div>          
            </div>                  
            <div class="from-to">           
                <div class="from">
                    <div class="label">
                        <label>Vanaf</label>
                        <input placeholder="Inklok" type="text" id="txtFrom" /> 
                    </div>                                    
                    <i class="fa fa-calendar-o" aria-hidden="true"></i>         
                </div>          
                <div class="to">
                    <div class="label">
                        <label>Tot</label>    
                        <input placeholder="Uitklok" type="text" id="txtTo" />
                    </div>                
                    <i class="fa fa-calendar-o" aria-hidden="true"></i>         
                </div>      
            </div>          
            <div class="field right">

                <div class="label">
                    <label>Aantal gaste</label>             
                    <select id="search-pax" name="pax" class="ls-select ">
                        <option value="1">1 gas</option>
                        <p>Vim aqui pra vadiar</p>
                        <option value="2">2 gaste</option>                  
                        <option value="3">3 gaste</option>                  
                        <option value="4">4 gaste</option>                  
                        <option value="5">5 gaste</option>                  
                        <option value="6">6 gaste</option>                  
                        <option value="7">7 gaste</option>                  
                        <option value="8">8 gaste</option>                  
                        <option value="9">9 gaste</option>                  
                        <option value="10">10 gaste</option>                
                        <option value="11">11 gaste</option>                
                        <option value="12">12 gaste</option>                
                        <option value="13">13 gaste</option>                
                        <option value="14">14 gaste</option>                
                        <option value="15">15 gaste</option>                
                        <option value="16">16 gaste</option>                
                        <option value="17">17 gaste</option>                
                        <option value="18">18 gaste</option>                
                        <option value="19">19 gaste</option>                
                        <option value="20">20 gaste</option>                
                    </select>   
                </div>          
                <div class="icon" tabindex="0">
                    <div>
                        <i class="fa fa-user" aria-hidden="true"></i>
                    </div>
                </div>          
            </div>          
            <a id="atributo"href="#" target="_blank">SOEK AKKOMMODASIE</a>      
        </div>

CSS:

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}


body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

#column{
  position: relative;
}
li{
  list-style: none;
  justify-content: space-between;
  display: flex;
}
li:hover{
  background: black;
  color: white;

}
.date-example-container i.fa {
    color: #555;
}

.date-example-container {
    width: 100%;
    max-width: 350px;
    margin: 20px 0;
    color: #9999a2;
    clear: both;
}

.date-example-container label{color: #555555;}


input#txtTo,
input#txtFrom{
  position: relative;
  padding: 10px;
}

input#txtFrom:after{
  font-family: fontawesome;
  content: '\f073';
  psotion: absolute;
}

.fa-calendar-o{
  position: absolute;
  right: 0;
  top: 26px;
  padding: 10px;
}
.submit-here{
  display: inline-block;
  background: #ee782e;
  border: 0;
  color: white;
  padding:10px;
  margin-top: 10px;
}

select{
  width: 100%;
  padding: 10px;
  -webkit-appearance: none;
}

.date-example-container .field.right {
    position: relative;
    float: none;
}

.icon {
    width: 33px;
    height: 40px;
    position: absolute;
    right: 0;
    color: #000;
    font-size: 18pt;
}

.from-to i {
    font-size: 18pt;
}

.selection{
  position: relative;
}

.date-example-container .field.right .icon {
    top: 36px;
}

.selection .icon {
    top: 34px;
}

.from-to .icon{
    right: 3px;
    top: 26px;
}

input#txtTo, input#txtFrom {
    position: relative;
    padding: 10px;
    width: 100%;
    max-width: 130px;
}

.date-example-container input{
    width: 100%;
    /*display: block;
*/}

.date-example-container label {
    display: block;
}

.from-to {
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
}

.from, .to {
    position: relative;
}

a#atributo {
    display: block;
    background: #ee782e;
    border: 0;
    color: white;
    padding: 10px;
    margin-top: 10px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;

}

td.ui-datepicker-unselectable.ui-state-disabled {
    background: white;
    color: #ebebeb;
}

table.ui-datepicker-calendar td {
    border: 0;
    background: #DADADA;
    color: black;
}

a.ui-state-default {
    color: #555;
}

.ui-datepicker-title > span {
    border-bottom: 1px solid;
}

.ui-datepicker-calendar th {
    background: transparent !important;
    border: 0 !important;
    color: #999 !important;
    font-weight: bold !important;
}

input#txtTo:active, 
input#txtFrom:active,
select#search-pax:active,
input#txtTo:hover, 
input#txtFrom:hover,
select#search-pax:hover,
select#selection:hover,
select#selection:active {
    border-color: #EE782E;
    font-style: normal;
    outline: 0 !important;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev{
    background: none;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before{
    font-family: fontawesome;
    color: #999;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
    content: '\f0d9 ';   
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after{ 
    content: '\f0da';
}

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    /*border: 1px #000 solid;*/
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

JS:

jQuery(document).ready( function($){

  $("ul").on("click", ".init", function() {
      $(this).closest("ul").children('li:not(.init)').toggle();
  });

  var allOptions = $("ul").children('li:not(.init)');
  $("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
    console.log($('.selected .value').text());
  });


    var txtFromDate, txtToDate;
  $("#txtFrom").datepicker({
    dateFormat: "d/M/yy",
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtFromDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
      $("#txtTo").datepicker("option", "minDate", dt);
    }
  });
  $("#txtTo").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtToDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() - 1);
      $("#txtFrom").datepicker("option", "maxDate", dt);
    }
  });

  $('a#atributo').click(function() {
    // var link = day_1+month_1+year;
     var monthNames = [
        "Jan", "Feb", "Mar",
        "Apr", "May", "Jun", "Jul",
        "Aug", "Sep", "Oct",
        "Nov", "Dec"
      ];

    var date1 = $("#txtFrom").datepicker('getDate'),
        day_1  = date1.getDate(),  
        month_1 = date1.getMonth() + 1,              
        year_1 =  date1.getFullYear();

    var date2 = $("#txtTo").datepicker('getDate'),
        day_2  = date2.getDate(),  
        month_2 = date2.getMonth() + 1,              
        year_2 =  date2.getFullYear(); 


    var people = $('#search-pax :selected').val();

    $(this).attr("href", "http://www.lekkeslaap.co.za/akkommodasie-in/"+where+"?q="+where+"&start="+day_1+"+"+monthNames[month_1]+"+"+year_1+'&end='+day_2+'+'+monthNames[month_2]+'+'+year_2+'&pax='+people);
  });
});

How can I make the dropdown and the calendars work?

Ragmah
  • 413
  • 3
  • 12
  • 4
    If JS code stops working, check the console for errors – Rory McCrossan Apr 12 '17 at 08:17
  • If you run the snippet you'll see that no errors show in the console – Ragmah Apr 12 '17 at 08:18
  • What is the intended behaviour? All you've stated is that something doesn't work. – Rory McCrossan Apr 12 '17 at 08:19
  • 3
    The full content of your question must be **in** your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a [mcve] **in** the question, ideally using Stack Snippets (the `<>` toolbar button) to make it runnable. More: [*How do I ask a good question?*](/help/how-to-ask) – T.J. Crowder Apr 12 '17 at 08:20
  • 1
    Yeah, you kinda missed out the "minimal" part. :-) (And the Stack Snippets part, but it's not a requirement -- it just makes it easier for people to help you. Hint. Hint.) – T.J. Crowder Apr 12 '17 at 08:26
  • 1
    Method *on* was introduced in jQuery version 1.7 but your using 1.6 – JYoThI Apr 12 '17 at 08:26
  • Nice one @JYoThI! Ragmah, why in heaven's name use such an obsolete version of jQuery? – T.J. Crowder Apr 12 '17 at 08:27
  • I added. This:. However, only the dropdown works, I can see the calendars. – Ragmah Apr 12 '17 at 08:29
  • Remove $ parameter from where? – Ragmah Apr 12 '17 at 08:34

1 Answers1

2

jQuery.on method has been added in version 1.7 and you have 1.6 ( you can replace it with bind or you can upgrade the version of jQuery library)

Take a look on the below snippet

jQuery(document).ready( function(){

    $("ul").on("click", ".init", function() {
      $(this).closest("ul").children('li:not(.init)').toggle();
  });

  var allOptions = $("ul").children('li:not(.init)');
  $("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
    console.log($('.selected .value').text());
  });

     
 var txtFromDate, txtToDate;
  $("#txtFrom").datepicker({
    dateFormat: "d/M/yy",
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtFromDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
      $("#txtTo").datepicker("option", "minDate", dt);
    }
  });
  $("#txtTo").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtToDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() - 1);
      $("#txtFrom").datepicker("option", "maxDate", dt);
    }
  });

  $('a#atributo').click(function() {
    // var link = day_1+month_1+year;
  var monthNames = [
  "Jan", "Feb", "Mar",
  "Apr", "May", "Jun", "Jul",
  "Aug", "Sep", "Oct",
  "Nov", "Dec"
   ];

    var date1 = $("#txtFrom").datepicker('getDate'),
        day_1  = date1.getDate(),  
        month_1 = date1.getMonth() + 1,              
        year_1 =  date1.getFullYear();
            
    var date2 = $("#txtTo").datepicker('getDate'),
        day_2  = date2.getDate(),  
        month_2 = date2.getMonth() + 1,              
        year_2 =  date2.getFullYear(); 
    
    
    var people = $('#search-pax :selected').val();
    
    $(this).attr("href", "http://www.lekkeslaap.co.za/akkommodasie-in/"+where+"?q="+where+"&start="+day_1+"+"+monthNames[month_1]+"+"+year_1+'&end='+day_2+'+'+monthNames[month_2]+'+'+year_2+'&pax='+people);
  });
});
body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}


body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;
  
}
li, ul{
  padding: 0;
  margin: 0;
}

#column{
  position: relative;
}
li{
  list-style: none;
  justify-content: space-between;
  display: flex;
}
li:hover{
  background: black;
  color: white;

}
.date-example-container i.fa {
    color: #555;
}

.date-example-container {
    width: 100%;
    max-width: 350px;
    margin: 20px 0;
 color: #9999a2;
 clear: both;
}

.date-example-container label{color: #555555;}


input#txtTo,
input#txtFrom{
  position: relative;
  padding: 10px;
}

input#txtFrom:after{
  font-family: fontawesome;
  content: '\f073';
  psotion: absolute;
}

.fa-calendar-o{
  position: absolute;
  right: 0;
  top: 26px;
  padding: 10px;
}
.submit-here{
  display: inline-block;
  background: #ee782e;
  border: 0;
  color: white;
  padding:10px;
  margin-top: 10px;
}

select{
  width: 100%;
  padding: 10px;
  -webkit-appearance: none;
}

.date-example-container .field.right {
    position: relative;
 float: none;
}

.icon {
    width: 33px;
    height: 40px;
    position: absolute;
    right: 0;
    color: #000;
 font-size: 18pt;
}

.from-to i {
    font-size: 18pt;
}

.selection{
  position: relative;
}

.date-example-container .field.right .icon {
 top: 36px;
}

.selection .icon {
    top: 34px;
}

.from-to .icon{
 right: 3px;
 top: 26px;
}

input#txtTo, input#txtFrom {
    position: relative;
    padding: 10px;
    width: 100%;
    max-width: 130px;
}

.date-example-container input{
 width: 100%;
 /*display: block;
*/}

.date-example-container label {
    display: block;
}

.from-to {
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
}

.from, .to {
    position: relative;
}

a#atributo {
    display: block;
    background: #ee782e;
    border: 0;
    color: white;
    padding: 10px;
    margin-top: 10px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
  
}

td.ui-datepicker-unselectable.ui-state-disabled {
    background: white;
    color: #ebebeb;
}

table.ui-datepicker-calendar td {
    border: 0;
    background: #DADADA;
    color: black;
}

a.ui-state-default {
    color: #555;
}

.ui-datepicker-title > span {
    border-bottom: 1px solid;
}

.ui-datepicker-calendar th {
    background: transparent !important;
    border: 0 !important;
    color: #999 !important;
    font-weight: bold !important;
}

input#txtTo:active, 
input#txtFrom:active,
select#search-pax:active,
input#txtTo:hover, 
input#txtFrom:hover,
select#search-pax:hover,
select#selection:hover,
select#selection:active {
    border-color: #EE782E;
    font-style: normal;
    outline: 0 !important;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev{
 background: none;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before{
 font-family: fontawesome;
 color: #999;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
 content: '\f0d9 ';   
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after{ 
 content: '\f0da';
}

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    /*border: 1px #000 solid;*/
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
        type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css"
      rel="Stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="list-unstyled" style="list-style: none;">
    <li class="init">--SELECT--</li>
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li>
    <li data-value="value 3"><span class="value">Durban</span><span class="numbers">1400</span></li>
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li>
</ul>

<div class="date-example-container">   
   <div class="selection">
    <div class="label">
     <label>Waarheen gaan jy?</label> 
     <select id="selection">         
      <option value="">Naam van Blyplek</option>     
      <option value="karoo">Karoo</option>     
      <option value="knysna">Knysna</option>     
      <option value="durban">Durban</option>     
      <option value="pretoria">Pretoria</option>     
      <option value="kaapstad">Kaapstad</option>     
      <option value="tuinroete">Tuinroete</option>    
     </select>
    </div>    
        
    <div class="icon" tabindex="0">     
     <div>      
      <i class="fa fa-search" aria-hidden="true"></i>     
     </div>    
    </div>   
   </div>     
   <div class="from-to">   
    <div class="from">
     <div class="label">
      <label>Vanaf</label>
      <input placeholder="Inklok" type="text" id="txtFrom" /> 
     </div>             
     <i class="fa fa-calendar-o" aria-hidden="true"></i>   
    </div>   
    <div class="to">
     <div class="label">
      <label>Tot</label>   
      <input placeholder="Uitklok" type="text" id="txtTo" />
     </div>      
     <i class="fa fa-calendar-o" aria-hidden="true"></i>   
    </div>  
   </div>   
   <div class="field right">

    <div class="label">
     <label>Aantal gaste</label>    
     <select id="search-pax" name="pax" class="ls-select ">
      <option value="1">1 gas</option>
      <p>Vim aqui pra vadiar</p>
      <option value="2">2 gaste</option>     
      <option value="3">3 gaste</option>     
      <option value="4">4 gaste</option>     
      <option value="5">5 gaste</option>     
      <option value="6">6 gaste</option>     
      <option value="7">7 gaste</option>     
      <option value="8">8 gaste</option>     
      <option value="9">9 gaste</option>     
      <option value="10">10 gaste</option>    
      <option value="11">11 gaste</option>    
      <option value="12">12 gaste</option>    
      <option value="13">13 gaste</option>    
      <option value="14">14 gaste</option>    
      <option value="15">15 gaste</option>    
      <option value="16">16 gaste</option>    
      <option value="17">17 gaste</option>    
      <option value="18">18 gaste</option>    
      <option value="19">19 gaste</option>    
      <option value="20">20 gaste</option>    
     </select> 
    </div>   
    <div class="icon" tabindex="0">
     <div>
      <i class="fa fa-user" aria-hidden="true"></i>
     </div>
    </div>   
   </div>   
   <a id="atributo"href="#" target="_blank">SOEK AKKOMMODASIE</a>  
  </div>
Vladu Ionut
  • 8,075
  • 1
  • 19
  • 30