1

I am using the DateBox ( http://dev.jtsage.com/jQM-DateBox/ ) plugin for a page with the latest build of JqueryMobile but am finding an odd bug. When I open my app on index.html and navigate through the pages to the page with the date picker is I get this - http://cl.ly/19022K40472e3k0D0D2H

However if I go direct to the page via the address bar it works fine and shows up as it should.

So just wondering is anyone else having problems with this? Or any idea how to fix it?

Also I might add does anyone know how I can have the current date show in the text field?

Thanks.

Ashley Cooper
  • 41
  • 2
  • 5

2 Answers2

0

1) Looks like it is a problem with the css of datebox not being loaded properly.Are you loading the CSS of datebox in index.html?.In that case,when you directly go to the page with the datepicker,CSS might not be loaded.You can check if datebox css is loaded by using firebug for firefox or the in built developer tool in Chrome/Safari.(Check the resources tab to see all the loaded resources)

2)Check this example - http://jsfiddle.net/BNsPB/. In this example I wrote the code in document ready,in your case you might have to write it in pageinit or pagecreate event handlers

After checking your actual code I think you have to add the above code snippet in the pageshow event handler like this:(Assuming bookingPage is the id of the page)

$("#bookingPage").live( 'pageshow',function(event, ui){
  var today = new Date();
    var todayStr = today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate();
    $('#mydate').trigger('datebox', {'method':'set', 'value':todayStr});
     });
});
user700284
  • 13,540
  • 8
  • 40
  • 74
  • Yep that would be it! I took out the code in the header to clean up the other pages a bit as I thought no need to have that in there if I am not using it. Thanks! – Ashley Cooper Oct 10 '11 at 22:01
  • I was out so didnt get to try that code snipit for showing the date, but I just tried it and it sort of works. It shows up the date in the text field but 1. it changes the format to the wrong format yyyy - mm - dd, before I had it as dd - mm - yyyy and the other thing is when I bring up the calendar it is set to the year 1918 by defult. Taking away that script and it all goes back to normal. Any ideas why its doing that? – Ashley Cooper Oct 11 '11 at 23:09
  • Its all good I fixed it :) just changed this line around and it fixed the date format and also the stopped it showing 1918 year. var todayStr = today.getDate()+"-"+(today.getMonth()+1)+"-"+today.getFullYear(); – Ashley Cooper Oct 11 '11 at 23:13
  • Spoke too soon.. and sorry time passed I could not edit the last comment. It seems to be like problem had with the datepicker in first place, not showing up when linked to the page. But I have made just the script you did is on the index page as well as the booking time page. This is what the header code looks like - jsfiddle.net/JBYmV – Ashley Cooper Oct 11 '11 at 23:48
  • you mean to say you still have the issue? – user700284 Oct 12 '11 at 05:02
  • Well yeah, its working fine direct to page but not working when get to the page via other pages. Much like first problem I had with the datebox not showing up. However unlike the problem with the date box which was fixed by including the script in the header of the index.html doing that for the script to show the date in the text field does not work. You can see it here - http://app.appointuit.com/xcode/booking.html works but if you goto http://app.appointuit.com/xcode/index.html and navigate to the booking page is does not work. – Ashley Cooper Oct 12 '11 at 06:24
  • Edited the answer for the text thing to work.Regarding the styles of the datebox,just try the answer to this question.http://stackoverflow.com/questions/7449402/jquery-mobile-mobile-changepage-not-loading-external-js-files/7449731#7449731 – user700284 Oct 12 '11 at 16:28
0

You need to load the files in the actual file that your site navigates to in the first instance (index.html presumably). It sounds like you have only referenced the CSS and plugin code in your date picker page, but in default mode jQM uses an ajax hash-based navigation system, so you need to reference assets in such a way that they are available right from the get-go.

Ben
  • 7,548
  • 31
  • 45