Search jQuery

jQuery Forum

Screen name:
steven.gardner

steven.gardner's Profile

8 Posts

13 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Problems with navigation
[2Replies]
- 21-Mar-2014 12:19 PM
- Forum: jQuery Mobile
I'm having trouble with the navigation of my app when loading a page dynamically.

On my homepage i have a list of links with anchors linking to top level directories.

I have hijacked one of the links with javascript and done some conditional logic that loads a page dynamically. Depending on the logic results this could be a second or third level directory.
On first time load of this link the page works fine, however, when I click the JQM back button it takes me to the homepage and all looks well until I try the same link again.
It's at this point my problems occur.
It looks like JQM has retained the sub directories in the url when it tries to send me to the page. the page loads but the javascript console is filled with 404's.

I have a file structure like this:

index.html
news/
index.html
bins/
index.html
detail/
index.html

When I load the page for the first time all is well.
1. http://10.33.57.156/fdapp.dev/bins/detail/?id=320053911
But when I click the JQM back button from this page then click the original link again I get these 404 error in the javascript console:
1. http://10.33.57.156/fdapp.dev/bins/detail/bins/detail/?id=320053911
As you can see it still has bins/detail/ from my previous visit.

I use this piece of JS code from my homepage.js to load the page:
1. $(document).on("pageshow", "#homepage", function(){
2. ....
3. $.mobile.pageContainer.pagecontainer("change", 'bins/detail/?id=' + p);
4. ....
Has anyone experienced this issue or have some advice for me, that would be great.

Thanks
Steven

I need help to structure code so I can use Camera functionality through phonegap/build
[2Replies]
- 19-Nov-2013 08:59 AM
- Forum: jQuery Mobile
I'm having trouble getting the camera functionality to work on my device after I upload it through build.phonegap.

I stripped out all evidence of jQuery mobile and the functionality works. So I must be placing my code in the wrong place or inititializing it wrong or something.

Can you help me structure my code in a way its going to work.

Here's what I have so far that doesn't work but seems to be calling the getPicture parent function.

header section:
2. <head>
3. <title>Report It App</title>
4. <meta name="viewport" content="width=device-width,initial-scale=1"/>
5. <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
6. <link rel="stylesheet" href="css/customTheme.css" />
7. <link rel="stylesheet" href="css/styles.css" />
8. <script src="js/jquery.js"></script>
9. <script src="js/jquery.mobile-1.3.2.min.js"></script>
10. <script src="js/plugins.js"></script>
11. <script src="js/custom.js"></script>
12. <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
13. </head>
Photo Page:
2. <div id="photoPage" data-role="page" data-add-back-btn="true">
3. <div data-role="content">
4. <div class="buttonGroup buttonGroup--bigBtn">
5. <a class="btn btn--1 addNew" id="newPicLink" href="#">
6. <span class="btn-span">
7. <img class="btn-icon" src="images/plus.png" alt="Capture Photo">
8. </span>
9. </a>
10. <span class="buttonGroup-text">Capture Photo</span>
11. </div>
12. <img id="camImg" style="" >
13. </div>
14. </div>
Custom.js
2. // ========== Camera Page ============== //
3. $(document).on("pageinit", "#photoPage", function(event) {
5. var page = this;
6. onCamSuccess = function(imageData) {
7. console.log(imageData);
8. var image = $("#camImg")[0];
9. image.src = "data:image/jpeg;base64," + imageData;
10. };
12. onCamError = function() {
13. $("#status",page).html("An error with the camera. Sorry");
14. };
16. $("#newPicLink").on("touchstart",function(e) {
17. console.log(e);
18. e.preventDefault();
19. navigator.camera.getPicture(onCamSuccess,onCamError, {sourceType:Camera.PictureSourceType.CAMERA, quality:50, targetWidth: 200, targetHeight:200});
21. });
23. $("#existingPicLink").on("touchstart",function(e) {
24. e.preventDefault();
25. navigator.camera.getPicture(onCamSuccess,onCamError, {sourceType:Camera.PictureSourceType.PHOTOLIBRARY, quality:50, targetWidth: 200, targetHeight: 200});
26. });
28. });

JQM & Phonegap content disappearing after a split second
[6Replies]
- 08-Nov-2013 06:10 AM
- Forum: jQuery Mobile
I'm half way through building a Report It app using JQM and Phonegap.
I've tested what I've done on my computers Chrome browser and everything works just the way I want it.
I then upload my code to build.phonegap.com and install it on the works google nexus.
When I test the app on this device I'm getting a problem with the main content shows for a split second then disappears leaving just an anchor tag styled as a btn. This doesn't happen on all pages so I'm finding it hard to pinpoint the error.

Can you help me work out why the content disappears?

I have a feeling its to do with the way I wrap my javascript in "pageshow" event. I had previously had all the "pageshow" with "pageinit".

-- Also I'm struggling with the code for the #photoPage doesn't work

If you want to look at the app in action:

https://build.phonegap.com/apps/631759/builds

My Index file:
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. ......
5. </head>
6. <body>
7. <div id="reportItHomepage" data-role="page" >
8. ......
9. <div data-role="content">
10. <h1>Keep Fife Clean</h1>
11. <a class="btn btn--1 addNew" href="type.html"></a>
12. <a class="btn btn--3 btn--myReports" href="myReports.html"> </a>
13. <a class="btn btn--3 btn--myReports" href="allReports.html"></a>
14. </div>
15. </div>
16. <script src="js/jquery.js"></script>
17. <script src="js/jquery.mobile-1.3.2.min.js"></script>
18. <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
19. <script src="phonegap.js"></script>
20. <script src="geolocation.js"></script>
21. <script src="camera.js"></script>
22. <script src="js/custom.js"></script>
23. </body>
24. </html>
The page in which content disappears:
1. <div id="tellUsMorePage" data-role="page" data-add-back-btn="true">
2. ....
3. <div data-role="content">
4. <h1 class="h1--bigBottom">Tell us more</h1>
5. <p class="supportText">We need some more information before you can submit your report.</p>
6. <a class="btn btn--3 btn--location" href="location.html"></a>
7. <a class="btn btn--3 btn--description" href="description.html"></a>
8. <form action="myReports.html" method="get">
9. <input type="submit" id="sendReport" class="btn btn--submit is-disabled ui-disabled" value="submit" name="submit">
10. </form>
11. </div>
12. .....
13. </div>
My Custom.js file:
1. .....
2. // ================ Index page ================== //
3. $(document).on("pageshow", "#reportItHomepage", function(event){
5. //Clear any localStorage Data except userid.
6. $('.addNew').on('click', function(){
7. localStorage.removeItem('type');
8. localStorage.removeItem('reporter');
9. localStorage.removeItem('description');
10. localStorage.removeItem('location');
11. });
12. });
13. // ================ Type Of Form page ================== //
14. $(document).on("pageshow", "#typeOfReportPage", function(event){
15. // if no unique id for the user stored in localstorage exists
16. if(!localStorage.getItem('userId')){
17. var id = generateUid();
18. localStorage.setItem('userId', id);
19. }
20. // On page load, check if localstorage[type] exists and highlight the correct form type.
21. if(localStorage["type"]){
22. $('.grid a[data-type="'+localStorage.getItem('type')+'"]').addClass('btn--complete');
23. }
24. // When a type of report link is clicked
25. $('.grid').on('click', 'a', function(){
26. // pick out the value from the link clicked's data-type and assign it to $type.
27. var $type = $(this).attr('data-type');
28. // if the localstorage exists and the value is not the same as the data-type value from the link clicked:
29. if(localStorage["type"] && localStorage["type"] != $type){
30. // clear all localstorage data from further into the form.
31. localStorage.removeItem('reporter');
32. localStorage.removeItem('description');
33. localStorage.setItem('type', $type);
34. }else{
35. // otherwise create a localstorage object with the data-type as its value.
36. localStorage.setItem('type', $type);
37. }
38. });
39. });
40. // =========== Tell Us More Page =============== //
41. $(document).on("pageshow", "#tellUsMorePage", function(event){
42. // check localstorage for any information and highlight the completed sections.
43. if(localStorage["reporter"]){
44. $('.btn--reporter').addClass('btn--complete');
45. }
46. if(localStorage["description"]){
47. $('.btn--description').addClass('btn--complete');
48. }
49. if(localStorage["location"]){
50. $('.btn--location').addClass('btn--complete');
51. }
52. if(localStorage["photo"]){
53. $('.btn--photo').addClass('btn--complete');
54. }
55. if($('.btn--reporter, .btn--description, .btn--location').hasClass('btn--complete')){
56. $('#sendReport').removeClass('ui-disabled is-disabled');
57. }
58. });
59. // ========= Location Page ========== //
60. $(document).on("pageshow", "#locationPage", function(event){
61. if('geolocation' in navigator){
62. $.mobile.loading('show');
63. // position options: describes the options to use while retrieving the users location.
64. var optn = {
65. enableHighAccuracy : true,
66. timeout : Infinity,
67. maximumAge : 0 // set as 0 so user agent must not use the cached location data.
68. };
69. // Added to prevent partial loading on map on page re-load via ajax.
70. $(document).on('pageshow', '#locationPage', function() {
71. // Get the users current location
72. navigator.geolocation.getCurrentPosition(showPosition, showError, optn);
73. });
74. } else {
75. alert('Geolocation is not supported in your browser');
76. }
77. // Successful callback function
78. function showPosition(position){
79. // convert lat long coordinates to googlemaps latlng object.
80. var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
81. // create a map object with display options.
82. var mapOptions = {
83. zoom : 17,
84. center : googlePos,
85. mapTypeId : google.maps.MapTypeId.ROADMAP
86. };
87. //target a div for the map to attach to.
88. var mapObj = document.getElementById('mapdiv');
89. // create the map.
90. var googleMap = new google.maps.Map(mapObj, mapOptions);
91. // create a marker at the location with options
92. var markerOpt = {
93. map: googleMap,
94. position: googlePos,
95. draggable : true,
96. title: "This is my location!",
97. animation: google.maps.Animation.DROP
98. };
99. var googleMarker = new google.maps.Marker(markerOpt);
100. // Find the address of your location
101. var geocoder = new google.maps.Geocoder();
102. geoCodeMe(googlePos);
103. // update results if user moves the marker.
104. google.maps.event.addListener(googleMarker, 'dragend', function(event){
105. // assign location to variables.
106. var lat = event.latLng.lat();
107. var long = event.latLng.lng();
108. // create a geocode instance for converting into address.
109. var geocoder = new google.maps.Geocoder();
110. // create a google maps lat long object.
111. var latlng = new google.maps.LatLng(lat, long);
112. geoCodeMe(latlng);
113. });
114. function geoCodeMe(latlng){
115. // convert lat long to human readable address.
116. geocoder.geocode({'latLng' : latlng}, function(results, status){
117. if (status == google.maps.GeocoderStatus.OK){
118. if(results[1]){
119. console.log(results[1]);
120. var mylocation = {
121. address : results[1].formatted_address,
122. lat : results[1].geometry.location.nb,
123. lng : results[1].geometry.location.ob
124. }
125. $('.currentLocation').html(mylocation.address);
126. localStorage.setItem('location', JSON.stringify(mylocation));
127. } else {
128. alert('No results found');
129. }
130. } else {
131. alert('Geocoder failed due to: ' + status);
132. }
133. });
134. }
135. }
136. // this function is invoked if an Unknown error occurred, timeout, user denied access or location unavailable.
137. function showError(error){
138. switch(error.code){
139. case error.PERMISSION_DENIED:
140. alert("User denied the request for Geolocation.");
141. break;
142. case error.POSITION_UNAVAILABLE:
143. alert("Location information is unavailable.");
144. break;
145. case error.TIMEOUT:
146. alert("The request to get user location timed out.");
147. break;
148. case error.UNKNOWN_ERROR:
149. alert("An unknown error occurred.");
150. break;
151. }
152. }
153. });
154. });

