개발 Q&A

제목 JQuery에서 Input(Radio Type) 클릭 시 View 하단에 메세지 출력
글쓴이 밥보남편 작성시각 2012/07/24 17:21:47
댓글 : 2 추천 : 0 스크랩 : 0 조회수 : 24612   RSS
지난 주에 Code Igniter를 접하고, DB 연결부터 기본적인 튜토리얼 따라서 어느 정도 화면은 만들어 냈는데,
Ajax 부분은 제가 필요한 예제를 접할 수가 없어서 엄청나게 헤매고 있습니다.

기능은 매우 단순한데..

View에 있는 Radio 버튼을 클릭하면 'Y' 인지 'N' 인지 즉시 판단해서
View 화면 하단에 있는 <div id="chk_message"></div> 에 "A메세지" or "B메세지"를 뿌려주는 겁니다.

Code를 보여 드리면, View는 아래와 같이 작성했구요
<script src="<?php echo base_url(); ?>application/js/jquery-1.7.2.js" type="text/javascript"></script>
 <script src="<?php echo base_url(); ?>application/js/securityreport.js" type="text/javascript"></script>

<?php echo validation_errors();?>
  
  <?php echo form_open('c=SecurityClearanceReport'); ?>
  <table class="check_tbl">
   <tr><th class ="c1">번호</th><th>내용</th><th width="100px">점검결과</th></tr>
   <tr><td class ="c1">1</td><td class="c2">내용 </td><td class="c1"><input type="radio" id="chk_1" name="chk_1" value="Y"  /><?php echo form_radio('chk_1','Y')?>네<?php echo form_radio('chk_1','N',TRUE)?>아니오</td></tr>
   <tr><td class ="c1">2</td><td class="c2">내용 </td><td class="c1"><?php echo form_radio('chk_2','Y')?>네<?php echo form_radio('chk_2','N',TRUE)?>아니오</td></tr>
   <tr><td class ="c1">3</td><td class="c2">내용 </td><td class="c1"><?php echo form_radio('chk_3','Y')?>네<?php echo form_radio('chk_3','N',TRUE)?>아니오</td></tr>
   <tr><td class ="c1">4</td><td class="c2">내용 </td><td class="c1"><?php echo form_radio('chk_4','Y')?>네<?php echo form_radio('chk_4','N',TRUE)?>아니오</td></tr>
   <tr><td class ="c1">5</td><td class="c2">내용 </td><td class="c1"><?php echo form_radio('chk_5','Y')?>네<?php echo form_radio('chk_5','N',TRUE)?>아니오</td></tr>
   <tr><td class ="c1">6</td><td class="c2">내용 </td><td class="c1"><?php echo form_radio('chk_6','Y')?>네<?php echo form_radio('chk_6','N',TRUE)?>아니오</td></tr>
   <tr><td class ="c1">6-1</td><td class="c2">내용 </td><td class="c1"><?php echo form_radio('chk_7','Y')?>네<?php echo form_radio('chk_7','N',TRUE)?>아니오</td></tr>
   <tr><td class ="c1">6-2</td><td class="c2">내용 </td><td class="c1"><?php echo form_radio('chk_8','Y')?>네<?php echo form_radio('chk_8','N',TRUE)?>아니오</td></tr>
   <tr><td class ="c1">6-3</td><td class="c2">내용 </td><td class="c1"><?php echo form_radio('chk_9','Y')?>네<?php echo form_radio('chk_9','N',TRUE)?>아니오</td></tr>
   <tr><td class ="c1">6-4</td><td class="c2">내용 </td><td class="c1"><?php echo form_radio('chk_10','Y')?>네<?php echo form_radio('chk_10','N',TRUE)?>아니오</td></tr>
   <tr><td class ="c1">7</td><td class="c2">내용 </td><td class="c1"><?php echo form_radio('chk_11','Y')?>네<?php echo form_radio('chk_11','N',TRUE)?>아니오</td></tr>
  </table>

Controller는 이렇게
 public function ChkSecurity() {
  $chkResult = trim($_POST['chk_flag']);
  if ($chkResult == 'Y'){
   echo '데이터 수신!!';
  } else {
   echo '데이터 수신2!!';
  }

스크립트는 이렇게 튜토리얼 보고 만들고 있습니다...
$(document).ready(function() {

 
 $('input[name=chk_1]:radio').click(function() {  
  
//  if (this.val == 'Y') {
  //alert('확인!');
//   $('#security_result').text("메세지1");
//  } else {
//   alert('확인!')
//   $('#security_result').text("메세지2");
//  }
  
  
  var chk_flag = this.val();

  //event.preventDefault();
 });

 /*
    $.post('/index.php/SecurityClearanceReport/ChkSecurity',
           { 'chk_flag':chk1_value },
           // when the Web server responds to the request
           function(result) { }
         );
         */
 
 $.ajax({
  url:"/index.php/SecurityClearanceReport/ChkSecurity"+chk_flag;
 });

});

이 구조들에 대해서 이해만 하면... 크게 어렵지 않을 것 같은데, 아직 CI Framework와 JQuery 라는 생소한 두 가지를 접하면서 제가 원하는 기능이 있는 튜토리얼을 못찾으니 쉽지가 않네요.

고수님들의 도움 부탁드립니다.
 다음글 phpdesigner 줄 자동 맞춤 키가 뭐인가요? (1)
 이전글 근무시간 계산하는 방법에 대한 조언을 구합니다! (5)
목록

댓글

한대승(불의회상) / 2012/07/24 17:51:18 / 추천 0
 $('#...').load() 라는 편리한 함수가 있습니다만.. ^^
지면상 자세한 설명은 생략 하겠습니다. ^^


http://api.jquery.com/load/
밥보남편 / 2012/07/25 07:08:37 / 추천 0
불의회상님 답변 감사합니다.
Load 라는 함수를 써서도 가능할 듯 보이나, CI Framework 내에서 이용하는 방법은 없나요?
그리고 이해는 하겠는데, 예제가 빈약해서 따라하기가 쉽지 않네요.. ^^;