Javascript: Difference between revisions
Jump to navigation
Jump to search
m (→JSON tools) |
|||
| Line 45: | Line 45: | ||
== JSON tools == | == JSON tools == | ||
Online services | |||
* [http://json.parser.online.fr/ Json Parser Online] | |||
Browser extensions | Browser extensions | ||
* [https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa JSON Formatter] for {{Chrome}} (similar extension: [https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc JSONView]) | * [https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa JSON Formatter] for {{Chrome}} (similar extension: [https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc JSONView]) | ||
| Line 50: | Line 53: | ||
Editor plugins | Editor plugins | ||
* [http://sourceforge.net/apps/mediawiki/notepad-plus/index.php?title=Plugin_Central#J JSON Viewer][http://nppjsonviewer.sourceforge.net/] for Notepad++ | * [http://sourceforge.net/apps/mediawiki/notepad-plus/index.php?title=Plugin_Central#J JSON Viewer][http://nppjsonviewer.sourceforge.net/] for Notepad++ | ||
standalone | |||
* [http://jsonviewer.codeplex.com/ JSON Viewer - Home] 解壓縮直接執行 JsonView\JsonView.exe (免安裝即可執行) | |||
== compression tools == | == compression tools == | ||
Revision as of 14:11, 2 September 2013
Javascript approaches to do the same task
Get the document by id
- 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
- 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
- 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
- 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
- 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");
Count the number of visible table rows
- $('#selector_id:visible').length; jQuery v.1.9.1[6]
- $('#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;
JSON tools
Online services
Browser extensions
- JSON Formatter for Chrome
(similar extension: JSONView)
Editor plugins
- JSON Viewer[1] for Notepad++
standalone
- JSON Viewer - Home 解壓縮直接執行 JsonView\JsonView.exe (免安裝即可執行)
compression tools
troubleshooting steps
- 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>[7]
more on Javascript debug
references
- ↑ 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
- ↑ jquery selector to count the number of visible table rows? - Stack Overflow
- ↑ JavaScript How To
further reading