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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

Ajax 로 radio 버튼 insert 하기

2012. 11. 28. 21:28 | Posted by 솔웅


반응형
Insert radio buttons by Ajax


이전 글에서 처럼 Radio 버튼을 HTML 코드로 곧바로 생성하는 것 대신에 Ajax를 통해서 서버로부터 HTML 코드를 받는 방법도 있습니다.


Insert radio 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>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <span> Choose the number of rooms: </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> <label> elements 들을 jQuery Mobile 의 radio button 형식인 radio button (class ui-radio) 이 적용되는 <div> element 로 HTML 코드를 바꿔 줍니다. wrapping <div> element에서 controlgroup () method 를 call 한 것은 single visual set 로 radio 버튼을 그룹화 할 수 있도록 합니다.



action.php file


<?
$html = "";
$html .= "<div data-role=controlgroup>";
$html .=   "<label for=id1> 1 </label>";
$html .=   "<input type=radio id=id1 name=rooms />";
$html .=   "<label for=id2> 2 </label>";
$html .=   "<input type=radio id=id2 name=rooms />";
$html .=   "<label for=id3> 3 </label>";
$html .=   "<input type=radio id=id3 name=rooms />";
$html .=   "<label for=id4> 4 </label>";
$html .=   "<input type=radio id=id4 name=rooms />";
$html .=   "<label for=id5> 5 </label>";
$html .=   "<input type=radio id=id5 name=rooms />";
$html .= "</div>";
echo utf8_encode ($html);
?>



action16.php


tistory492_01.html


checkboxradio () controlgroup () method 를 call 하는 대신에
create event를 triggering 함으로서 이 기능을 대신 할 수도 있습니다.


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");


반응형