Changing pages in IE8 doesn't work!
[2Replies]
- 18-Nov-2011 04:26 AM
- Forum: jQuery Mobile
I have had this problem for a while now and really need to get to the bottom of the issue.

The site in question:

m.fifedirect.org.uk

The problem is with IE (<= 8) havent testing on 9.

The jquery stuff that switches between pages throws an error and hangs at the loading dialog. When I manually type each page it works. When I turn javascript off it works. FF, Safari, Chrome, Opera all work.

I have tried all combinations of versions of both jquery and jquery mobile with no luck.

error message in IE:

"Unexpected call to method or property access."
1. // resolve with given context and args
                  resolveWith: function( context, args ) {
                      if ( !cancelled && !fired && !firing ) {
                          // make sure args are available (#8421)
                          args = args || [];
                          firing = 1;
                          try {
                              while( callbacks[ 0 ] ) {
                                  callbacks.shift().apply( context, args );
                              }
                          }
                          finally {
                              fired = [ context, args ];
                              firing = 0;
                          }
                      }
                      return this;
                  }

I cant solve this error in IE8 that stops the linking between pages.
[5Replies]
- 26-Oct-2011 05:41 AM
- Forum: jQuery Mobile
site: m.fifedirect.org.uk

Works fine in all modern browsers but in IE the homepage loads fine but I cant move around the site.
1. I get this error: Unexpected call to method or property access.
Has anyone come up against this issue or is willing to have a look at the source.

