안녕하세요,,, 지금 다른 테이블에서 사료종류에 따라 해당하는 사료명을 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개 / 댓글 3개
* 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 실행코드도 동작하지 않을 가능성도 있기는 합니다만..
여하튼.. 그누보드 원 소스에서 문제가 없었던 '자동저장 관련' 코드 자바스크립트 오류는 별개로 해결해야 됩니다.
답변에 대한 댓글 3개
~.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
아직 개념이 익숙하지 않다면.. 위의 원시적인 방법부터 차근차근 개념을 익혀나가는 방법을 추천하겠습니다.
답변을 작성하려면 로그인이 필요합니다.
그리고 코드 수정은 했는데 사용하시는 방법의 페이지로 가서 해보려고 하는데 잘 이해가 되지 않아서 좀 더 보면서 실행해봐야 할 것 같습니다ㅠㅠㅠ
마르스컴퍼니 님의 말씀은 먼저 파일 디버깅이 되는지 확인해야된다는 말씀이 맞죠?
그 방법대로 따라할때 name에는 write.skin.php가 나와서 그것을 클릭하면 response에서 그 화면처럼 echo값이 나오는게 아니라 write.skin.php코드 전체가 나오더라구요,,,ㅠㅠ
너무 어려운 문제였는데 이렇게 시간내어 답변해주셔서 정말 감사드립니다!!