Javascript
Jump to navigation
Jump to search
Javascript approaches to do the same task
Get the document by id[edit]
- document.getElementById('abcId')
- alternative: (1) Get the id attribute by using jQuery .attr(): $("selector").attr("id"); (example) and (2) go to the first step
- parallel naming rules for html elemnt tags ex: (1)<input id='checkbox_id1' > & <select id="select_id1"> (2)Replace the input id to select id. Code snippet as follows:
var selectId = inputId.replace("checkbox_", "select_");
Changing HTML Content[edit]
- Using jQuery .html()[1] $("#selected_id").html(htmlStr);
- JavaScript HTML DOM Changing HTML Content document.getElementById(selected_id).innerHTML = htmlStr; I met technical issue to replace the select text in IE v.8
input selector[edit]
- jQuery :input Selector "Selects all input box, textarea, select and button elements" Cited from :input Selector
- jQuery $("form#formID input[type=text]") Selects all input Text Fields belonging to the form with id: formID[2]
Create HTML select option[edit]
- from JSON hash: javascript - How to create HTML select option from JSON hash? - Stack Overflow
- from javascript array: JavaScript - populate drop down list with array - Stack Overflow
HTML DOM selected
- HTML[3]
- jQuery: .prop()[4]
- jQuery .attr() ex: $("#myDropDown option:text=" + myText +"").attr("selected", "selected"); [5]
Display or hide the element by id[edit]
- HTML DOM Style object
- document.getElementById( selector_id ).style.display = "none";
- Using jQuery .show() or .hide():
- $("#selector_id").show(); or
- $("#selector_id").hide();
- Using jQuery .css():
- $("#selector_id").css("display", ""); or $("#selector_id").css("display", "block");
- $("#selector_id").css("display", "none");
form submit validation[edit]
- Form onsubmit Event. code snippet[6]:
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">...
- jQuery .submit()[7]
$(document).ready(function(){ $('#form').submit( function(){ return validateForm(); }); }); function validateForm() { if ( condition ) { alert('form was not validated'); return false; } }
Count the number of visible table rows[edit]
- $('#selector_id:visible').length; jQuery v.1.9.1[9]
- $('#selector_id:not([style*="display: none"])').length; jQuery v.1.9.1 + IE v.8 not work
count the number of all table rows (includes visible and invisible rows)
- document.getElementById( table_id ).rows.length;
refresh or redirect the webpage[edit]
- 轉導、轉向(Redirect)網址的方法. - 諸彼特租屋網 [Last visited: 2014-03-18]
- alternative: refresh partial content which only required to be updated
JSON tools[edit]
JSON schema generator
JSON validator
- JSONLint - The JSON Validator [Last visited: 2015-09-08]
JSON viewer 通常也包含 validator 功能
- JSON Data Ninja [Last visited: 2017-05-24]
- 輸入: 文字
- 可以把 JSON 多筆資料轉成表格格式
- 有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
- Json Parser Online [Last visited: 2017-05-24]
- 輸入: 文字
- 沒有顯示成 Tree 結構,但有美化語法方便閱讀
- 有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
- Best Online JSON Viewer, Beautifier, Formatter, Analyser, Minify, Converter [Last visited: 2017-05-24]
- 輸入: 文字
- Tree Viewer 顯示結構
- 有標示某節點下的資料筆數
- 不會將編碼後的中文還原成可讀
- JSONView for Chrome : beautify the remote JSON file
- 輸入: 網址
- 沒有顯示成 Tree 結構,但有美化語法方便閱讀
- 沒有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀 Unicode/Chinese issue: the garbled Chinese characters will become human readable!
- Postman for Chrome . HTTP request and response data tool [Last visited: 2017-06-09]
- 輸入: 網址
- 沒有顯示成 Tree 結構,但有美化語法方便閱讀
- 沒有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
- JSON Viewer v. 1.2.0.0 解壓縮直接執行 JsonView\JsonView.exe (免安裝即可執行) Win
- 大檔 (檔案大小 6MB) 測試: 停頓約半分鐘後,即可使用
- Notepad++ v. 6.8.7 + JSONViewer Notepad++ plugin v.1.22
- 大檔 (檔案大小 6MB) 測試: 沒有反應超過5分鐘
- VisualJSON by youknowone v. 1.6.0 on Mac
- 輸入: 網址或文字
- 顯示成 Tree 結構
- 有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
- $ Cocoa JSON Editor - Powerful JSON String Editor for Developers, API, Endpoints, Rest client v. 1.2.5 on Mac
- 輸入: 文字或檔案
- Tree Viewer 顯示結構
- 有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
- $ TextLab v. 1.3.4 on Mac
- 輸入: 文字或檔案
- 沒有顯示成 Tree 結構,但有美化語法方便閱讀
- 沒有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
Other tools
Editor plugins
- JSON Viewer [1] for Notepad++
- Sublime Text 套件介紹(四):Pretty JSON[Last visited: 2014-03-11]
Performance issue: compression tools, using CDN[edit]
Speed up websites#JavaScript part
troubleshooting steps[edit]
- Using the javascript library?
- Checking browser compatibility
- Javascript location: (1)JavaScript in <head> or <body> ex: .click(), (2)JavaScript in <input> tag or other DOM elements' tag ex: <button type="button" onclick="myFunction()" id="buttonId">Try it</button>[10]
jsfiddle:Uncaught ReferenceError: function_name is not defined[edit]
message: Uncaught ReferenceError: function_name is not defined
- possibile solution: settings - No wrap - in <body> or No wrap - in <head>
more on Javascript debug
References[edit]
- ↑ javascript - JQuery html() vs. innerHTML - Stack Overflow
- ↑ javascript - jquery get all input from specific form - Stack Overflow
- ↑ HTML option selected Attribute
- ↑ select - jQuery Set Selected Option Using Next - Stack Overflow
- ↑ javascript - jQuery - setting the selected value of a select control via its text description - Stack Overflow
- ↑ JavaScript Form Validation
- ↑ .submit() | jQuery API Documentation
- ↑ 好用的表單驗證工具 – jQuery validation plugin | brooky's blog
- ↑ jquery selector to count the number of visible table rows? - Stack Overflow
- ↑ JavaScript How To