I can't figure it out. I think it may have to do with using HTML5 elements throughout but I have added a html5 shim.

Also when i turn of javascript on IE8 everything works fine.

Cheers
Steven

My new site - All feedback welcome
[2Replies]
- 07-Oct-2011 10:09 AM
- Forum: jQuery Mobile
http://m.fifedirect.org.uk

this is a mobile conversion of http://www.fifedirect.org.uk which has a tonne of info.

1st Phase release

next phase will include online forms, geolocation.

$.mobile.page.prototype.options.addBackBtn = true; Breaks IE8
[1Reply]
- 22-Sep-2011 09:58 AM
- Forum: jQuery Mobile
I was just doing some testing of my jqm site when I came across a problem when clicking a link on IE8. When i click a link I just get the loading screen forever.

I targeted that if I comment out the code below from my custom js then I can click all over the site in IE8
1. $(document).bind("mobileinit", function() {
  $.mobile.page.prototype.options.addBackBtn = true; //THIS LINE IS THE PROBLEM I THINK!!
  $.mobile.selectmenu.prototype.options.nativeMenu = false;
  });
Has anyone come across this issue before or have any advise for me.

The site in question.

Fifedirect Mobile Version

JQM Back button remeber previous page position
[3Replies]
- 02-Sep-2011 06:03 AM
- Forum: jQuery Mobile
Hi,

Do you know how to make the jqm back button point to the previous page position of the used link as I have many pages with long lists and it would be nice if the user was directed to the position in the list he linked from.

Cheers
Steven

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend