개발 Q&A

제목 ajax결과를 보여주는 과정에 대한 질문입니다...^^
카테고리 JavaScript
글쓴이 blendo 작성시각 2017/09/17 21:00:42
댓글 : 1 추천 : 0 스크랩 : 0 조회수 : 9636   RSS

값이 넘어온 것은 확인했습니다.

view에서,

<?php

if(isset($result)){   

echo (" <div id='epi_postscript'> ");

$y=1;

foreach($result as $row){

    echo (" <div class='epiPostscript_slide'> ");

// 페이지가 로드될 때 .tab과 .panel을 가진 .epiPostscript_slide 리스트가 보이게 한 후,

// .tab을 클릭하면 ajax된 결과가 .panel에 들어가 보이게 했습니다.

    echo ("     <div class='tab' data-panel_num='".$y."' data-epi_num='".$row->epi_num."'>

                     <div class='new_epiInfo'><small>".$row->title."</small><span class='colon'> : </span><b>".$row->episode."</b>                        </div>

                     <div class='epi_date'>".$row->postscript_date."</div>

                 </div>

                 <div class='panel panel_".$y." none'>

                 </div>

    ");

    echo (" </div><!-- .epiPostscript_slide --> ");

    $y++;

}

echo (" </div><!-- #epi_postscript --> ");

?>

 

// 이제 .tab을 클릭하면 ajax합니다.

<script>

var panel_num;

$('.epiPostscript_slide .tab').unbind().click(function(){

    if($(this).siblings('.panel').hasClass('block')){

         $(this).siblings('.panel').removeClass('block').addClass('none');

    }else{

          $(this).siblings('.panel').removelClass('none').addClass('block');

    }

    var epi_num=$(this).attr('data-epi_num');

    panel_num=$(this).attr('data-panel_num');

    var data='epi_num='+epi_num;

    $.ajax({

        url : '.......'+data,

        type : 'GET',

        success : function(result){

             makeEpiInfo(JSON.parse(result));

        }

    });

});

function makeEpiInfo(data){

     var panel=document.getElementsByClassName('panel_'+panel_num);

     var epi_poster=document.createElement('div'); epi_poster.innerHTML=data['내용'];

     panel.appendChild(epi_poster);    

// 요기서 에러가 납니다.

// appendChild()는 함수가 아니라는 내용의 에러더군요.

// .panel은 빈 채로 아무것도 없습니다. 

// 어떻게 하면 makeEpiInfo()의 결과로 된 html을 .panel 안으로 들어가게 할 수 있을까요....^^?

 

}

답변에 대한 답변의 방법이 없어서 여기에 글을 추가합니다......

console.log(data);로 확인했습니다.

data는 잘 넘어왔습니다. 문제는 panel로 어펜드가 되지 않는 것입니다.

Object HTMLDivElement와 object HTMLCollection의 차이가 무엇인가요?

저 panel은 object HTMLCollection으로 나오는데.... 

 

고유한 클래스 이름이라 인덱스가 필요없는 줄 알았는데, 아니네요.

getElementsByClassName()으로 가져왔으니

panel[0] 으로 사용하면 되는 듯 합니다..... 감사합니다...^^

 다음글 DB에 새로운 정보가 UPDATE되면 이메일로 알려줄수... (2)
 이전글 awstats 설치 후 확인 방법 질문입니다. (2)

댓글

kaido / 2017/09/18 09:06:13 / 추천 0

dataType: "json",   추가해 주셔야 합니다.

그래야 json 타입으로 가져옵니다.

디폴트는 text 입니다.

 

거기에 data 를 JSON.parse() 하시지 않아도 데이터를 객체로 리턴해서 사용 가능합니다.

 

ajax 메뉴얼을 다시 한번 살펴 보셔야 할것 같습니다.