PDA

View Full Version : My nested list doesn't showup on iPhone / iOS but does work in safari



martinbroos
7 Jun 2011, 2:07 AM
I have this weird problem that sneaked in while developing. Somehow my nested list doesn't show up on the iphone / ipad. Same goes for the simulators.

The strange part is it does work on android and in safari browser on desktop. When i first started out it did work so something must have happend but i can't find the solution. Broke down my code completely but no results.

My view code



beheerpaneel.views.PagesIndex = Ext.extend(Ext.NestedList, {
id: 'list',
fullscreen: true,
layout: 'card',
listeners: {
render: function(c){
//add buttons to default NestedList toolbar ( NOT NEEDED ANYMORE)
//c.toolbar.add(buttonsTop);
}
},
title: 'Pagina beheer',
useTitleAsBackText: false,
backText: 'Terug',
displayField: 'title',
store: beheerpaneel.stores.Pages,
loadingText: "Pagina's worden geladen...",
onItemDisclosure: true,
onItemTap: function(subList, subIdx, el, e){

// Clear the selection soon
setTimeout(function(){subList.deselect(subIdx);},500);

//check if disclosure button is being pressed or the list itself
if (e.getTarget().className == 'x-list-disclosure')
{
// Go deeper in nested list -> to subpages
beheerpaneel.views.PagesIndex.superclass.onItemTap.call(this, subList, subIdx, el, e);
}
else{


//Get id of selected item
var selectedItem = subList.getRecord(el);

Ext.dispatch({
controller: beheerpaneel.controllers.Pages,
action: 'detail',
id: selectedItem.data.id,
historyUrl: "pages/detail/"+selectedItem.data.id+"/",
animation: {type:'slide', direction:'up'},
});

}
},
initComponent: function() {

//init view
beheerpaneel.stores.Pages.load();
beheerpaneel.views.PagesIndex.superclass.initComponent.apply(this, arguments);
}
});


If you guys need the JSON or store code let me know. But i can garantee that it works in desktop browsers :s

martinbroos
8 Jun 2011, 12:15 PM
Doesn't anyone experienced this problem before? Strange to me that i'm they only one.

Why would it work normal in android / safari but not in iOS on iphone?

Geoffrey Freedom
8 Jun 2011, 8:55 PM
I have a similar problem with my nested list not showing up on any mobile device unless there is an orientation change but it works perfect in safari/chrome. Maybe it is the same issue? Any help on these problems would be a life saver. Thanks!

martinbroos
8 Jun 2011, 11:52 PM
I used the debug function on iPhone safari to check if there were any errors. And yes it gave me two json parse errors... thank you apple for giving us mobile debugging.

Undefined : Ext.data.JsonReader.getResponseData : Unable to parse JSON returned by server.


Oke now we have an error that says the json isn't any good. But problem remains why is it valid on desktop with no errors?

Here small piece of the returned json:



