질문Q #2734
ajax 페이지 setinterval 로 이미지 5초 단위 교체시 질문드립니다.
안녕하세요.
초보 웹 개발자 입니다.
이것 저것 시도해 보다가 결국은 이 곳으로 발길을 돌렸습니다.
CI 질문 인지 CI 외 질문인지 고민하다가 이곳에 글을 남깁니다.
고수님들 답변 부탁드려요.
-------------------------------------------------------------------------------------------
현재 View 에서 'click' 이벤트가 일어나면 클릭된 해당 list에 해당하는 index 값이
js 파일을 거쳐 해서 controller 단으로 넘어오고 이 index 값을 model 로 넘긴 후
해당하는 데이터 값들만 controller 단으로 다시 가져온 뒤 view 단으로 2차 배열 형식으로 넘겨주어
보여주는 형태입니다.
-----------------------------------------------------------------------------------------------
각각의 'click' 이벤트마다 화면 reload 없이 일부만 수정되어야 하기에 ajax를 썻는데요.
index 값까지 정확하게 넘어와서 모두 출력이 완료 됩니다.
------------------------------------------------------------------------------------------------
여기서 문제가 생겼는데요.
<img src = "<? echo $img->index; ?>.png" /> 로 이미지를 보여주는 형식인데
setInterval을 어디에 먹여도 이미지가 교체가 안되는 겁니다. ㅠㅠ
참고로 이미지 이름은 32.png 라면 32.png로 이름은 동일하게 그림은 다르게 수동으로 바꿔줘봤거든요.
setinterval은 발생하구요. index 값도 controller로 잘 넘어옵니다.
아래는 소스 코드 입니다.
--------------------------------------------------------------------------------------------------------------------
js 파일 이구요. 사용자가 li 를 클릭하면 li안에 있는 hidden input에 값을 덮어씌우고
selIndex 변수에 넣은 뒤 보시는 대로 jquery ajax로 selIndex 값을 post 형식으로 넘겨 줍니다.
이런 식으로 받아와서 db 쿼리한뒤
view 단으로 2차 배열에 넣어서 넘겨줍니다.
답답해서 고정값으로도 넘겨보았습니다.
이것이 뷰인데요.
이런 식으로 값을 보여주게 됩니다.
실제로 오류 없구요. image도 다 잘 보입니다.
다만 저 '15.png' 라는 이미지를 교체해주면
클릭시 비동기화 되어 보여야할 이미지가 교체하기전 이미지를 계속 불러 온다는 겁니다. ㅠㅠ
기초가 부족해서 잘 모를 수도 있습니다. ㅠㅠ
한수 부탁드립니다. ㅠㅠ
초보 웹 개발자 입니다.
이것 저것 시도해 보다가 결국은 이 곳으로 발길을 돌렸습니다.
CI 질문 인지 CI 외 질문인지 고민하다가 이곳에 글을 남깁니다.
고수님들 답변 부탁드려요.
-------------------------------------------------------------------------------------------
현재 View 에서 'click' 이벤트가 일어나면 클릭된 해당 list에 해당하는 index 값이
js 파일을 거쳐 해서 controller 단으로 넘어오고 이 index 값을 model 로 넘긴 후
해당하는 데이터 값들만 controller 단으로 다시 가져온 뒤 view 단으로 2차 배열 형식으로 넘겨주어
보여주는 형태입니다.
-----------------------------------------------------------------------------------------------
각각의 'click' 이벤트마다 화면 reload 없이 일부만 수정되어야 하기에 ajax를 썻는데요.
index 값까지 정확하게 넘어와서 모두 출력이 완료 됩니다.
------------------------------------------------------------------------------------------------
여기서 문제가 생겼는데요.
<img src = "<? echo $img->index; ?>.png" /> 로 이미지를 보여주는 형식인데
setInterval을 어디에 먹여도 이미지가 교체가 안되는 겁니다. ㅠㅠ
참고로 이미지 이름은 32.png 라면 32.png로 이름은 동일하게 그림은 다르게 수동으로 바꿔줘봤거든요.
setinterval은 발생하구요. index 값도 controller로 잘 넘어옵니다.
아래는 소스 코드 입니다.
--------------------------------------------------------------------------------------------------------------------
js 파일 이구요. 사용자가 li 를 클릭하면 li안에 있는 hidden input에 값을 덮어씌우고
selIndex 변수에 넣은 뒤 보시는 대로 jquery ajax로 selIndex 값을 post 형식으로 넘겨 줍니다.
이런 식으로 받아와서 db 쿼리한뒤
view 단으로 2차 배열에 넣어서 넘겨줍니다.
답답해서 고정값으로도 넘겨보았습니다.
이것이 뷰인데요.
이런 식으로 값을 보여주게 됩니다.
실제로 오류 없구요. image도 다 잘 보입니다.
다만 저 '15.png' 라는 이미지를 교체해주면
클릭시 비동기화 되어 보여야할 이미지가 교체하기전 이미지를 계속 불러 온다는 겁니다. ㅠㅠ
기초가 부족해서 잘 모를 수도 있습니다. ㅠㅠ
한수 부탁드립니다. ㅠㅠ
답변3
웹브라우져에 있는 캐시가 문제 일 수도 있습니다.
아래 처럼 해 보세요.
아래 처럼 해 보세요.
// <img src = "../static/img/<? echo $temp ?>" /> <img src = "../static/img/<? echo $temp . '?' . time() ?>" />
ajax로 송신했다면 당연히 화면변화가 일어나지 않는 것은 당연한 것이지 않나요???
ajax로 송신하면 역시 수신 데이터를 받는 구조로 한다음, 그 수신 데이터 값에 이미지 경로를 정하고 그 값을 js처리하여 image의 src를 바꾸는 구조로 되어야합니다.
예를 든다면 위에서는 xhr.responseText로 단 하나만 받도록 되어 있는 구조를 json화로 받아 여러개를 받게 하여 하나는 #content에 입력하게 하고 다른 값은 img의 src경로를 받는 파라미터를 두어야 하겠죠. 그럴러면 ajax응답 페이지에서는 json_encode(array('content'=>$content, 'imgpath'=>$imgpath)) 이런 식으로 리턴하게 하고 응답은 data = parseJSON(xhr.responseText);로 하여 data.content는 div.#content에 입력하고 img에는 data.imgpath값을 src 변경하는 식으로 해야 합니다.
ajax로 송신하면 역시 수신 데이터를 받는 구조로 한다음, 그 수신 데이터 값에 이미지 경로를 정하고 그 값을 js처리하여 image의 src를 바꾸는 구조로 되어야합니다.
예를 든다면 위에서는 xhr.responseText로 단 하나만 받도록 되어 있는 구조를 json화로 받아 여러개를 받게 하여 하나는 #content에 입력하게 하고 다른 값은 img의 src경로를 받는 파라미터를 두어야 하겠죠. 그럴러면 ajax응답 페이지에서는 json_encode(array('content'=>$content, 'imgpath'=>$imgpath)) 이런 식으로 리턴하게 하고 응답은 data = parseJSON(xhr.responseText);로 하여 data.content는 div.#content에 입력하고 img에는 data.imgpath값을 src 변경하는 식으로 해야 합니다.
오해 없으시길..