Javascript/jQuery notes I

1. 1. HTML DIV overflow and scroll
2. 2. Datepicker
3. 3. Get URL Parameters
4. 4. Two Digits Hours and Minutes
5. 5. Format Date to MM/DD/YY
6. 6. Populate HTML Table Dynamically
7. 7. Treat String like Variable Name

• HTML DIV overflow and scroll

  Sometimes, the overflow-y:scroll is not working.

  $('#div_scroll').css('overflow-y', 'auto')

Simply because the height property is missing.

$('#div_scroll').css('height', '200px')

• Datepicker

Configure datepicker: make sure the right jQuery libs have been included.

Show calendar image only with a hidden input field.

<input type="hidden" id="dp" />

$("#dp").datepicker({
    buttonImage: '../images/calendar.png',
    buttonImageOnly: true,
    changeMonth: true,
    changeYear: true,
    showOn: 'both',
});

Show both date input and image fields. The datepicker is binding to the input field. Then, when clicking the image, it also trigger the popup of same datepicker.

<input type="text" id="date" >
<div>
    <img id="date_img" src="../images/calendar.png”>
</div>

$("#date").datepicker({
    format: "yyyy-mm-dd",
    autoclose: true
});

$("#date_img").on( "click", function() {
    $('#date').datepicker('show');
});

Possible conflict with bootstrap: when it comes with <div class="input-group date" data-provide="datepicker"> in HTML, the datepicker does not popup.

• Get URL Parameters

<script type="text/javascript">
    function $_GET(q,s) { 
        s = s ? s : window.location.search; 
        var re = new RegExp('&'+q+'(?:=([^&]*))?(?=&|$)','i'); 
        return (s=s.replace(/^\?/,'&').match(re)) ? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1])) : undefined; 
    } 
</script>

This is a JavaScript implementation of PHP’s $_GET functionality. It uses a regular expression to keep the code to a minimum. Here is a simple example of how to use it:

// this code would print "hello world" with http://someurl?var1=hello&var2=world
var var1 = $_GET('var1');
var var2 = $_GET('var2');
document.write(var1 + " " + var2);

// get the src parameter and split it down to the search query string
var src = document.getElementById('example').src;
params = src.split('?');
var var1 = $_GET('var1','?'+params[1]);

• Two Digits Hours and Minutes

function currentFormatTime(){
    var date = new Date(),str='';
    var currHours = date.getHours();
    currHours = ("0" + currHours).slice(-2);
    str += currHours + ':';
    var currMins = date.getMinutes();
    currMins = ("0" + currMins).slice(-2);
    str += currMins + '';
    return str;
}

//set current time
$("#currentTime").html(currentFormatTime);
setInterval(function(){$("#currentTime").html(currentFormatTime)},1000);

• Format Date to MM/DD/YY

NOTE:

• Consider the case with a single digit in month and day
• Consider to slice the year to two digits.
• getYear() returns [year]-1900. E.g., 2016 - 1900 = 116.

function formatDate(date) {
    var pDate = new Date(date);
    var month = pDate.getMonth() + 1;
    month = month < 10 ? "0" + month : month;
    var day = pDate.getDate();
    day = day < 10 ? "0" + day : day;
    var year = pDate.getFullYear();
    year = year.toString().substr(2,2);
    return  month + '/' + day + '/' + year;
}

• Populate HTML Table Dynamically

<div>
    <table>
        <thead>
        <tr>
            <td>ID</td>
            <th>NAME</th>
            <th>STATUS</th>
        </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>
</div>

NOTE:

• $("#tableBody").empty() clear the all children html elements inside #tableBody
• $("#tableBody").remove() removes all including #tableBody itself.

$("#tableBody").empty();

$.each(data, function (key, value) {
    htmlTable(value.id, value.name, value.status);
});

//populate html table
function htmlTable(id, name, status) {
    // <th>ID</th>
    // <th>NAME</th>
    // <th>STATUS</th>
    var tr = '<tr>'
    tr += '<th scope="row">' + id + '</th>';
    tr += '<td>' + name + '</td>';
    tr += '<td>' + status + '</td>';
    tr += '</tr>';
    $("#tableBody").append(tr);
}

• Treat String like Variable Name

User eval (may have some problem…).
Here, the #tableBody shows content based on the option being selected in a dropdown list #select. Suppose variable varName has corresponding html table content.

$('#select').on('change', function () {
    $('#tableBody').empty();
    var varName = $( "#select option:selected" ).val();
    eval("$('#tableBody').append(" + varName + ")");
})

Another method, if varName has been defined as global variable. Call it by window[varName].
$('#tableBody').append(window[varName]);