Chapter 11 Form

  • Part I
  • Part II
  • Part III

11.1 Setup

11.1.1 創立Rhtml

在文件開始（在所有r code出現前）貼上

<!--begin.rcode include=FALSE
knitr::opts_chunk$set(echo = FALSE)
end.rcode-->

用來避免html生成後R程式碼還留著。

11.1.2 設定一個有bootstrap4的Rhtml

  • https://getbootstrap.com/

  • 建立基本BS layout

    • 3 columns

    • left one as a control panel with form(s).

    • middle one. put a div element with id=“myResult” to hold our experiment results.

11.1.3 增加after-body JS placeholder

  • 在body最底（即</body>）的上一行增加一個r code chunk, 內容為：
htmltools::includeScript("form.js")

11.1.4 創立一個名為form.js的檔案

可由File > New File > Text file創立並在跳出視窗右下選javascript. 內容可以先放

// 把要在console可看到的變數在此宣告
// var ...; 

// 確保整個html文件DOM已完整才進行js
$(document).ready(function(){



})

在body最底用來確保之後用到jQuery時，jQuery已load進來。

11.1.5 Request JSON

servr::httd()

11.1.6 使用AJAX XMLHttpRequest

//放到global
var requestURL = 'data/SearchShowAction.json'
var myData

//設定準備使用的GET instance
const requestMyJson = new XMLHttpRequest();
requestMyJson.open('GET', requestURL);
requestMyJson.responseType = 'json';

//Asynchronous communication
requestMyJson.onload = function() {
  myData = requestMyJson.response;
}

//送出請求
requestMyJson.send();

11.1.7 使用html5 fetch

//放到global
var requestURL = 'data/SearchShowAction.json'
var myData

fetch('data/SearchShowAction.json')
    .then(response => response.json())
    .then(data => {myData=data})
    .catch(e => console.log('error', e))

11.2 Form的基本元素

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

11.3 Form object

var selectForm = document.forms[index];
var selectFormElement = document.forms[index].elements[index];
// 有value的input
document.forms.myForm.exampleSelect2.value
document.forms["myForm"]["exampleSelect2"].value
// 只能勾選的input只有checked屬性，不會有value
document.forms.myForm.optionsRadios1.checked

$("#exampleSelect2").val()

11.4 Form events

Form element選出後其值不會再改，所以要以onchange, 或jquery change event加在form object上去啟動選值的動作，不要一開始就把這些element選出來。

$("#myForm").change(function(){
    // 要記錄的input值
    
    
  });

11.5 Form and JSON interaction

  • 選單的值決定myData裡那一個表演的showInfo要show在畫面

  • 可以先在R裡探索一下資料，有需要用javascript測試時可以用V8套件。

myData <- jsonlite::fromJSON("https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=6", simplifyDataFrame = F)
library(V8)
myJs <- v8()
myJs$assign("myData", myData) #把R的myData過渡到Js的myData

myJs$eval("myData[0]['showInfo']") # 測試Js
myJs$eval("myData[0]['showInfo'][0]['locationName']")
  • 針對showInfo設置radiobuttons用來選那一場要顯示詳細內容。