Mobile Browser Web Page Solution

Hi all,

I have a requirement to create a web page that is compatible on all mobile web browsers but I'm completely stuck on the design of the solution.

I have been tasked with building a single web page that users complete and then at the bottom of the page, are given the option to save a draft (to return at a later date and complete) or mark the form as complete (which finalises the process). The form is just a standard HTML form with form elements such as text boxes, buttons and drop down lists. There is no ajax, advanced CSS or jquery etc. Sounds simple right?

The two major constraints which are making this difficult are:

1/ After the web page is loaded, the user must be able to complete the form disconnected from any internet connection and then move into an internet zone, reconnect and save the form.

2/ On clicking certain buttons, a popup must appear and they cannot return to the parent page until they click cancel or save.

How can I handle popups when for example the iphone launches them in a seperate screen?

How can I create a DIV popup when I cant use AJAX to get the rendered HTML, or use javascript to manipulate the DIV when it might not be supported?

Since the page is going to be used by mobile and desktop users I'm generating the form in XML and using XSLT to transform depending on the viewing platform. I thought I could then hold the original XML Document in a javascript global variable and any changing, deleting or adding to the form elements I could use js to update the XML Document, which would then be posted to the server on save. But not all mobile browsers support javascript.

This is my first ever mobile project so I'm really stuck on this one. Soo .... calling all IT professionals, if anyone could help me with this and point me in the right direction I would be eternally grateful!

Thanks in advance.

Hi, Not come across the confirm method so will check it out, thanks! The popup will include a form (textboxes, buttons etc) and a table. The user will need to be able to delete a row from the table and edit a row and create a new row using the form. All the while I need to record the user input as the user may be disconnected, hence my (nieve?) Xml Document solution. If I'm forced to use javascript then so be it, but not all browsers support the same version of ECMA script or DOM and my plan to manipulate the Xml Document might not be possible.

Chris D 2010-02-08 15:22:22

Ah — yeah, `confirm` doesn’t work for HTML content. I’m not quite clear on how XML helps for the whole “accept input whilst offline, submit when online” problem. HTML plus JavaScript seems the way to go there (I’m thinking a JavaScript AJAX call to check you’re online before submitting, returning false if not). As far as JavaScript support goes, I’d just check what phones people at your client company use. If it works on those, plus phones that are actually popular (i.e. the iPhone), you’re golden.

Paul D. Waite 2010-02-08 19:44:46

The part where they reconnect to save the form was written by someone else and is purely based on the trust the user IS in an internet zone, all they programmed was a delay of 2 seconds so it can reconnect before it sends the data. This works, but needs changing since any error and they will lose their form data. I'm going to have to create some prototypes using all the javascript I intend to use and test it through some emulators. Not a small job but I guess it needs to done, trial and error here i come!Thanks

Chris D 2010-02-09 10:46:22

Huh. Yeah: the way HTML forms work, the data just sits there in the browser until the user clicks the submit button. You can listen for the `onsubmit` event of the form in JavaScript, and not submit if the user isn’t connected to the internet (guess at this with the AJAX call).For more permanent client-side storage of the form data, you’re basically screwed (I don’t think XML helps here), except if you use HTML5 offline storage (supported by the iPhone, I think, but probably no other mobile phones except possibly Android).

Paul D. Waite 2010-02-09 12:46:29

Hey best of luck with it anyhoo.

Paul D. Waite 2010-02-09 12:55:59

Hey, thanks alot. I'm currently doing some tests on DOM level 2 javascript code so hopefully it can do all I need and most mobile browsers will support it. Fingers crossed it works or i'm screwed :) thanks for the help.

Chris D 2010-02-11 08:46:24

ansaurus

tags:

views:

answers:

Mobile Browser Web Page Solution

related questions