2012-06-21 7 views
0

У меня есть код, использующий jquery mobile + phonegap и запускающий его на моем андроиде, я хочу перенаправить страницу на содержимое div id ... я имею в виду после того, как я сделаю снимок я хотел бы загрузить следующую страницу ... вот мой код ...(ASK) window.location.href does not work jquery

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" /> 
     <script src="js/jquery-1.6.4.min.js"></script> 
     <script src="js/jquery.mobile-1.0.min.js"></script> 
     <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script> 
     <script type="text/javascript" charset="utf-8"> 
     var deviceReady = false; 

     /** 
     * Take picture with camera 
     */ 
     function takePicture() { 
      navigator.camera.getPicture(

      function (uri) { 
       var img = document.getElementById('camera_image'); 
       img.style.visibility = "visible"; 
       img.style.display = "block"; 
       img.src = uri; 
       document.getElementById('camera_status').innerHTML = "Success"; 
       window.location.href = "#page2"; 

      }, function (e) { 
       console.log("Error getting picture: " + e); 
       document.getElementById('camera_status').innerHTML = "Error getting picture."; 
      }, { 
       quality: 50, 
       destinationType: navigator.camera.DestinationType.FILE_URI 
      }); 
     }; 

     /** 
     * Select picture from library 
     */ 
     function selectPicture() { 
      navigator.camera.getPicture(

      function (uri) { 
       var img = document.getElementById('camera_image'); 
       img.style.visibility = "visible"; 
       img.style.display = "block"; 
       img.src = uri; 
       document.getElementById('camera_status').innerHTML = "Success"; 
       window.location.href = "#page2"; 
      }, function (e) { 
       console.log("Error getting picture: " + e); 
       document.getElementById('camera_status').innerHTML = "Error getting picture."; 
      }, { 
       quality: 50, 
       destinationType: navigator.camera.DestinationType.FILE_URI, 
       sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY 
      }); 
     }; 

     /** 
     * Upload current picture 
     */ 
     function uploadPicture() { 

      // Get URI of picture to upload 
      var img = document.getElementById('camera_image'); 
      var imageURI = img.src; 
      if (!imageURI || (img.style.display == "none")) { 
       document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first."; 
       return; 
      } 

      // Verify server has been entered 
      server = document.getElementById('serverUrl').value; 
      if (server) { 

       // Specify transfer options 
       var options = new FileUploadOptions(); 
       options.fileKey = "file"; 
       options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1); 
       options.mimeType = "image/jpeg"; 
       options.chunkedMode = false; 

       // Transfer picture to server 
       var ft = new FileTransfer(); 
       ft.upload(imageURI, server, function (r) { 
        document.getElementById('camera_status').innerHTML = "Upload successful: " + r.bytesSent + " bytes uploaded."; 
       }, function (error) { 
        document.getElementById('camera_status').innerHTML = "Upload failed: Code = " + error.code; 
       }, options); 
      } 
     } 

     /** 
     * View pictures uploaded to the server 
     */ 
     function viewUploadedPictures() { 

      // Get server URL 
      server = document.getElementById('serverUrl').value; 
      if (server) { 

       // Get HTML that lists all pictures on server using XHR 
       var xmlhttp = new XMLHttpRequest(); 

       // Callback function when XMLHttpRequest is ready 
       xmlhttp.onreadystatechange = function() { 
        if (xmlhttp.readyState === 4) { 

         // HTML is returned, which has pictures to display 
         if (xmlhttp.status === 200) { 
          document.getElementById('server_images').innerHTML = xmlhttp.responseText; 
         } 

         // If error 
         else { 
          document.getElementById('server_images').innerHTML = "Error retrieving pictures from server."; 
         } 
        } 
       }; 
       xmlhttp.open("GET", server, true); 
       xmlhttp.send(); 
      } 
     } 

     /** 
     * Function called when page has finished loading. 
     */ 
     function init() { 
      document.addEventListener("deviceready", function() { 
       deviceReady = true; 
      }, false); 
      window.setTimeout(function() { 
       if (!deviceReady) { 
        alert("Error: PhoneGap did not initialize. Demo will not run correctly."); 
       } 
      }, 2000); 
     } 
     </script> 
    </head> 
    <body onload="init();"> 
     <!-- Page 1 --> 
     <div data-role="page" id="page1"> 
      <!-- Page 1 Header --> 
      <div data-role="header"> 
       <h1>Ambil Gambar</h1> 
      </div> 
      <!-- Page 1 Content --> 
      <div data-role="content"> 
       <center> 
        <a href="javascript:void(0)" onclick="takePicture();"> 
         <img src="image/camera.png" width="150px" height="150px"></a> 
        <br> 
        <br> 
        <b>Atau</b> 
        <br> 
        <br> 
        <a href="javascript:void(0)" onclick="selectPicture();"> 
         <img src="image/upload.png"></a> 
        <p>Find my friend Page 3 
         <a href="#page2">here</a> 
        </p> 
       </center> 
      </div> 
      <!-- Page 1 Footer --> 
      <div data-role="footer"> 
       <h4>Footer 1</h4> 
      </div> 
     </div> 
     <!-- Page 2 --> 
     <div data-role="page" id="page2"> 
      <!-- Page 2 Header --> 
      <div data-role="header"> 
       <h1>Header 2</h1> 
      </div> 
      <!-- Page 2 Content --> 
      <div data-role="content"> 
       <img style="width:100%;visibility:hidden;display:none;" id="camera_image" src="" /> 
       <p>Find my friend Page 3 
        <a href="#page3">here</a> 
       </p> 
      </div> 
      <!-- Page 2 Footer --> 
      <div data-role="footer"> 
       <h4>Footer 2</h4> 
      </div> 
     </div> 
     <!-- Page 3 --> 
     <div data-role="page" id="page3"> 
      <!-- Page 3 Header --> 
      <div data-role="header"> 
       <h1>Header 3</h1> 
      </div> 
      <!-- Page 3 Content --> 
      <div data-role="content"> 
       <h3>Server:</h3> 
       <b>Images on server:</b> 
       <div id="server_images"></div> 
       <input type="button" onclick="uploadPicture();" value="Upload Picture" /> 
       <input type="button" onclick="viewUploadedPictures();" value="View Uploaded Pictures" /> 
      </div> 
     </div> 
    </body> 

</html> 

Может ли кто-нибудь мне помочь? спасибо до ...

ответ

1

Вместо window.location.href используйте window.location.hash.

+0

спасибо .. это работает ... :) –

+0

@ WawanDenFrastøtende: Если это решило вашу проблему, тогда вы должны принять ответ, чтобы люди знали, что он был разрешен. Взгляните на: http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – forsvarir