이제 서버에서 HTML 을 받아와서 single line input field와 multiline input field 를 만드는 것을 해 보겠습니다. 그리고 result 도 해당 content에 넣어보겠습니다.
Insert input fields 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>
<p> Window content </p>
</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);
$(":text").textinput ();
$("textarea").textinput ();
$("[type=search]").textinput ();
}
});
</script>
input field 와 관계 된 element 에 textinput
() method가 있는 것을 잘 보세요. 이 메소드가 input field 모양으로 변환시켜주는데 필요한 메소드 있니다. 이 메소드가 없으면 jQuery Mobile 다운 input field 가 만들어지지 않습니다.
action.php file
<?
$html = "";
$html .= "Name : <input type=text value=Sarrion /> <br />";
$html .= "Description : <textarea>Nice studio for renovation </textarea> <br />";
$html .= "Search : <input type=search value=Name />";
echo utf8_encode ($html);
?>
|
|
|
|
action7.php
tistory453_01.html
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 다이나믹하게 selection list 생성하기 (0) | 2012.11.11 |
|---|---|
| input field 관련 예제들 (0) | 2012.11.10 |
| Input field 를 customize 하기 (0) | 2012.11.10 |
| input field에서 이벤트 관리하기 (0) | 2012.11.09 |
| input field 에 값 할당하기 (0) | 2012.11.09 |
| HTML element 를 jQuery Mobile 의 input field로 변환하기 (0) | 2012.11.07 |
| 다이나믹하게 input field 생성하기 (0) | 2012.11.07 |
| 테이블 manipulation 예제 (0) | 2012.11.06 |
| 테이블에서 이벤트 다루기 (0) | 2012.11.06 |
| 다이나믹하게 새 row 를 insert 하기 (0) | 2012.11.06 |