This is created for project cost calculation in 2008. Note that it does not use jQuery, but using $ symbol. Be careful to use it with jQuery on the same web page. JavaScript component: he.calc.js //TODO: validation logic /* This component is created specifically for Excel like calculation. Author: Albert He Created: 2008-12-01 usage: He.enableTrace = true; // default = false, if true read on developer console default dataType: number default precision: 2 //accept external event handler onSelfChange //value changed by self, arg = the cell object onchange //value changed by any reason, arg = the cell object dataType: 'string' 'number' precision: 3 validation: 100 */ var doc = document; var $ = function(id) { return document.getElementById(id); }; var removeLeadingZero = function(numberString) { return (numberString.indexOf('0') == 0) ? numberString.replace(/^[0]*/, '') : numberString; } var v = function(id) { var value = ''; var elm = $(id); if (!elm) return 0; if (elm.cellInstance) value = elm.cellInstance.value; else { He.log += elm.id + ' has no instance (has not been defined yet).\n'; //this indicates using undefined cell. //alert(elm.id + ' value: ' + elm.value); } if (value == '') value = 0; return eval(value); }; function roundTo(base, precision) { var n = Math.pow(10, precision); return Math.round(base * n) / n; } function numberPrecision(base, precision) { if (precision == 999) return base-0; else if (precision <= 0) return Math.round(base); var s = roundTo(base, precision).toString(); var decimalIndex = s.indexOf("."); if (precision > 0 && decimalIndex < 0) { decimalIndex = s.length; s += '.'; } while (decimalIndex + precision + 1 > s.length) {…

Issue For article collection site, many articles are copied from other websites. Very often, images were not displayed. Reason Some image servers switching their protocol between http and https. e.g. https://i2.kknews.cc Solution 1. Index page post block html output is from wp_kses_post( $apostrophe_2_post_thumbnail ) So, In content.php file under child theme, replace echo wp_kses_post( $apostrophe_2_post_thumbnail ); with echo str_replace('<img ','<img onerror="imgError(this);" ',wp_kses_post($apostrophe_2_post_thumbnail)); 2. Post page In plugin ad_after function in ad-inserter.php add following code: $content = str_replace('<img ','<img onerror="imgError(this);" ',$content); In Custom CSS & JS add script, this script will be added to both index and post pages: function imgError(image) { image.onerror = ''; if(image.src.startsWith('http:')) image.src=image.src.replace(/^http:\/\//i, 'https://'); if(image.src.startsWith('https:')) image.src=image.src.replace(/^https:\/\//i, 'http://'); } This is improved version of "Fixing image issue in posts".  1,259 total views

For web site testing, we need to open each links on a page and briefly exam the page display. 1. set each link displays for 5 seconds or longer before closing to ensure there is enough time for a link to be fully opened and examined. 2. set open interval of each link to 3 seconds more than the link being closed. This allows js to ensure the previous link is closed before open the next link. var key_start = 0; var win; $.each($('#sitemapTable a'),function(key,value){ if(key >= key_start) setTimeout(function(){ win = window.open(value.href); setTimeout(function(){ win.close(); }, 5000); },(key-key_start)*(8000+Math.floor(Math.random() * 100))); }); Note: 1. tested in Chrome 70.0.3538.102. 2. this script is used in js console.  939 total views

There are many way to show data in jQuery DataTables. Here’s a way using shortcode. Create a plugin with shortcode. 1. Create a function Pseudo function: function get_something_shortcode(){ global $wpdb; $sql = "select * from table"; $result = $wpdb->get_results($sql); $str = '<table id="logTable">'; $str .= '<thead><tr><th>column1</th><th>column1</th></tr></thead>'; $str .= '<tbody>'; foreach($result as $row) { $str .= '<tr><td>'.$row->column1.'</td><td>'.$row->column2.'</td></tr>'; } $str.="</tbody></table>"; return $str; } Real function function get_activity_logs_shortcode(){ global $wpdb; $sql = "select DATE_FORMAT(convert_tz(l.visit_date,'+0:00','-5:00'), '%y-%m-%d %h:%i:%s') AS `date`,p.post_title,p.post_type,pu.display_name AS author,(case when l.display_name='unknown' then '-' else l.display_name end) AS user,l.status ,l.user_ip,l.city,l.referer from wp_moove_activity_log l join wp_posts p on p.ID = l.post_id join wp_users pu on pu.ID = p.post_author left join wp_users u on u.ID = l.user_id where p.post_type in ('page','post') and l.user_ip not LIKE '66.249.75.%' AND l.user_ip not LIKE '66.249.69.%' and l.display_name!='太极客' order by l.visit_date desc"; $result = $wpdb->get_results($sql); $str='<table id="logTable" style="font-size:12px">'; $str .= '<thead><tr><th>Date/Time</th><th>Title</th><th>Post type</th><th>Author</th><th>User</th><th>Activity</th><th>Client IP</th><th>Client Location</th><th>Referer</th></tr></thead>'; $str .= '<tbody>'; foreach($result as $row) { $str .= '<tr><td><a href="'.$row->Date.'" nowrap style="font-size:10px;white-space:nowrap">'.$row->date.'</td><td>'.$row->post_title.'</td><td>'.$row->post_type.'</td><td>'.$row->author.'</td><td>'.$row->user.'</td><td>'.$row->status.'</td><td>'.$row->user_ip.'</td><td>'.$row->city.'</td><td>'.$row->referer.'</td></tr>'; } $str.="</tbody></table>"; return $str; } 2. Make it a shortcode add_shortcode('activity_logs','get_activity_logs_shortcode'); Add following code in head section in header.php file of the child theme. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#logTable').DataTable( { "initComplete": function(settings, json) { var obj = $('#memberTable_filter label'); obj.html(obj.html().replace('Search:','搜索: ')); obj = $('.dataTables_length label'); obj.html(obj.html().replace('Show','显示 ').replace('entries',' 行')); }, "pageLength": 50 } ); } ); </script> Note table the table id logTable must be the same in the table and script. 3. Add a page to use the shortcode, then save and display the page. [activity_logs] Done.  1,215 total views

