0

I have been making this app for a while and the whole time I have been using $(document).ready(function(){ to start my javascript and now I have run into a problem where I am using ajax to call in json arrays and organize them into lists. After some research I found that I need to now use $(document).bind("pageinit", function(){ When I change it I stop getting all the console errors I was getting before but now the ajax calls will not work. Is there anything else I have to do besides changing $(document).ready(function(){ to $(document).bind("pageinit", function(){

chrispytoes
  • 1,714
  • 1
  • 20
  • 53
  • in what way do the ajax calls not work? – Patrick Evans Apr 06 '14 at 19:11
  • @PatrickEvans They get skipped entirely, its like their not even there. Not even throwing an error. – chrispytoes Apr 06 '14 at 19:19
  • Read this http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/ – Omar Apr 06 '14 at 19:35
  • @Omar My entire app takes place in one single page, I will not have multiple pages in my app. The only reason I need to use this is because without it, the elements that my ajax calls are in will not refresh, even after calling their refresh methods. So with that just using $(document).bind("pageinit", function(){ in place of $(document).ready(function(){ should work right? – chrispytoes Apr 06 '14 at 19:51
  • So are the http requests (a) not being made, (b) being made but returning an error, or (c) being made and returning normally but the success/done handler(s) running silently? Do some tests to work out which it is. – Roamer-1888 Apr 06 '14 at 20:21
  • _Single page_ = each page in one file. _Multi-page_ = all pages in one file. What are you using right now? – Omar Apr 06 '14 at 20:21
  • @Omar I am using a single page – chrispytoes Apr 06 '14 at 20:29
  • @Roamer-1888 the ajax calls are not made at all when using $(document).bind("pageinit", function(){ – chrispytoes Apr 06 '14 at 20:30
  • With Ajax enabled, `pagecreate`/`pageinit` will work. Make sure you place custom JS (e.g. Ajax calls) inside each page's `data-role=page` div. Read [more here...](http://stackoverflow.com/a/22860434/1771795) – Omar Apr 06 '14 at 20:33
  • @Omar There is only one data-role=page div for the entire app. Does that mean that I need to move all my JS to the inside of the data-role=page div? Because I have already tried that and it didn't work. I have been working on this for a while and have not hit any roadblocks like this until now. Do I have to re-arrange all my code now? – chrispytoes Apr 06 '14 at 20:42
  • You have ONE page div only "one page"? – Omar Apr 06 '14 at 20:49
  • @Omar uhh yeah... Is that a problem? – chrispytoes Apr 06 '14 at 20:52
  • No, not at all. I still unable to get the problem you're facing. you should add more details, code, etc... or at least, post a live link. – Omar Apr 06 '14 at 20:59
  • @Omar It's a little big for a fiddle so here a download link. index.html is the main file, This has the working ajax calls in it. to see it work just click the panel button in the top left and select some items from the list then click done, next close the panel and the list will populate with appropriate collapsibles. To get the collapsibles to style properly type something in the search bar and it will refresh it. Same goes for the filter panel list. http://www.mediafire.com/download/pfgl0tzs7f538o7/Navistar.zip also, you have to use ripple emulator for the ajax to work. – chrispytoes Apr 06 '14 at 21:09
  • @Omar The Problem I have is that when using $(document).ready(function(){ I cannot use the refresh methods for anything, they throw an error in the console. – chrispytoes Apr 06 '14 at 21:20
  • you're using 3 jQuery-core libraries. remove 1.11.1, migrate.js and jquery.min.js. Keep jQuery 1.9 – Omar Apr 06 '14 at 21:49
  • @Omar Done, but that didn't change anything. – chrispytoes Apr 06 '14 at 22:15

0 Answers0