Live Brilliant

jquery mobile data-ajax false[페이지 전환 문제 해결] 본문

개발은 핵찜이야/JQUERY

jquery mobile data-ajax false[페이지 전환 문제 해결]

주인정 2013. 5. 31. 10:01

[원인] 

그누보드와 제이쿼리 사용중 기존 a링크와 form 에 페이지 전환 문제

 jquery mobile 사용중 ajax 처리 문제로 페이지 이동이 안되는경우 발생



[해결1]


이 링크는 다른 도메인이나  rel="external", data-ajax="false" or target 은 Ajax를로드 할 수 없습니다. 대신, 이러한 링크가없는 애니메이션 전환으로 전체 페이지 새로 고침의 원인이됩니다. 

두 속성(rel="external" and data-ajax="false") 같은 효과

하지만 다른 의미 의미를 가지고  rel="external" 는 다른 사이트 또는 도메인에 연결 할 때의 사용되어야 하며

data-ajax="false" 단순히 Ajax를 통해 로드되는 도메인 내 페이지를 빠저나가야 할 때 유용합니다.

보안 제한 때문에, 프레임 워크는 항상 아약스 동작 중 외부 도메인에 대한 링크를 옵션을 해제합니다.


#a태그 (2가지 방법)

<a href="#" data-ajax="false">

<a href="#" rel="external">


#form태그

<form name="mform" post="get method="post" data-ajax="false">




[해결2]

위와 같은 식으로 처리를 하다보니 전체적으로 처리해야 할부분이 많이진다.

한번에 처리

 jQuery를 모바일이로드되기 전에, 이벤트 처리기를 바인딩해야합니다.

아래와 같이 하면 끝


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

$(document).bind("mobileinit", function(){

                $.mobile.ajaxLinksEnabled = false;

                $.mobile.ajaxFormsEnabled = false;

                $.mobile.ajaxEnabled = false;

});

</script>

<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

'개발은 핵찜이야 > JQUERY' 카테고리의 다른 글

[jquery] 페이지전환효과 (배열 랜덤)  (0) 2013.08.14
jquery settimeout redirect  (0) 2013.06.05
jquery scroll 사용법  (0) 2013.05.28
li 태그 index 값 출력  (0) 2012.11.21
[JQuery] Ajax load  (0) 2012.07.05
Comments