Phean Sopheak Blog: August 2017

Tuesday, August 29, 2017

Date Range Jquery and Disable past date

<code>
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});

Demo

Disable submit button until all field selected

<code>
$('#submitForm').prop('disabled', true);;

function updateFormEnabled() {
if (verifyAdSettings()) {
//$('#submitForm').attr('disabled', '');
$('#submitForm').prop('disabled', false);
} else {
//$('#submitForm').attr('disabled', 'disabled');
$('#submitForm').prop('disabled', true);
}
}

function verifyAdSettings() {
if ($('#cities1').val() != '' && $('#cities2').val() != '' && $('#start').val() != '') {
return true;
} else {
return false
}
}

$('#cities1').change(updateFormEnabled);
$('#cities2').change(updateFormEnabled);
$('#start').change(updateFormEnabled);

Required Jquery 2.1

Demo

Monday, August 28, 2017

jQuery match up two different select boxes

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="state1" id="state1" name="state1">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
</select>

<select id="state2" name="state2" size="0" class="state2">    
  <option value="55" class="has-children">AL</option>
  <option value="25" class="has-children">AK</option>
  <option value="200" class="has-children">AZ</option>
  <option value="123" class="has-children">AR</option>
  <option value="216" class="has-children">CA</option>
  <option value="275" class="has-children">CO</option>
  <option value="340" class="has-children">CT</option>
</select>

$(document).ready(function () {   
 $("#state1").change(function() {
  var val = $(this).val();
  $('#state2 option').each(function(){
   var val2 = $(this).html();
   console.log(val2);
   if (val2 == val) {
    //$(this).prop('selected', true);
    $(this).remove(); // remove option from select
   } else {
    $(this).prop('selected', false);
   }
  });
 });
 

});
</script>

Web Plugin

1- Select2 https://select2.github.io/examples.html
2- Selectize https://selectize.github.io/selectize.js/

Bootstrap Datetimepicker: https://eonasdan.github.io/bootstrap-datetimepicker/

Bootstrap Date Range Picker: http://www.daterangepicker.com/

Friday, August 25, 2017

Dynamically populate a select element from JSON data with jQuery/Ajax

<html>

  <head>

    <script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

  </head>

  <body>

    <select id="people"></select>
  </body>

The JSON file we’ll be using consists of a collection of ‘person’ data in a valid JSON form, such as:

{"person": [

  {

    "id": "1",

    "name": "Person1"

  },

  {

    "id": "2",

    "name": "Person2"

  },

  {

    "id": "3",

    "name": "Person3"

  }

]}

  <script type="text/JavaScript">

//getJSON

    //get a reference to the select element

    var $select = $('#people');

    //request the JSON data and parse into the select element

    $.getJSON('person.JSON', function(data){

      //clear the current content of the select

      $select.html('');

      //iterate over the data and append a select option

      $.each(data.person, function(key, val){ 

        $select.append('<option id="' + val.id + '">' + val.name + '</option>');

      })
    });

//AJAX

//get a reference to the select element

$select = $('#people');

//request the JSON data and parse into the select element

$.ajax({

  url: 'person.JSON',

  dataType:'JSON',

  success:function(data){

    //clear the current content of the select

    $select.html('');

    //iterate over the data and append a select option

    $.each(data.person, function(key, val){

      $select.append('<option id="' + val.id + '">' + val.name + '</option>');

    })

  },

  error:function(){

    //if there is an error append a 'none available' option

    $select.html('<option id="-1">none available</option>');

  }

});

  </script>

</html>
https://developerdan77.wordpress.com/2011/10/14/dynamically-populate-a-select-element-from-json-data-with-jquery/

Pages