2011-07-02 1 views
0

jQuery Mobile을 사용하여 웹 응용 프로그램을 작성하고 있습니다. javascript를 사용하여 "pageshow"이벤트에 바인드 된 함수에서 입력 위젯의 값을 설정하려고합니다. 그것은 Firefox에서 작동하지만 Webkit 브라우저 (Safare, Mobile Safari, Chrome ...)에서는 실패합니다. jQuery Mobile : Webkit 브라우저에서 입력 위젯 값 새로 고침

.ready $ (문서)의 일부로 정의 다음() 함수 :

$('#decimal').live('pageshow', function(event, ui){ 
    $('#dLat').val(gps.latitude) 
    $('#dLong').val(gps.longitude); 
    gps.altitude = null; 
}); 

JQM "페이지"에 대한 HTML은 다음과 같습니다

<div data-role="page" id="decimal" data-theme="c" > 
    <div data-role="header" data-backbtn="false"> 
    <h1>Decimal Entry</h1> 
    </div> 
    <div data-role="controlgroup" class="dInput"> 
    <label for="dLat">Lat: </label> 
    <input type="number" class="dInput" name="dLat" id="dLat" value=""><br> 
    <label for="dLong">Lon: </label> 
    <input type="number" class="dInput" name="dLong" id="dLong" value=""><br> 
    </div> 
    <a href="#manual" data-role="button" data-inline="true" id="btnDecimalSubmit"> Done </a> 
</div> 

마 웹킷 브라우저가 필요합니다 어떤 종류의 추가 새로 고침? 그렇다면 어떻게해야합니까 < 입력 ... > 요소?

submit 의사 단추는 대화 상자를 닫는 데 실패하지만 Webkit 브라우저에서만 닫힙니다.

+0

페이지 쇼 대신 페이지 보이기를 시도하십시오. –

답변

0

다음과 같이 독립 실행 형 페이지에서 코드를 테스트하여 (jQM 알파 포함)이 코드는 WebKit에서 작동합니다. 이 대화 상자로 실행되고 있지 않은 것을 주셔서 감사하지만, 나는이 때문에 WebKit의 차이점을 알지 못합니다.

pageshow의 내용이 $(document).ready에 포장되어있는 것으로 보입니다. 그럴 필요는 없습니다. 여기 내 테스트 페이지에서 자바 스크립트 섹션 보이는 방법은 다음과 같습니다

<script type="text/javascript"> 
    $('#decimal').live('pageshow', function(event, ui){ 
    $('#dLat').val(55.5603); 
    $('#dLong').val(56.1356); 
    }); 
</script> 

가 (필자는 gps 변수를 제거하고 분명 내가 코드의 조각이 없기 때문에 하드 코딩 된 값을 설정).

+0

풀 내가 당황합니다. pageshow stuff는 $ (document) .ready로 감싸 였지만, 꺼내면 아무것도 영향을 미치지 않는 것 같습니다. – RAMilewski

+0

이것 좀 봐 주셔서 감사합니다! 나는 [link] (http://netfools.com/test23/)에서 정적 데이터를 사용하여 작은 테스트 케이스를 만들었고 제대로 작동하는 것으로 보인다. geolocation [link] (http://netfools.com/position)을 사용하는 큰 버전이 실패합니다. 디버깅 방법에 대해서는 당황 스럽습니다. pageshow 함수에 console.log 문을 추가하고 Chrome에서 실행되지 않는 것처럼 보입니다. 나는 궁극적으로 여기에서 무엇이든 찾아 낼 것이다. 도움 주셔서 감사합니다. – RAMilewski

+0

문제를 연구하는 전문가는 "모든 페이지가 jQuery Mobile 표준에 맞아야합니다."와 같은 문구가 포함 된 jQuery Mobile에 대한 소개 글을 보았습니다. ... 그러나 그들은 결코 그 "표준"에 대한 링크를 제공하는 것 같지 않습니다. 분명히 그들은 정확합니다. 페이지를 약간 변경했는데 이제는 작동합니다 (서식 문제를 더하거나 뺀 것). 그러나 어떤 변화가 문제를 해결했는지 알기가 어렵습니다! jQuery Mobile은 jQuery Mobile 문서보다 앞서 있습니다. – RAMilewski

0

안녕하세요. 이전에이 문제가 발생했습니다. 문서 준비 이벤트 대신 mobileinit 이벤트를 사용해보십시오.

$(document).bind("mobileinit", function() { 
$("#somePage").live('pageshow', function(event) { 
    Do some stuff here 

나에게도 비슷한 문제가 수정되었습니다. 도움이 되었기를 바랍니다.