Examples of manipulation of selection lists
Communicate the value of a selection list on the server by Ajax
이번에 만들 selection list 는 먼저 아파트 type 을 정하고 이것을 서버로 보내서 그에 대한 response 를 받는 로직입니다. 우리는 그 response 를 window 에 display 할 겁니다.
Transmit
the type of apartment 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> Choose an apartment type: </span>
<select data-native-menu=false>
<optgroup label=Basic>
<option value=1> 1 bedroom </option>
<option value=2> 2 bedrooms </option>
<option value=3> 3 bedrooms </option>
</optgroup>
<optgroup label=Premium>
<option value=4> 4 bedrooms </option>
<option value=5> 5 bedrooms </option>
</optgroup>
</select>
</div>
</div>
</body>
</html>
<script>
$("select").bind ("change", function (event)
{
var type = $(this).val ();
$.ajax (
{
url : "action.php",
data : { type : type },
complete : function (xhr, result)
{
if (result != "success") return;
var response = xhr.responseText;
$("#home div:jqmData(role=content)").append (response);
}
});
});
</script>
서버에 아파트 type 을 보내기 위해 change event 를 사용합니다. 그러니까 selection list 에 어떤 change 가 일어날 때만 정보가 전달 될 겁니다. 서버로부터 받은 response 는 append
(response)를 사용해서 window에 삽입됩니다.
action.php
file
<?
$type = $_REQUEST["type"];
echo utf8_encode ("<p> The type of apartment is $type </p>");
?>
몇번 아이템을 선택하고 나면 아래와 같은 화면이 될 겁니다.
Use a submit button to transmit information
서버의 response를 display 하기 위해서 Ajax 메카니즘을 사용하는 대신에 form 을 validate 하고 서버에서 return 된 선택된 리스트 아이템의 값을 가지고 있는 값을을 새 window 에 display 할 수도 있을 겁니다.
Pass
the value of the selected item when clicking the OK button
<!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>
<form action=action.php>
<span> Choose an apartment type: </span>
<select data-native-menu=false name=type>
<optgroup label=Basic>
<option value=1> 1 bedroom </option>
<option value=2> 2 bedrooms </option>
<option value=3> 3 bedrooms </option>
</optgroup>
<optgroup label=Premium>
<option value=4> 4 bedrooms </option>
<option value=5> 5 bedrooms </option>
</optgroup>
</select>
<input type=submit value=OK>
</form>
</div>
</div>
</body>
</html>
<script>
</script>
name
attribute 를 <select>
element 에 추가했습니다. 그래서 selected value 는 form validation으로 해서 전송 됩니다.
action.php
file
<?
$type = $_REQUEST["type"];
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />
</head>
<body>
<div data-role=page id=win2 data-add-back-btn=true>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> Selected apartment : <?= $type ?> </p>
</div>
</div>
</body>
</html>
Add a list item after a click of a button
이제 dynamically 삽입된 new element를 display 하겠습니다. 새 element 는 id 가 add인 버튼을 클릭하면 되도록 만들겠습니다.
Add
an item to the selection list after clicking a button
<!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> Choose an apartment type: </span>
<select data-native-menu=false>
<option value=1> 1 bedroom </option>
<option value=2> 2 bedrooms </option>
<option value=3> 3 bedrooms </option>
<option value=4> 4 bedrooms </option>
<option value=5> 5 bedrooms </option>
</select>
<a href=# data-role=button id=add>
Add "6 bedrooms" to the list </a>
</div>
</div>
</body>
</html>
<script>
$("#add").bind ("click", function (event)
{
$("select").append ("<option value=6> 6 bedrooms </option>");
$("select").selectmenu ("refresh");
});
</script>
tistory476_03.html
Make a treatment when clicking on any element of the selection list
change event는 selection list 의 어떤 값들이 바뀔 경우에만 적용이 됩니다. 유저가 이미 선택한 아이템을 선택한다면 이 change event 는 발생하지 않을 겁니다.
만약에 아이템을 click 했을 때를 기준으로 뭔가를 할 수 있다면 좋겠죠? 아래 예제에서는 클릭했을 때 그 리스트 아이템을 보여 줄겁니다. 이 경우에는 그 아이템이 현재 선택 된 아이템이라도 이벤트가 발생할 겁니다.
Display
the content of the item clicked
<!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> Choose an apartment type: </span>
<select data-native-menu=false>
<optgroup label=Basic>
<option value=1> 1 bedroom </option>
<option value=2> 2 bedrooms </option>
<option value=3> 3 bedrooms </option>
</optgroup>
<optgroup label=Premium>
<option value=4> 4 bedrooms </option>
<option value=5> 5 bedrooms </option>
</optgroup>
</select>
</div>
</div>
</body>
</html>
<script>
$("select").bind ("selectmenucreate", function ()
{
$(".ui-li:not(.ui-li-divider)").live ("vclick", function (event)
{
alert ($(this).find ("a").text ());
event.stopPropagation ();
});
});
</script>
tistory476_04.html
자바스크립트가 몇 줄 안되지만 좀 설명할 부분이 있습니다. 일단 리스트가 생성될 때까지 기다려야 합니다. (selectmenucreate event). 그렇지 않으면 HTML 코드는 jQuery Mobile 에 의해 전환되기 전이 됩니다. 그리고 jQuery Mobile 에 의해 생성된 <li>
elements 들이 아직 DOM tree 에 있는 상태가 아니게 되는 거죠.
selector "ui-li:not
(.ui-li-divider)"는 리스트 아이템입니다. (separator 가 아니죠). bind
() method 대신 live
() method 를 사용하는 것은 jQuery Mobile 이 아이템이 select 됐을 때 온전하게 다시 display 하도록 하기 위해서 입니다. 만약 bind
()를 click 이벤트는 오직 첫번째 selection 에서만 적용이 될 겁니다.
마지막 단계에서는 jQuery Mobile 에 의해 만들어진 <a>
item 을 retrieving 함으로서 선택된 아이템의 내용을 display 하게 됩니다.
event.stopPropagation
() instruction 은 click 이 여러번 인식되는 것을 방지합니다.
이제 우리가 4 bedrooms을 선택하면 alert 화면에 4 bedrooms라는 메세지가 display 됩니다.
(제 경우에 저 위의 예제는 잘 안되네요. 어떨 때 될 때도 있는데... 혹시 이 예제가 왜 잘 안되는지 아시는 분은 댓글로 좀 알려 주세요.)
선택된 아이템 내용을 retrieve 하는 것보다 그 value 를 다룰 수도 있습니다. 해당 <option>
element 에 있는 value
attribute 를 표시할 수도 있습니다.
Retrieve
the value of the selected item (only if the list is closed)
alert
($("select").val ()); // Displays "4"
action13.php
