모바일 2.5에서 ajax를 돌고 오면 css가 안먹힙니다
- 작성자 :
- 김*은
- 작성일 :
- 2013-02-27 10:35:50
- 조회수 :
- 1,287
- 구분 :
- 모바일
- 진행상태 :
- 완료
Q
안녕하세요? 전자정부프레임워크를 이용하여 모바일화면처럼 보이는 웹페이지를 작업중입니다.
질문이 있어 글을 다시 올립니다.
한 파일 내에서 ajax를 사용하여 데이터를 조회, list에 좌르르~ 나타내려고 합니다.(서로 다른 파일 간의 이동 없음)
------------------------------------------------------------------
<script>
funcion 조회(){
$.ajax(값 조회해서 리스트에 템플릿의 형태에 따라 데이터를 appendTo);
}
<script>
<script id="템플릿">
<li><a ~~~>
...
</li>
</script>
...
<ul id="리스트" data-role="listview"></ul>
...
<a onclick="조회();">
------------------------------------------------------------------
1. 버튼 클릭
2. 조회 함수 호출
3. 조회함수 - ajax활용하여 db에서 값을 조회함
- 조회된 값을 ul에 append함
------------------------------------------------------------------ajax를 돌고 오면 스타일(http://m.egovframe.go.kr/mguide2.5/guide/guide.do 여기에 나오는 깔끔하고 이쁜 스타일)이 안 먹히네요.
그냥 완전히 기본의, 촌스러운? 형태로 나옵니다.
첨부파일을 보시면 그냥 코드에 박으면 스타일이 잘 먹습니다.(첨부파일 그림2)
그런데 ajax를 돌고 오면 스타일이 깨지네요.(첨부파일 그림1)
말 그대로 ajax를 사용해서 값을 조회, append해보면 스타일이 안 먹혀서 촌스럽게 나옵니다.
한 파일 내에 다 있는 거라... 스타일 적용하는 태그를 추가안했다던가 하는 게 아니라서; 어딜 잘못했는지;;;
다시 글 남깁니다. 작은 조언이라도 감사합니다.
질문이 있어 글을 다시 올립니다.
한 파일 내에서 ajax를 사용하여 데이터를 조회, list에 좌르르~ 나타내려고 합니다.(서로 다른 파일 간의 이동 없음)
------------------------------------------------------------------
<script>
funcion 조회(){
$.ajax(값 조회해서 리스트에 템플릿의 형태에 따라 데이터를 appendTo);
}
<script>
<script id="템플릿">
<li><a ~~~>
...
</li>
</script>
...
<ul id="리스트" data-role="listview"></ul>
...
<a onclick="조회();">
------------------------------------------------------------------
1. 버튼 클릭
2. 조회 함수 호출
3. 조회함수 - ajax활용하여 db에서 값을 조회함
- 조회된 값을 ul에 append함
------------------------------------------------------------------ajax를 돌고 오면 스타일(http://m.egovframe.go.kr/mguide2.5/guide/guide.do 여기에 나오는 깔끔하고 이쁜 스타일)이 안 먹히네요.
그냥 완전히 기본의, 촌스러운? 형태로 나옵니다.
첨부파일을 보시면 그냥 코드에 박으면 스타일이 잘 먹습니다.(첨부파일 그림2)
그런데 ajax를 돌고 오면 스타일이 깨지네요.(첨부파일 그림1)
말 그대로 ajax를 사용해서 값을 조회, append해보면 스타일이 안 먹혀서 촌스럽게 나옵니다.
한 파일 내에 다 있는 거라... 스타일 적용하는 태그를 추가안했다던가 하는 게 아니라서; 어딜 잘못했는지;;;
다시 글 남깁니다. 작은 조언이라도 감사합니다.
첨부파일
A
안녕하세요 이세은 님..
ajax를 통해 동적인 화면을 구성 하시려는 도중에 CSS가 적용이 되지 않으시는 것 같습니다.
우선 작성해 주신 내용을 보고 유추해 보면..
우선 브라우저를 통해 자바 스크립트 에러가 있는지 확인 해 보시기 바랍니다.
자바 스크립트 에러가 있을경우 페이지가 정상적으로 로딩이 되지 않는 경우가 있습니다.
또한 ajax를 사용하여 링크를 사용하실 경우.. 헤더 영역의 링크 부분은 가져오지 않고 해당 Page 영역만을 가져오기 때문에 해당 CSS 가 적용되지 않는 경우가 있는데.. 그러한 경우인지 확인 해 보시기 바랍니다.
그러한 경우에도 잘 해결이 되지 않으실 경우에 해당 영역을 div 로 지정하셔서 그 div에 동적으로 .HTML 메소드를 사용하셔서 직정 HTML 코드를 밀어 넣으시면..($(id).HTML("li.. ")) 실제 코드를 직접 박는것과 같은 결과가 출력되니 사용 해 보시기 바랍니다.
그럼 오늘도 좋은하루 보내시기 바랍니다.
감사합니다!!
ajax를 통해 동적인 화면을 구성 하시려는 도중에 CSS가 적용이 되지 않으시는 것 같습니다.
우선 작성해 주신 내용을 보고 유추해 보면..
우선 브라우저를 통해 자바 스크립트 에러가 있는지 확인 해 보시기 바랍니다.
자바 스크립트 에러가 있을경우 페이지가 정상적으로 로딩이 되지 않는 경우가 있습니다.
또한 ajax를 사용하여 링크를 사용하실 경우.. 헤더 영역의 링크 부분은 가져오지 않고 해당 Page 영역만을 가져오기 때문에 해당 CSS 가 적용되지 않는 경우가 있는데.. 그러한 경우인지 확인 해 보시기 바랍니다.
그러한 경우에도 잘 해결이 되지 않으실 경우에 해당 영역을 div 로 지정하셔서 그 div에 동적으로 .HTML 메소드를 사용하셔서 직정 HTML 코드를 밀어 넣으시면..($(id).HTML("li.. ")) 실제 코드를 직접 박는것과 같은 결과가 출력되니 사용 해 보시기 바랍니다.
그럼 오늘도 좋은하루 보내시기 바랍니다.
감사합니다!!
