Insert a simple table
Ajax를 통해서 text를 가지고 있는 테이블을 삽입하는 방법을 살펴보죠.
아주 간단하게 구현할 수 있습니다.
Insert a table containing text elements 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);
}
});
</script>
Ajax에 의해 call 되는 서버의 action.php file 은 아래와 같습니다.
action.php file
<?
$html = "";
$html .= "<div class=ui-grid-b>";
$html .= "<div class=ui-block-a>Element 1.1</div>";
$html .= "<div class=ui-block-b>Element 1.2</div>";
$html .= "<div class=ui-block-c>Element 1.3</div>";
$html .= "<div class=ui-block-a>Element 2.1</div>";
$html .= "<div class=ui-block-b>Element 2.2</div>";
$html .= "<div class=ui-block-c>Element 2.3</div>";
$html .= "</div>";
echo utf8_encode ($html);
?>
action5.php
tistory443_01.html페이지를 오픈하면 Ajax 가 server 로 call 해서 테이블을 받아오고 이것을 윈도우에 뿌려줍니다. 약간의 시간이 걸릴 수도 있습니다.
Insert a table with buttons
위의 예제에서 조금 변경을 해 보죠. 서버쪽에서 버튼을 가지고 있는 array 를 return 한다고 가정해 봅시다. 예를들어 OK button 과 Delete button을 건네 받을 겁니다.
Insert a table that contains buttons 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>
<style type=text/css>
.ui-btn {
width : 140px;
}
</style>
</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);
$("a").button ();
$(".ui-grid-a").controlgroup ();
}
});
</script>
서버에서 return 되는 <a>
links 들이 버튼으로 변경될 겁니다. 이 때 사용하는 메소드는 button
() method 입니다. 이 버튼들은 controlgroup
() method 로 묶은 후 border 로 둘러싸여질 겁니다. 위에 있는 ui-btn
class 에 의해서 버튼들은 같은 width 를 가지게 됩니다.
action.php file
<?
$html = "";
$html .= "<div class=ui-grid-a data-type=horizontal>";
$html .= "<div class=ui-block-a style=text-align:right>";
$html .= "<a href=#> OK </a>";
$html .= "</div>";
$html .= "<div class=ui-block-b>";
$html .= "<a href=#> Delete </a>";
$html .= "</div>";
$html .= "</div>";
echo utf8_encode ($html);
?>
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 다이나믹하게 input field 생성하기 (0) | 2012.11.07 |
|---|---|
| 테이블 manipulation 예제 (0) | 2012.11.06 |
| 테이블에서 이벤트 다루기 (0) | 2012.11.06 |
| 다이나믹하게 새 row 를 insert 하기 (0) | 2012.11.06 |
| 다이나믹하게 새로운 컬럼 insert 하기 (0) | 2012.11.06 |
| HTML element 를 jQuery Mobile table 로 변환하기 (0) | 2012.11.02 |
| 다이나믹하게 테이블 생성하기 (0) | 2012.11.02 |
| 버튼 관련 예제 파일 들 (0) | 2012.10.31 |
| 버튼 Customize 하기 (0) | 2012.10.31 |
| 버튼에서 발생하는 이벤트 관리하기 (0) | 2012.10.30 |