2014-01-24 3 views
2

Я написал webapp, чтобы отслеживать статистику из моего плавания. Он отлично работает на моем рабочем столе и отлично работает в мобильном симуляторе Android, но когда я пытаюсь использовать его на своем Samsung Galaxy S2, используя браузер Android, он просто показывает кучу кода. Это происходит сразу после входа в систему. Насколько я могу судить, следующая страница не загружается.jQuery Мобильная страница с кодом на Samsung Galaxy S2

Код страницы авторизации (не уверен, если это уместно) является:

<html> 
    <head> 
     <title>Login</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    </head> 
    <body> 
     <div data-role="header"> 

      <h1>Home</h1> 

     </div> 
     <div data-role="content"> 


<form action="" method="post"> 
    <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='ILxbxRYRNmNwIzUKASEtTbhGG9gtorZf' /></div> 
    <table> 
     <tr><th><label for="id_username">Username:</label></th><td><input id="id_username" type="text" name="username" maxlength="30" /></td></tr> 
<tr><th><label for="id_password">Password:</label></th><td><input id="id_password" type="password" name="password" maxlength="4096" /></td></tr> 
    </table> 
    <input type="hidden" name="next" value="/swimming/" /> 
    <input type="submit" value="Login" /> 
</form> 

     </div> 
     <div data-role="footer"> 

      <a href="/swimming/session/list" data-role="button">Session List</a> 
      <a href="/swimming/accounts/logout/" data-role="button">Logout</a> 

     </div> 
    </body> 
</html> 

Код для целевой страницы (/ плавание /) является:

<html> 
    <head> 
     <title>Home</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    </head> 
    <body> 
     <div data-role="header"> 

<h1>Home</h1> 

     </div> 
     <div data-role="content"> 


     </div> 
     <div data-role="footer"> 

      <a href="/swimming/session/list" data-role="button">Session List</a> 
      <a href="/swimming/accounts/logout/" data-role="button">Logout</a> 

     </div> 
    </body> 
</html> 

код он выплевывает является:

").append(d);return function(a){if(!(a in b)){var h=document.createElement("style"),g="@media "+a+" { #jquery-mediatest { position:absolute; } }";h.type="text/css";h.styleSheet?h.styleSheet.cssText=g:h.appendChild(document.createTextNode(g));e.prepend(f).prepend(h);b[a]=d.css("position")==="absolute";f.add(h).remove()}return b[a]}}()})(jQuery);(function(a,e){function b(a){var b=a.charAt(0).toUpperCase()+a.substr(1),a=(a+" "+c.join(b+" ")+b).split(" "),d;for(d in a)if(f[a[d]]!==e)return true}var d=a(" 

Я прошу прощения, если я был расплывчатым в моем описании, я довольно новый для мобильных веб-страниц и может быть т вышла деталь.

+0

Ваша разметка html должна быть завернута в 'data-role = page'. Используйте последнюю версию 1.4, вы используете старую версию. – Omar

+0

Это сделало это, сделайте это ответом, и у вас есть прием. – CrazyCasta

ответ

1

ли вы используете модель с на несколько страниц или единой модель страницы, все элементы должны быть завернуты в <div data-role="page></div>.

Страница div действует как body тег для каждой страницы. jQuery Mobile ищет стр., чтобы создать его и улучшить его элементы.

Сторона примечания: Я рекомендовал использовать последнюю версию jQuery Mobile 1.4.

Смежные вопросы