Ajax로 switch 삽입하기
HTML 이나 JavaScript 를 직접 사용해서 switch 를 만드는 것 보다 Server 쪽에 Ajax를 요청하고 응답을 받아서 만들 수 있습니다.
Create a switch by Ajax
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Would you like an apartment: </span>
</div>
</div>
</body>
</html>
<script>
$.ajax (
{
url : "action.php",
complete : function (xhr, result)
{
if (result != "success") return;
var response = xhr.responseText;
$("#home div:jqmData(role=content)").append (response);
$("select").slider ();
}
});
</script>
slider
() method는 switch 와 관련된 <select>
element 에서 사용되고 서버로부터 switch를 display 할 HTML 코드를 받아서 HTML 코드를 변환시켜주는 역할을 합니다. 만약 이 메소드가 call 되지 않으면 simple selection list (<select>
element 에 해당하는)가 display 됩니다.
action.php file
<?
$html = "";
$html .= "<select data-role=slider>";
$html .= "<option value=no> No </option>";
$html .= "<option value=yes> Yes </option>";
$html .= "</select>";
echo utf8_encode ($html);
?>
|
|
action19.php
tistory504_01.html