WordPress paging line is under 'related sites', not right below the article contents. To move it up with two steps: Wrap the line right below the article, in this example is "page view counter", "pvc_stats" class. Prepend paging element ".page-links" to the wrapper. See the code below:  1,047 total views

jQuery DataTables renders table into two parts:  header, <div class="dataTables_scrollHeadInner"><div class="dataTable"> body, <div class="dataTables_scrollBody"> DataTables measures the current screen size and set the fixed width. In this case when resizing the browser, the table header and body are not resized automatically. The solution is to enforce their width to be set in percentage. The following code is the final. Note: file: \WebSites\WebBusinessSuite\Scripts\Main\BusinessSuit.css  3,945 total views,  10 views today

$('#checkbox').val() is always = 'on'. User:  $('#checkbox').is(':checked') to get correct value.  952 total views

data is retrieved from web API in JSON format. Rendered on translation data completed. i18n.load( serviceLocation + 'api/language.php?page='+filename+'&lang='+i18n.locale, i18n.locale ).done( function() { var select = $("#gender"); select.empty().append('<option value="">'+$$("selectgender")+' *</option>'); select.append('<option value="1">'+$$("male")+'</option>'); select.append('<option value="2">'+$$("female")+'</option>'); select.append('<option value="3">'+$$("other")+'</option>'); Set option from data: function fillData(data){ //$('#gender option:contains("'+data.gender+'")').attr('selected','selected'); $('#gender option[value='+data.gender+']').attr('selected','selected'); } By text: $('#gender option:contains("'+data.gender+'")').attr('selected','selected'); By value: $('#gender option[value='+data.gender+']').attr('selected','selected');    950 total views

Problem: If only a few columns, the space is too big. $tblContainer.html("<table class='dataTable striped border hovered'></table>"); var reportName = JSON.parse(this.data).ReportName; if (reportName.indexOf("Automation")>-1) { table = $tblContainer.DataTable({ "bSort": false, "createdRow": function (row, data, dataIndex) { if (data[0].indexOf("<b>") > -1) { $(row).addClass('header-lightblue'); } row.cells[0].width = '400px'; //first column if (data.length < 5) { for (var i = 1; i < data.length - 1; i++) { row.cells[i].width = '200px'; } } },    1,009 total views

Senario: Date input field (startmonth/endmonth) using jquery datetimepicker, and require to restrict users to pick invalid date from the picker. The data is retrieved from api. The valid date is based on the 'loaded' date returned. Once the startmonth selected, the endmonth should not be earlier than startmonth. var $hierarchycontrols = $("select[data-link-name='AutomationReportFilter']", that.mainContainer); var ajaxParameters = { methodUrl: "Reporting/GetAutomationReportFilter", dataInput: that.userInput }; that.AjaxCall(ajaxParameters, function () { $hierarchycontrols.prop("disabled", true); }, function (data) { $.each(data, function (i1, v1) { var count = 0; var currentName = v1.ParameterName; var $currentControl = $('select[data-filter-name="' + currentName + '"]', that.mainContainer); if (that.modifiedhiecontrolname !== currentName || $('#ddl' + that.modifiedhiecontrolname).val() == '') { $currentControl.html(""); if (!$("#txt" + currentName).is(":hidden")) { if (v1.ParameterName == 'ar_startmonth' || v1.ParameterName == 'ar_endmonth') { var mindate = '9999-12-31', maxdate = ''; $.each(v1.ParameterValue, function (i, v) { mindate = mindate > v.Value ? v.Value : mindate; maxdate = maxdate < v.Value ? v.Value : maxdate; }); $("#txtar_startmonth").data("DateTimePicker").minDate(mindate); $("#txtar_startmonth").data("DateTimePicker").maxDate(maxdate); if (mindate < $("#txtar_startmonth").val()) mindate = $("#txtar_startmonth").val(); $("#txtar_endmonth").data("DateTimePicker").minDate(mindate); $("#txtar_endmonth").data("DateTimePicker").maxDate(maxdate); } else { $.each(v1.ParameterValue, function (i2, v2) { $currentControl.append("<option " + (v2.Selected == true ? "selected" : "") + ' value="' + v2.Value + '">' +v2.Text + ""); count++; }); } } if (count > 1 || (count == 1 && $currentControl[0]!= undefined && $currentControl[0].textContent != '')) { $currentControl.prop("disabled", false); } } else { $currentControl.prop("disabled", false); } }); Ref: project - BusinessSuite file - FilterBuilder.js  1,343 total views,  5 views today