2013-01-15 3 views
1

처음에는 죄송합니다. 타이핑 오류가 발생하면 영어가 제 주요 언어가 아니지만 최선을 다해 설명하겠습니다.phonegap window.location이 .html로 작동하지 않습니다. # 페이지

메모 데이터베이스가있는 테스트 앱을 만들고 있습니다. 그것은 추가 및 삭제와 함께 잘 작동하지만 작은 문제가 있습니다 ... 나는 (edit.html에) 메모를 추가하고 index.html 페이지로 돌아가고 싶다는 순간에 돌아 가지 않을 것입니다. 나는 각 페이지가 자신의 ID를 갖도록 여러 개의 데이터 페이지 역할 페이지로 작업하고있다. 내가 주 데이터베이스에 사용하는 코드 :

헤더 index.html을 :

$("#homePage").live('pageinit', function() { 
init(); 
}); 

index.html을 데이터 페이지 역할

<div data-role="page" id="homePage" data-add-back-btn="true" class="noteclass"> 
<!-- HEader --> 
<div data-role="header" > 
    <h1>Notitie Database</h1> 
</div> 
<!-- Main content div --> 
<div data-role="content" id="mainContent"> 
    <ul data-role="listview" id="noteTitleList"></ul><br /> 
</div> 
<div data-role="content"> 
    <a href="edit.html" data-role="button" data-icon="plus">Voeg notitie toe</a> 
</div> 
<!-- Footer --> 
<div data-role="footer" id="footer"> <img src="a12.png" /> 
    <p>&copy; 2012 - Swen Kooij/Paksha Thullner/Johnny Jansen</p> 
</div> 
</div> 

Edit.html (여기에서 u는 추가 할 수 있습니다/변경/메모를 제거)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
<div data-role="page" id="editPage"> 
<!-- HEader --> 
<div data-role="header"> 
    <h1>Write Note</h1> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#Delete').click(function() { 
     DeleteNote($('#noteId').val()); 
    }); 

    $('#addNote').click(function() { 
     var data = {title:$("#noteTitle").val(), 
       body:$("#noteBody").val(), 
       id:$("#noteId").val() 
     }; 
     saveNote(data);    
    });  
}); 
</script> 
<div data-role="content"> 
    <form id="editNoteForm" method="post"> 
     <input type="hidden" name="noteId" id="noteId" value=""> 
     <div data-role="fieldcontain"> 
      <label for="noteTitle">Title</label> 
      <input type="text" name="noteTitle" id="noteTitle"> 
     </div> 
     <div data-role="fieldcontain"> 
      <label for="noteBody">Note</label> 
      <textarea name="noteBody" id="noteBody"></textarea> 
     </div> 
     <div data-role="fieldcontain"> 
      <button id="addNote">Opslaan</button> 
     </div> 
    </form> 
    <button id="Delete">Verwijder</button> 
</div> 
<a href="index.html#homePage" data-role="button" data-icon="home">Ga terug</a> 
<!-- Footer --> 
<div data-role="footer" id="footer"> <img src="a12.png" /> 
    <p>&copy; 2012 - Swen Kooij/Paksha Thullner/Johnny Jansen</p> 
</div> 
</div> 
</body> 
</html> 

그리고 내가 여기에 메모 데이터베이스에 사용하는 백엔드 코드입니다

document.addEventListener("deviceready", onDeviceReady, false); 

function onDeviceReady() { 
phoneready(); 
} 

function setupTable(tx){ 
tx.executeSql("CREATE TABLE IF NOT EXISTS notes(id INTEGER PRIMARY KEY,title,body,updated)"); 
} 

function getEntries() { 
dbShell.transaction(function(tx) 
{ 
    tx.executeSql("select id,title,body, updated from notes order by id asc", dbErrorHandler, renderEntries) 
}, function(){ alert ("Error getentries"); 
}); 

} 


function renderEntries(tx,results){ 
if (results.rows.length == 0) { 
    $("#mainContent").html("<p>Je hebt nog geen notities.</p>"); 
} else { 
    var s = ""; 
    for(var i=0; i<results.rows.length; i++) { 
    s += "<li><a href='edit.html?id="+results.rows.item(i).id + "'>" + results.rows.item(i).title + "</a></li>"; 
    } 
    $("#noteTitleList").html(s); 
    $("#noteTitleList").listview("refresh"); 
} 
} 

