Google Chart Map Chart Android Select Event Tutorial
If you read this blog a lot you’ll have gathered our physical link into the “woooooooorld of Android” is via a Samsung GT-S5310B mobile phone. You can see it there in today’s tutorial picture and think, though there is nothing there to help you “scale”, you can probably guess it is a “palm of the hand” (plus a bit) screen size. But it is not really the screen size (being relatively small) that is the issue we are talking about today regarding the use of the Javascript window.prompt function, but rather its rendering with the Android operating system, when the prompt has many “lines” of text … our concern is defined in Javascript via …
function ourprompt(ourp1, ourp2) {
var ourp1lines=ourp1.split(String.fromCharCode(10));
if (ourp1lines.length > 10) {
if (navigator.userAgent.match(/Android/i)) {
while (ourp1.indexOf(String.fromCharCode(10)) != -1) {
ourp1=ourp1.replace(String.fromCharCode(10), ' ');
}
ourp1=ourp1.replace('Is there something you want to try with ','Options for ');
ourp1=ourp1.replace('Comma Separated Values Spreadsheet Export','CSV Export');
ourp1=ourp1.replace('Email with or without Talking Point','Email');
ourp1=ourp1.replace('else leave as blank or as is or choose Cancel to leave the status quo.','else ...');
ourp1=ourp1.replace('Moon Angle at Noon','Moon Angle');
ourp1=ourp1.replace('(where it is ','(');
}
}
return prompt(ourp1, ourp2);
}
… at ten lines of text, that can most frequently happen these days with the window.prompt onclick “select” event functionality we present with the more “supervised” usages of the Google Chart Map Chart, like, for example, with its use with yesterday’s Weather API via Iframe jQuery Ajax AutoComplete Tutorial. When that window.prompt first parameter “prompt” string is about ten lines of text long, Android swallows up the user entry text field for keeping the prompt intact, unlike iOS, for example, which works it the other way around.
Okay, that is the definition of a problem. Cross platform problems are very common. Now for approaching a solution, you could …
- invent an approach for all platforms that also works on Android … perhaps a jQuery Dialog box … or …
- intervene with our own Javascript function overseeing the call to window.prompt that identifies the “ten lines plus Android” conditions for when to intervene
… and we decide on the latter. All this change can be handled in the Google Chart Map Chart web application PHP you could call map.php, and which changed in this way. And if you have an Android, only, you may see this change in play if you try the same live run featuring in yesterday’s Weather API via Iframe jQuery Ajax AutoComplete Tutorial and access a “grandchild” Google Chart Map Chart onclick “select” event window.prompt whose “prompt” string has been massaged for use via …
- Line Feeds become two space characters … and …
- several text shortenings within the “prompt”
… that looks to be solving the issue, at least for Android mobile phones of the screen size of the Samsung GT-S5310B or bigger (and maybe smaller … please keep the cards and letters rolling in).
If this was interesting you may be interested in this too.
