Editing Javascript

Javascript approaches to do the same task

== Get the document by id ==
* <nowiki>document.getElementById('abcId')</nowiki>
* alternative: (1) Get the id attribute by using jQuery [http://api.jquery.com/attr/ .attr()]: <nowiki>$("selector").attr("id");</nowiki> ([http://jsfiddle.net/planetoid/Ffvwz/ example]) and (2) go to the first step
* parallel naming rules for html elemnt tags ex: (1)<nowiki><input id='checkbox_id1' > & <select id="select_id1"></nowiki> (2)Replace the input id to select id. Code snippet as follows:
<pre>
var selectId = inputId.replace("checkbox_", "select_");
</pre>

== Changing HTML Content ==
* Using jQuery [http://api.jquery.com/html/ .html()]<ref>[http://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml javascript - JQuery html() vs. innerHTML - Stack Overflow]</ref> <nowiki>$("#selected_id").html(htmlStr);</nowiki>
* [http://www.w3schools.com/js/js_htmldom_html.asp JavaScript HTML DOM Changing HTML Content] <nowiki>document.getElementById(selected_id).innerHTML = htmlStr;</nowiki> {{exclaim}} I met technical issue to replace the select text in {{IE}} v.8

== input selector ==
* jQuery [http://api.jquery.com/input-selector/ :input Selector] "Selects all input box, textarea, select and button elements" Cited from [http://api.jquery.com/input-selector/ :input Selector]
* jQuery <nowiki>$("form#formID input[type=text]")</nowiki> Selects all input '''Text Fields''' belonging to the form with id: formID<ref>[http://stackoverflow.com/questions/4291005/jquery-get-all-input-from-specific-form javascript - jquery get all input from specific form - Stack Overflow]</ref>

== Create HTML select option ==
[http://www.w3schools.com/tags/att_select_form.asp HTML select form Attribute]
* from JSON hash: [http://stackoverflow.com/questions/9071525/how-to-create-html-select-option-from-json-hash javascript - How to create HTML select option from JSON hash? - Stack Overflow]
* from javascript array: [http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array JavaScript - populate drop down list with array - Stack Overflow]

HTML DOM selected
* HTML<ref>[http://www.w3schools.com/tags/att_option_selected.asp HTML option selected Attribute]</ref>
* jQuery: [http://api.jquery.com/prop/ .prop()]<ref>[http://stackoverflow.com/questions/1280369/jquery-set-selected-option-using-next select - jQuery Set Selected Option Using Next - Stack Overflow]</ref>
* jQuery [http://api.jquery.com/attr/ .attr()] ex: <nowiki>$("#myDropDown option:text=" + myText +"").attr("selected", "selected"); </nowiki><ref>[http://stackoverflow.com/questions/496052/jquery-setting-the-selected-value-of-a-select-control-via-its-text-description javascript - jQuery - setting the selected value of a select control via its text description - Stack Overflow]</ref>

== Display or hide the element by id ==
* [http://www.w3schools.com/jsref/dom_obj_style.asp HTML DOM Style object]
** <nowiki>document.getElementById( selector_id ).style.display = "none";</nowiki>
* Using jQuery [http://api.jquery.com/show/ .show()] or [http://api.jquery.com/hide/ .hide()]: 
** <nowiki>$("#selector_id").show();</nowiki> or 
** <nowiki>$("#selector_id").hide();</nowiki>
* Using jQuery [http://api.jquery.com/css/ .css()]: 
** <nowiki>$("#selector_id").css("display", "");</nowiki> or <nowiki>$("#selector_id").css("display", "block");</nowiki>
** <nowiki>$("#selector_id").css("display", "none");</nowiki>

== form submit validation ==
* [http://www.w3schools.com/jsref/event_form_onsubmit.asp Form onsubmit Event]. code snippet<ref>[http://www.w3schools.com/js/js_form_validation.asp JavaScript Form Validation]</ref>:
<pre>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">... 
</pre>
* jQuery .submit()<ref>[http://api.jquery.com/submit/ .submit() | jQuery API Documentation]</ref>
<pre>
$(document).ready(function(){
    $('#form').submit( function(){
        return validateForm();
    });
});

function validateForm()
{
    if ( condition )
    {
        alert('form was not validated');
        return false;
    }
 
}
</pre>
* [http://jqueryvalidation.org/ jQuery Validation Plugin | Form validation with jQuery]<ref>[http://brooky.cc/2011/08/04/using-jquery-validation-plugin-for-form-validation/ 好用的表單驗證工具 – jQuery validation plugin | brooky's blog]</ref>

== Count the number of visible table rows ==
* <nowiki>$('#selector_id:visible').length;</nowiki>  jQuery v.1.9.1<ref>[http://stackoverflow.com/questions/2931893/jquery-selector-to-count-the-number-of-visible-table-rows jquery selector to count the number of visible table rows? - Stack Overflow]</ref>
* <nowiki>$('#selector_id:not([style*="display: none"])').length;</nowiki> {{exclaim}} jQuery v.1.9.1 + {{IE}} v.8 not work

count the number of all table rows (includes visible and invisible rows)
* <nowiki>document.getElementById( table_id ).rows.length;</nowiki>


== refresh or redirect the webpage ==
* [http://rental.zhupiter.com/postshow_184_1_1.html  轉導、轉向(Redirect)網址的方法. - 諸彼特租屋網] {{access | date=2014-03-18 }}
* alternative: refresh partial content which only required to be updated

== JSON tools ==
JSON schema generator
* {{Gd}} [http://www.jsonschema.net/ JSON schema generator]

JSON validator
* {{Gd}} [https://jsonformatter.curiousconcept.com/ JSON Formatter & Validator] 會標示語法錯誤的地方 {{access | date = 2024-05-15}}
* [http://jsonlint.com/ JSONLint - The JSON Validator] {{access | date = 2015-09-08}}
* [https://jsonviewer.stack.hu/ Online JSON Viewer and Formatter] 語法錯誤只會顯示錯誤訊息「JSON error: Invalid JSON variable」{{access | date = 2024-05-15}}

JSON viewer 通常也包含 validator 功能
* {{Gd}} [http://www.jsondata.ninja/ JSON Data Ninja] {{access | date = 2017-05-24}}
*# 輸入:  文字
*# 可以把 JSON 多筆資料轉成表格格式
*# 有標示某節點下的資料筆數
*# 會將編碼後的中文還原成可讀

* [http://json.parser.online.fr/ Json Parser Online] {{access | date = 2017-05-24}} 
*# 輸入:  文字
*# 沒有顯示成 Tree 結構，但有美化語法方便閱讀
*# 有標示某節點下的資料筆數
*# 會將編碼後的中文還原成可讀

* [http://codebeautify.org/jsonviewer Best Online JSON Viewer, Beautifier, Formatter, Analyser, Minify, Converter] {{access | date = 2017-05-24}} 
*# 輸入:  文字
*# Tree Viewer 顯示結構
*# 有標示某節點下的資料筆數
*# <span style="color: #999;">不會將編碼後的中文還原成可讀</span>

* [https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc JSONView] for {{Chrome}}: beautify the remote JSON file 
*# 輸入: 網址
*# 沒有顯示成 Tree 結構，但有美化語法方便閱讀
*# <span style="color: #999;">沒有標示某節點下的資料筆數</span>
*# 會將編碼後的中文還原成可讀 Unicode/Chinese issue: the garbled Chinese characters will become human readable! 

* [https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop Postman] for {{Chrome}}. [[HTTP request and response data tool]] {{access | date = 2017-06-09}} 
*# 輸入: 網址
*# 沒有顯示成 Tree 結構，但有美化語法方便閱讀
*# <span style="color: #999;">沒有標示某節點下的資料筆數</span>
*# 會將編碼後的中文還原成可讀 

* [https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa JSON Formatter]

* [http://jsonviewer.codeplex.com/ JSON Viewer]  v. 1.2.0.0 解壓縮直接執行 JsonView\JsonView.exe (免安裝即可執行) {{Win}}
** 大檔 (檔案大小 6MB) 測試: 停頓約半分鐘後，即可使用

* [https://notepad-plus-plus.org/ Notepad++] v. 6.8.7 + [https://sourceforge.net/projects/nppjsonviewer/ JSONViewer Notepad++ plugin] v.1.22
** 大檔 (檔案大小 6MB) 測試: 沒有反應超過5分鐘

* [http://youknowone.github.io/VisualJSON/ VisualJSON by youknowone] v. 1.6.0 on {{Mac}}
*# 輸入: 網址或文字
*# 顯示成 Tree 結構
*# 有標示某節點下的資料筆數
*# 會將編碼後的中文還原成可讀


* ''$'' [http://www.cocoajsoneditor.com/ Cocoa JSON Editor - Powerful JSON String Editor for Developers, API, Endpoints, Rest client] v. 1.2.5 on {{Mac}} 
*# 輸入: 文字或檔案
*# Tree Viewer 顯示結構
*# 有標示某節點下的資料筆數
*# 會將編碼後的中文還原成可讀

* ''$'' [http://textlab-app.com/ TextLab] v. 1.3.4 on {{Mac}}
*# 輸入: 文字或檔案
*# 沒有顯示成 Tree 結構，但有美化語法方便閱讀
*# <span style="color: #999;">沒有標示某節點下的資料筆數</span>
*# 會將編碼後的中文還原成可讀

Other tools
* [https://www.planetoid.info/tools/convert_javascript_array_to_php_array/ Convert JavaScript Array to PHP Array]

Editor plugins
* [http://sourceforge.net/apps/mediawiki/notepad-plus/index.php?title=Plugin_Central#J JSON Viewer] [http://nppjsonviewer.sourceforge.net/] for Notepad++
* [http://www.camdemy.com/media/7427 Sublime Text 套件介紹（四）：Pretty JSON]{{access | date=2014-03-11}}

== Performance issue: compression tools, using CDN ==
[[Speed up websites#JavaScript part]]

== troubleshooting steps ==
# Using the javascript library? 
#* Is the function was supported by the version of javascript library? Deprecated?
#* Try to upgrade or downgrade the version of javascript library. Easy to switch the version: [http://jsfiddle.net/ JSFiddle] or [http://jsbin.com/welcome/1/edit JS Bin]
# [[Check Browser Compatibility | Checking browser compatibility]]
# Javascript location: (1)JavaScript in <head> or <body> [http://api.jquery.com/click/ ex: .click()], (2)JavaScript in <input> tag or other DOM elements' tag ex: <button type="button" onclick="myFunction()" id="buttonId">Try it</button><ref>[http://www.w3schools.com/js/js_howto.asp JavaScript How To]</ref>

=== jsfiddle:Uncaught ReferenceError: function_name is not defined ===
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 ==
<references/>

== Further reading ==
# [http://technet.microsoft.com/library/ee198686.aspx Microsoft - Scripting Guidelines]


[[Category:Programming]]
[[Category:Web_Dev]]
[[Category:Javascript]]
[[Category:Design]]