function saveNote(note) { 

//Sometimes you may want to jot down something quickly.... 
if(note.title == "") note.title = "[Geen Titel]"; 
dbShell.transaction(function(tx) { 
    if(note.id == "") 
    { 
     tx.executeSql("insert into notes(title,body,updated) values(?,?,?)",[note.title,note.body, new Date()]); 
    } 
    else 
    { 
     tx.executeSql("update notes set title=?, body=?, updated=? where id=?",[note.title,note.body, new Date(), note.id]); 
    } 
}, function(){ alert ("Error savenote");}, 
    function() 
    { 
     window.navigator.location("index.html#homePage"); 
    }); 
} 

function DeleteNote(id){ 
    dbShell.transaction(
    function(tx) 
    { 
     tx.executeSql('Delete FROM notes where id=' + id); 
    }, 
     function(){ alert ("Error deletenote");}, 
    function(err) 
    { 
     window.navigator.location("index.html#homePage"); 
    }); 
} 

function phoneready(){ 
dbShell = window.openDatabase("SimpleNotes", 2, "SimpleNotes", 1000000); 
setupTable(); 
} 

function init(){ 
getEntries(); 

//edit page logic needs to know to get old record (possible) 
$("#editPage").live("pagebeforeshow", function() { 
    //get the location - it is a hash - got to be a better way 
    var loc = window.location.hash; 
    if(loc.indexOf("?") >= 0) { 
     var qs = loc.substr(loc.indexOf("?")+1,loc.length); 
     var noteId = qs.split("=")[1]; 
     //load the values 
     dbShell.transaction(
      function(tx) { 
       tx.executeSql("select id,title,body from notes where id=?",[noteId],function(tx,results) { 
        $("#noteId").val(results.rows.item(0).id); 
        $("#noteTitle").val(results.rows.item(0).title); 
        $("#noteBody").val(results.rows.item(0).body); 
       }); 
      }, dbErrorHandler); 

    } 
}); 
} 

유 saveNote에서 난 ("index.html을 # 홈페이지") 함수를 호출 window.navigator.location deleteNote에서 보는 바와 같이, $ .mobile.changePage ("index.html # homePage")로 시도한만큼이 작업을 수행했습니다. 그것은 돌아갈 것이지만 init()을 실행하지 않을 것이다; 함수를 호출합니다. 나는 모든 것이 정확하다고 설명하고 질문이 있으면 알려 주시기 바랍니다. 나는 그것을 설명 할 때 최선을 다할 것입니다.

편집 : 더 많은 정보 : 처음에는

내가 여러 데이터 역할 페이지를 가지고, 귀하의 답변 주셔서 감사합니다.

여분 예 : 딥 링크 "index.html을 # 홈페이지"로 페이지를 변경하려는

<div data-role="page" id="page5" data-add-back-btn="true"> 
<!-- Header --> 
<div data-role="header" > 
<h1>Locatie</h1> 
</div> 
<!-- Main content div --> 
<div data-role="content"> 
<p id="geolocation" onClick="onDeviceReady()">Op zoek naar uw locatie ...</p> 
<img src="" id="map" width="100%" height="" /> 
<h4>Omgeving</h4> 
<img src="" id="map2" width="100%" height="" /> 
</div> 
<div data-role="footer" id="footer"> <img src="a12.png" /> 
<p>&copy; 2012 - Swen Kooij/Paksha Thullner/Johnny Jansen</p> 
</div> 
</div> 

답변

1

. JqueryMobile은이를 지원하지 않습니다. 파일을 전달하면 해당 파일의 첫 번째 페이지 만로드합니다. 이것은 "index.html # homePage"를 전달할 때 "index.html"을 고려하고 해당 파일의 첫 번째 페이지를로드한다는 것을 의미합니다.

나는 확실히 그것을 알고 있지만 index.html 파일 만 "홈페이지"변경 기능 window.navigator.location에있는에 경우없는 :

$.mobile.changePage("index.html") 

그리고 물론이 같은 행동을 할 앵커 태그.

+0

처음에 답변 해 주셔서 감사합니다. – user1980529

+0

window.navigator.location을 changePage로 변경하십시오. 첫 번째가 작동하지 않기 때문입니다. –

+0

첫 번째 게시물을 편집했습니다. index.html에 여러 개의 "앵커"페이지가 있는데 그 중 하나를 입력하고 싶었지만 노트북 배터리가 배터리 부족 상태였습니다. 다른 방법이 없다면 앵커 페이지 대신 index.html로 안내 할 것입니다.앵커 페이지를 선호하지만 다른 선택이 없다면 다른 방법으로 할 것입니다. – user1980529

0

저는 다음을 사용합니다 :

window.location = "#home";

관련 문제