다른 테이블 데이터 조건문별로 가져오기
본문
안녕하세요,,, 지금 다른 테이블에서 사료종류에 따라 해당하는 사료명을 ajax를 사용하여 가져오려고 하고 있습니다! 그런데 아직 ajax 사용법이 서툴러 어떻게 수정해야할지 감을 잡지 못하고 있습니다..
바쁜 시간 중에 잠깐만 한번씩 잘못된 부분을 집어주시면 좀 더 기본을 다지고 공부하는데 정말 큰 도움이 될 것 같습니다!!ㅠㅠㅠ
제가 하고 싶은 방식은
이런식으로 하나를 선택하면 분말사료 데이터가 쭉 나와 선택할 수 있도록 만드는 것을 최종 목표로 하고 제작하고 있습니다!!
write.skin.php
<div class="bo_w_tit write_div">
<table>
<tbody>
<tr>
<th><label for="wr_2">사료종류</label>
<td>
<?php
$sql = "select * from g5_write_code_feed GROUP BY wr_1";
$result = sql_query($sql);
$feed_name=array();
while($row=sql_fetch_array($result)){
$feed_name[]=$row['wr_1'];
}
?>
<select class="required" style="height:40px; width:100px; border: 1px solid #d6d6d6;" name="wr_2" id="wr_2">
<?php for($x=0; $x<sizeof($feed_name); $x++){?>
<option value="<?php echo $feed_name[$x]?>" <?php echo ($write['wr_2'] == $feed_name) ? " selected" : "";?>><?php echo $feed_name[$x]?></option>
<?php }?>
</select>
</td>
<th><label for="wr_subject">사료명</label></th>
<td>
<select class="cascade" id="state">
<option value="">Select country first</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#wr_2').on('change', function(){
var feedId = $(this).val();
if(feedId){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'wr_2='+feedId,
success:function(data){
$('#state').html(data);
}
});
}else{
$('#state').html('<option value="">Select country first</option>');
}
});
$('#state').on('change', function(){
var stateID = $(this).val();
if(stateID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'wr_subject='+stateID,
success:function(html){
}
});
}
});
});
</script>
</td>
ajaxData.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if(!empty($_POST["wr_2"])){
// Fetch state data based on the specific country
$query = "SELECT * FROM g5_write_code_feed WHERE wr_1 = ".$_POST['wr_2']."";
$result = sql_query($query);
// Generate HTML of state options list
if($result->num_rows > 0){
echo '<option value="">Select State</option>';
while($row=sql_fetch_array($result)){
echo '<option value="'.$row['wr_subject'].'">'.$row['wr_subject'].'</option>';
}
}else{
echo '<option value="">State not available</option>';
}
}
?>
<form action="" method="post">
<!-- Country dropdown -->
<select id="wr_2" name="country">
<option value="">Select Country</option>
</select>
<!-- State dropdown -->
<select id="state" name="state">
<option value="">Select state</option>
</select>
<input type="submit" name="submit" value="Submit"/>
</form>
<?php
if(isset($_POST['submit'])){
echo 'Selected Country ID: '.$_POST['wr_2'];
echo 'Selected State ID: '.$_POST['state'];
}
?>
현재까지 수정된 코드는 이렇게 됩니다.
그리고 저는 g5_write_code_feed 테이블에 있는 이 두 필드의 데이터들을 가져와 만들려고 하고 있습니다.
이것들을 g5_write_purchase_feed에 각 wr_2와 wr_subject에 저장할 계획입니다.
아직 부족한게 많아 감을 잡지 못하고 잘못된 방향으로 가는 경우가 많은데 고수님들이 알맞은 방향을 잡아 나갈 수 있도록 많은 도움 부탁드립니다1!
수정
<td>
<select class="cascade" id="state">
<option value="">Select country first</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function feedNameChange(){
console.log("값확인중")
}
$(document).ready(function(){
$('#wr_2').on('change', function(){
var feedId = $(this).val();
console.log(feedId);
if(feedId){
$.ajax({
type:'POST',
dataType: 'html',
url:'http://localhost/theme/basic/skin/board/purchase_feed/ajaxData.php',
data:'wr_2='+feedId,
success:function(html){
$('#state').html(html);
console.log(html);
}
});
}else{
$('#state').html('<option value="">Select country first</option>');
}
});
현재 ajaxd의 url을 수정해보았고 값이 어디까지 잘 넘어가고 있는지 확인하고 있습니다.
확인결과 success function 안까지 값은 나오는데 ajaxData.php로 화면이 넘어가지 않는 것 같다고 생각했습니다.
<?php
include_once('./_common.php');
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가?>
<script>
console.log("값이 넘어오는 지 확인 중");
</script>
<?
if(!empty($_POST['feedId'])){
// Fetch state data based on the specific country
$query = "SELECT * FROM g5_write_code_feed WHERE wr_1 = ".$_POST['feedId']."";
$result = sql_query($query);
// Generate HTML of state options list
if($result->num_rows > 0){
echo '<option value="">Select State</option>';
while($row=sql_fetch_array($result)){
echo '<option value="'.$row['wr_subject'].'">'.$row['wr_subject'].'</option>';
}
}else{
echo '<option value="">State not available</option>';
}
}
?>
ajaxData.php를 보면 console.log("값이 넘어오는지 확인중"); 을 집어넣었는데 화면에 나오지 않아 ajaxData.php에 접근조차 못하고 있다고 생각이 들었습니다!!ㅠㅠ
작업관리자 에러는
이런식으로 나옵니다퓨ㅠㅠ
항상 시간내주어 조언해주심에 정말 감사드립니다!!
답변 1
* ajaxData.php
1) data:'wr_2='+feedId, 형태로 넘겼기 때문에 wr_2 변수로 받아야 됩니다.
if(!empty($_POST['feedId'])){
=>
if(!empty($_POST['wr_2'])){
2)
<script>
console.log("값이 넘어오는 지 확인 중");
</script>
는 삭제하는게 맞을 것 같습니다.
ajax 로 처리되는 파일에서도 콘솔 로그가 적용되는지 잘 모르겠지만,
제가 사용하는 방법은 다음과 같습니다. https://sir.kr/g5_tip/16118
* 현재 자바스크립트 오류는 그누보드의 '자동저장 기능'과 관련된 자바스크립트 오류입니다.
지금 처리하는 것과 별개의 오류입니다.
물론, 해당 오류로 인해 ajax 실행코드도 동작하지 않을 가능성도 있기는 합니다만..
여하튼.. 그누보드 원 소스에서 문제가 없었던 '자동저장 관련' 코드 자바스크립트 오류는 별개로 해결해야 됩니다.
알려주신 덕분에 저는 자동저장기능은 필요없어서 삭제했더니 더이상 오류는 나오지 않습니다!
그리고 코드 수정은 했는데 사용하시는 방법의 페이지로 가서 해보려고 하는데 잘 이해가 되지 않아서 좀 더 보면서 실행해봐야 할 것 같습니다ㅠㅠㅠ
마르스컴퍼니 님의 말씀은 먼저 파일 디버깅이 되는지 확인해야된다는 말씀이 맞죠?
그 방법대로 따라할때 name에는 write.skin.php가 나와서 그것을 클릭하면 response에서 그 화면처럼 echo값이 나오는게 아니라 write.skin.php코드 전체가 나오더라구요,,,ㅠㅠ
너무 어려운 문제였는데 이렇게 시간내어 답변해주셔서 정말 감사드립니다!!
ajax 처리파일의 원시적인 디버깅 방법은, 브라우저에서 직접 접속해보는 방법이 있습니다.
~.com/ajax_proc.php?wr_1=aa&wr_2=bb
원하는 값이 출력되는지 디버깅/테스트해볼 수 있습니다.
단 이렇게 디버깅하려면.. ajax_proc.php 에서 $_POST 변수로는 받지 못하고 $_GET 변수로만 받을 수 있습니다. ajax_proc.php 에서 받는 변수를 임시로 $_GET 또는 $_REQUEST 로 변경후 테스트가 완료되면 $_POST 로 변경하면 되지만.. 번거롭겠죠..
그래서 나온 방법이 크롬의 개발자도구를 사용한 방법인데.. https://sir.kr/g5_tip/16118
아직 개념이 익숙하지 않다면.. 위의 원시적인 방법부터 차근차근 개념을 익혀나가는 방법을 추천하겠습니다.
마지막까지 도움주셔서 감사합니다!!
