Search jQuery

jQuery Forum

Screen name:
portoist

portoist's Profile

2 Posts

0 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

$.mobile.changePage shows 'to' page, but then sends back to 'from' page
[0Replies]
- 15-Nov-2012 03:00 AM
- Forum: jQuery Mobile
Hello everyone,
I'v been playing around with jquery mobile and I have to say that i like it. I have came across this issue - I have two pages and I have connected to the 'swipe' event and I am trying to go from one page to other. It works fine, but after few swipes it starts to behave weird. I am on page1 and I swipe to page2 which shows up and then it seems like changePage is triggered immediately again and takes me back to page1. Could anyone give me advice what am I doing wrong?
Here is my code of page1:
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <title>Page1</title>
8. <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" />
9. <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
10. <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
11. </head>
12. <body>
13. 
14. <div id="page1" data-role="page">
15. <script type="text/javascript">
17. $("#page1").live('swipeleft',function(){
18. $.mobile.changePage("/t/page2.html")
19. })
21. </script>
22. <div id="header" data-role="header" data-position="fixed" data-theme="b">
23. <h1>Page 1</h1>
24. <p class="ui-btn-right time" style="margin-top:.6em;"></p>
25. <div data-role="navbar">
26. <ul>
27. <li><a href="/t/page1.html" class="ui-btn-active ui-state-persist" data-prefetch>Page 1</a></li>
28. <li><a href="/t/page2.html" data-prefetch>Page 2</a></li>
29. </ul>
30. </div>
31. </div>
32. 
33. <div id="content" data-role="content" style="height: 100%;">
34. This is page 1.
35. </div>
36. 
37. <div id="footer" data-role="footer" data-position="fixed" data-theme="b">
38. <h3>2012 © Me</h3>
39. </div>
40. </div>
41. </body>
42. </html>
And here is code of my page2:
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <title>Page2</title>
8. <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" />
9. <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
10. <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
11. </head>
12. <body>
13. <div id="page2" data-role="page">
14. <script type="text/javascript">
16. $("#page2").live('swiperight',function(){
17. $.mobile.changePage("/t/page1.html")
18. })
20. </script>
21. 
22. <div id="header" data-role="header" data-position="fixed" data-theme="b">
23. <h1>Page 2</h1>
24. <p class="ui-btn-right time" style="margin-top:.6em;"></p>
25. <div data-role="navbar">
26. <ul>
27. <li><a href="/t/page1.html" data-prefetch>Page 1</a></li>
28. <li><a href="/t/page2.html" class="ui-btn-active ui-state-persist" data-prefetch>Page 2</a></li>
29. </ul>
30. </div>
31. </div>
32. 
33. <div id="content" data-role="content" style="height: 100%;">
34. This is page 2
35. </div>
36. 
37. <div id="footer" data-role="footer" data-position="fixed" data-theme="b">
38. <h3>2012 © Me</h3>
39. </div>
40. </div>
41. </body>
42. </html>
I'v been testing this with latest Google Chrome on Windows XP.

[Solved] jquery mobile popup leads to different page on close
[0Replies]
- 12-Nov-2012 04:02 AM
- Forum: jQuery Mobile
Hello everybody,
I am new to jquery mobile and I have following problem:
I have 2 pages in two different html files - root page and settings page - in my root page i display popup, but when I close popup by escape or clicking outside popup I am redirected to settings page.
Could anyone please tell me what am I doing wrong?
EDIT:
After some digging inside jquery js I have found out solution - I have to set history option of popup to false and then it closes normaly.
Here is code of my root page:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1">
6. <title>Root page</title>
7. <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" />
8. <link rel="stylesheet" href="css/rieter-mobile.css"/>
9. <link rel="stylesheet" href="css/my.css"/>
10. <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
11. <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
12. <script type="text/javascript" src="js/jquery.tmpl.js"></script>
13. <script type="text/javascript" src="js/my.js"></script>
14. </head>
15. <body>
16. <script type="text/javascript">
17. function checkWebSocket(){
18. $("#popupDiv").popup();
19. if ("WebSocket" in window){
20. $("#popupDiv p").text("Websockets are supported.");
21. }else{
22. $("#popupDiv p").text("Websockets are not supported.")
23. }
24. $("#popupDiv").popup("open")
25. }
28. $(function(){
29. checkWebSocket();
30. })
31. </script>
32. <div id="root_page" data-role="page">
33. <div id="header" data-role="header" data-position="fixed" data-theme="b">
35. </script>
36. <h1>Root page</h1>
37. <div data-role="navbar">
38. <ul>
39. <li><a href="/" class="ui-btn-active ui-state-persist" data-prefetch>Home</a></li>
40. <li><a href="/settings" data-prefetch>Settings</a></li>
41. </ul>
42. </div>
43. </div>
45. <div id="popupDiv">
46. <p></p>
47. </div>
49. <div id="footer" data-role="footer" data-position="fixed" data-theme="b">
50. <h3>2012 © Foo</h3>
51. </div>
52. </div>
53. </body>
54. </html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend