CodeigniterAJAX dropdown 복합예제
dropdown 을 복합적으로 사용하는 예제이다. javascript 는 에러가 나더라도 오류메시지를 보여주지 않기 때문에 디버깅하기가 까다롭다. 특히 오타가 나는 경우에는 정말 찾아내기 힘들다. 개발자 모드의 console 과 access 로그를 활용해서, 각 단계별로 전달이 되는지를 확인 하는 것이 필요하다.
복합적으로 dropdown 을 한다고 하는 경우, 이전의 예제와 다른 점은 없으나 네이밍 하는 경우 어떻게 연결되어지는지를 구분하는것이 중요하다.
그부분을 중점적으로 정리.
우선 ajax 를 구동하고, 결과를 받는 view 페이지가 가장 중요하다. controller 와 model 은 기존과 동일함.
(주) 만약에 로컬시스템을 사용하기 때문에 jquery 스크립트를 로컬서버에 설치할 경우에는 js 파일을 직접 받아서 (브라우저에 표시된 텍스트를 저장하지 말고) 해당 위치에 존재시키는 것이 필요하다.
view/pilgrim_creat.php
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#church_search').click(function() {
$("#churchs > option").remove();
var church_key = $('#church_text').val();
$.ajax({
type: "POST",
url: "/index.php/churchs/get_name/" + church_key,
success: function(c_result)
{
$.each(c_result, function(cid, cname)
{
var opt = $('<option />');
opt.val(cid);
opt.text(cname);
$('#churchs').append(opt);
});
}
});
});
})
// ]]>
</script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#partner_search').click(function() {
$("#partners > option").remove();
var partner_key = $('#partner_text').val();
$.ajax({
type: "POST",
url: "/index.php/pilgrims/get_name/" + partner_key,
success: function(p_result)
{
$.each(p_result, function(pid, pname)
{
var opt = $('<option />');
opt.val(pid);
opt.text(pname);
$('#partners').append(opt);
});
}
});
});
})
// ]]>
</script>
<meta charset="utf-8">
<title>GFMC</title>
<body>
<div id="container">
<h1>Create to PILGRIM.</h1>
<div id="body">
<?php echo validation_errors(); ?>
<?php echo form_open('pilgrims/create') ?>
<label for="name">성명: </label>
<input type="input" name="name" /><br />
<label for="sex">성별: </label>
남자 <input type="radio" name="sex" value="F" checked /> / 여자 <input type="radio" name="sex" value="F" /><br />
<label for="life_partner_1">배우자 : </label>
<input type="input" name="partner_text" /> <input type="button" id="partner_search" value="검색">
<?php $partners['#'] = 'Please Select'; echo form_dropdown('life_partner', $partners, '#', 'id="partners"'); ?><br />
<label for="birthday">생년월일 : </label>
<input type="input" name="birthday" /><br />
<label for="marrige_date">결혼기념일 : </label>
<input type="input" name="marrige_date" /><br />
<label for="address">주소 : </label>
<input type="input" name="address" /><br />
<label for="church_1">교회 : </label>
<input type="input" id="church_text" /> <input type="button" id="church_search" value="검색">
<?php $churchs['#'] = 'Please Select'; echo form_dropdown('church_id', $churchs, '#', 'id="churchs"'); ?><br />
<label for="pasture">목장 : </label>
<input type="input" name="pasture" /><br />
<label for="phone_no">전화번호 : </label>
<input type="input" name="phone_no" /><br />
<input type="submit" name="submit" value="Create Pilgrim" />
</form>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</body>
</html>
각 네이밍 id 에 대한 연관관계 도식도. jqeury 는 id 로 정의된 내용을 중심으로 데이터의 교환이 이루어 진다는 것에 유의해야 한다. church 명을 가져오는 것에 대한 ajax 도식도 이다.
실행예제
