JavaScript Archives

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) {…

2019年10月13日 0条评论 1103点热度 0人点赞阅读全文

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".

2019年04月11日 0条评论 712点热度 0人点赞阅读全文

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.

2019年02月11日 0条评论 507点热度 0人点赞阅读全文

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.

2019年01月08日 0条评论 516点热度 0人点赞阅读全文

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:

2018年12月19日 0条评论 473点热度 0人点赞阅读全文

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

2018年10月24日 0条评论 760点热度 0人点赞阅读全文

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

2018年06月22日 0条评论 451点热度 0人点赞阅读全文

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');

2018年06月19日 0条评论 410点热度 0人点赞阅读全文

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'; } } },

2018年06月13日 0条评论 421点热度 0人点赞阅读全文

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

2018年06月11日 0条评论 432点热度 0人点赞阅读全文

Form calculation JavaScript component

Switch external image for index page and posts

Open and close all links inside a page for testing

Show any data in DataTables in WordPress

Moving elements around with jQuery

Fixing jQuery DataTables header non-responsive issue

JQuery get checkbox value

JQuery set selected option for supporting multi-language

Changing DataTable cell width

Set minDate and maxDate on datetimepicker from ajax dataset