{"id":"pagina's","items":[{"id":"bestel","title":"Bestel","inMenu":"0","items":[{"id":"bestel-ogone","title":"Bestel-Ogone","inMenu":"1","leaf":true},{"id":"bestel-rembours","title":"Bestel-Rembours","inMenu":"1","leaf":true},{"id":"bestel-vooruitbetaling","title":"Bestel-Vooruit","inMenu":"1","leaf":true},{"id":"afgerond","title":"Bestelling afgerond","inMenu":"1","leaf":true},{"id":"gegevens","title":"Stap 1: Uw gegevens","inMenu":"1","leaf":true},{"id":"betaalwijze","title":"Stap 2: Betaalwijze","inMenu":"1","leaf":true},{"id":"overzicht","title":"Stap 3: Overzicht van uw bestelling","inMenu":"1","leaf":true}]},{"id":"colofon","title":"Colofon","inMenu":"1","leaf":true},{"id":"contact","title":"Contact","inMenu":"1","leaf":true},{"id":"disclaimer","title":"Disclaimer","inMenu":"1","leaf":true}


Maybe it has something to do the title where sometimes enters or : signs accure ?

martinbroos
9 Jun 2011, 12:58 AM
I stripped my json code to the minimum so only the id's are in it. Checked the json on jsonlint.com validator. Which has no errors and still it doesn't show on iphone...

i'm clueless ...

Any ideas anyone?



{"id":"pagina's","items":[{"id":"bestel","items":[{"id":"bestel-ogone","leaf":true},{"id":"bestel-rembours","leaf":true},{"id":"bestel-vooruitbetaling","leaf":true},{"id":"afgerond","leaf":true},{"id":"gegevens","leaf":true},{"id":"betaalwijze","leaf":true},{"id":"overzicht","leaf":true}]},{"id":"colofon","leaf":true},{"id":"contact","leaf":true},{"id":"disclaimer","leaf":true},{"id":"home","leaf":true},{"id":"klantenservice","items":[{"id":"algemene-voorwaarden","leaf":true},{"id":"bestellen","leaf":true},{"id":"betalen","leaf":true},{"id":"privacy","leaf":true},{"id":"ruilen-en-retourneren","leaf":true},{"id":"suggesties-en-klachten","leaf":true},{"id":"verzending-en-bezorging","leaf":true}]},{"id":"unsubscribe","items":[{"id":"nomatch","leaf":true},{"id":"success","leaf":true}]},{"id":"subscribe","items":[{"id":"syntaxerror","leaf":true},{"id":"success","leaf":true}]},{"id":"ogone","items":[{"id":"cancelled","leaf":true},{"id":"error","leaf":true},{"id":"success","leaf":true}]},{"id":"over-displaywinkel","items":[{"id":"bedrijfshistorie","leaf":true},{"id":"referenties","leaf":true}]},{"id":"partnersites","leaf":true},{"id":"display","items":[{"id":"aanbiedingen","leaf":true},{"id":"folderhouders-enkelvoudig","leaf":true},{"id":"folderhouders-meervoudig","leaf":true},{"id":"fotolijstjes","leaf":true},{"id":"fotolijstjes","leaf":true},{"id":"fotolijstjes","leaf":true},{"id":"groene-bio-displays","leaf":true},{"id":"kaarthouders","leaf":true},{"id":"krijtborden","leaf":true},{"id":"l-standaards","leaf":true},{"id":"opvouwbare-folderdisplays","leaf":true},{"id":"posterlijsten","leaf":true},{"id":"raam-en-wandkaarthouders","leaf":true},{"id":"stoepborden","leaf":true},{"id":"t-standaards","leaf":true},{"id":"toebehoren","leaf":true},{"id":"visitekaarthouders","leaf":true},{"id":"wandfolderhouders","leaf":true},{"id":"winkelinrichting","leaf":true}]},{"id":"winkelwagentje","leaf":true}]}

martinbroos
15 Jun 2011, 2:23 AM
After some more searching on this problem i found out that it goes wrong when the data gets parsed with php.

The strange part is when i save the generated json as a static file it does work on iPhone :-?
So looks like the browser fixes some issues while parsing that the safari on iPhone doesn't do ..

It can't be character related cause when i strip the complete thing is still doesn't work. I guess its the combination of the nestedlist parser and iPhone.

Someone got the same problem or a sollution? Would be strange if i'm the only one experiencing this ...

colworx
15 Jul 2011, 11:22 AM
Hey, I'm having this same problem! I took the same steps that you did so far to try and debug the issue. I posted a thread about in on the Premium forums. I'll let you know when I find a fix or workaround.

Does the sencha nestedlist example work for you on iOS? It does for me, which leads me to believe the problem has something to do with the combination of our app code and our php. What does your code for beheerpaneel.stores.Pages look like?

martinbroos
15 Jul 2011, 11:31 AM
Ok thnx, glad to hear that someone else is facing this problem. Premium Forums would be the best place to get to the bottom of this bug.

Let me know! thnx

martinbroos
15 Jul 2011, 11:39 AM
The code from the kitchensink does work but that is loading from a static json. In a other thread about this we found out that serving the file as static json whitout generating it from a webservice it does work on iOS.

So it has something to do with the parsing of the generated JSON or when creating it in PHP. But putting it in jsonlint.com it does validate.

my store file :



beheerpaneel.stores.Pages = new Ext.data.TreeStore({
model: 'beheerpaneel.models.Pages',
autoLoad: false,
proxy: {
type: 'ajax',
url: '/mobile/api/mobileData.php?action=getSenchaPages',
reader: {
type: 'tree',
root: 'items'
}
}
});


Weird part is that most iphone 4 and iPad devices do work. But simulator or iPhone 3 doesn't . Android will always work.

colworx
18 Jul 2011, 11:23 AM
Martin, I don't mean the kitchensink example, i mean the nestedlist example, which is loaded with ajax. Look in sencha/examples/nestedlist/.

This is that example's TreeStore code:


var store = new Ext.data.TreeStore({
model: 'File',
proxy: {
type: 'ajax',
url: 'getSourceFiles.php',
reader: {
type: 'tree',
root: 'children'
}
}
});

martinbroos
19 Jul 2011, 12:06 AM
That example : http://dev.sencha.com/deploy/touch/examples/nestedlist/

Seems to work fine.. could it be something with the server the data is coming from?
Still no clue whats wrong with the nested list in combination with a json webservice request.

You are right that this is only a issue with the nested lists, normal lists will work fine in the same way.

colworx
19 Jul 2011, 6:04 PM
I had the same problem when trying to make a generic Ajax request -- not for a nested list. This led me to investigate.

Look for this code in sencha-touch-debug.js:


Ext.util.JSON = {
encode : function(o) {
return JSON.stringify(o);
},

decode : function(s) {
return JSON.parse(s);
}
};


and add a console.log(s); in the decode function. It may give you some clues.

In my case, it turns out that my mobile phone detection code was interfering with my ajax requests, so it was returning HTML, but only on my iPod, where there are less dev tools available to look around.

siebmanb
9 Sep 2011, 2:04 AM
I found the solution !
When you test in your browser, you give data through HTTP (you are running on a Webserver). When you test in Xcode, if you don't change anything, the php file (getSourcesFile.php) isn't call through HTTP.

What you have to do is placed the file getSourcesFiles.php on your web server and access it from the app.

Your proxy in index.js should look like this :

proxy: {
type: 'ajax',
url: 'http://localhost:8888/getSourceFiles.php',
reader: {
type: 'tree',
root: 'children'
}
}

martinbroos
9 Sep 2011, 5:43 AM
Really hoped it was that easy..

I tried your solution but did noting for me. I changed my stores path from :

/mobile/api/mobileData.php?action=getSenchaPages

to

its direct path :

http://www.dummydata.nl/mobile/api/mobileData.php?action=getSenchaPages

but still get No items availeble on iPhone simulator and device. Still works on Android and browser...
Do i miss anything?

siebmanb
9 Sep 2011, 5:50 AM
Sorry I don't know :(.
Good luck :)

ely18v
24 Oct 2011, 6:18 AM
I seem to have the same problem, I'm trying to read some data using a php file on my server. This file returns valid JSON data (jsonlint.com validated) and is displayed fine in a nested list on my Android application and my Web Application. Now, when I moved the app to Xcode 4 + Phonegap the JSON simply does not load in the simulator. The application loads normally, but the JSON is MIA.
I'm using a Treestore with a proxy of type 'ajax'.

I can't see what is different in Xcode 4.

Edit: I found the solution! It was caused by PhoneGap. I had to add my url to Supporting Files -> PhoneGap.plist so it wouldn't get whitelisted.

Sasha172
8 Feb 2012, 4:11 AM
Had the same problem and fixed it.

In iOS Safari doesnt parse the JSON data and throws up an error. However, the same file can be read by the browser if renamed to file.js

What I ended up doing was converting the json file to a .js file. You can save your data inside a variable that is the same as the file name and then read it onto the iOS device :)

Lemme know if you need more detailed examples.