반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

Ajax 로 checkbox 만들어 넣기

2012. 11. 21. 05:48 | Posted by 솔웅


반응형
Insert checkboxes by Ajax



이전에 했던 것 처럼 checkbox를 HTML 코드에 직접 생성해 넣지 않고 Ajax를 통해서 서버로부터 HTML 코드를 받아오는 방법이 있습니다.


Insert checkboxes 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: </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);

    

    $("input").checkboxradio ();

    $("input").closest ("div:jqmData(role=controlgroup)").controlgroup ();

  }

});  


</script>



checkboxradio () controlgroup () methods 를 사용했습니다.
checkboxradio () method는 <input> and <label> HTML elements를 checkbox (ui-checkbox class)와 연관이 있는 <div>로 변환하는데 사용합니다.  감싸여진 <div> 에서 controlgroup () method를 call 하면 그 checkbox들을 그룹화 할 수 있습니다.



action.php file


<?
$html = "";
$html .= "<div data-role=controlgroup>";
$html .=   "<label for=id1> 1 bedroom </label>";
$html .=   "<input type=checkbox id=id1 name=p1 />";
$html .=   "<label for=id2> 2 bedrooms </label>";
$html .=   "<input type=checkbox id=id2 name=p2 />";
$html .=   "<label for=id3> 3 bedrooms </label>";
$html .=   "<input type=checkbox id=id3 name=p3 />";
$html .=   "<label for=id4> 4 bedrooms </label>";
$html .=   "<input type=checkbox id=id4 name=p4 />";
$html .=   "<label for=id5> 5 bedrooms </label>";
$html .=   "<input type=checkbox id=id5 name=p5 />";
$html .= "</div>";
echo utf8_encode ($html);
?>



action13.php

tistory479_01.html


checkboxradio () controlgroup () methods 를 calling 하면 create evnet 의 triggering 에 의해 replace 될 수 있다는 것을 잘 봐 두세요.  그래서 아래 코드 대신에


Using standard methods of the components (first way)


$("input").checkboxradio ();


$("input").closest ("div:jqmData(role=controlgroup)").controlgroup ();


아래 코드를 사용할 수 있습니다.


Using the create event on the window (2nd way)


$("#home").trigger ("create");


The create event will be received by the document object in jQuery Mobile, and internal treatment of this event searches for HTML elements to transform into jQuery Mobile components. Thus triggering a single create event processes checkboxes and the group that includes them.


create event 는 jQuery Mobile안에 있는 document object 에 의해 receive 될 겁니다. 그리고 이 이벤트는 HTML element를 jQuery Mobile component로 변환하도록 합니다. 그러니까 single create event를 triggering 하면 checkboxes 와 the group 작업을 수행합니다.


반응형