[support-michael]

Form with Dynamic Page (AJAX) Result Example

Creating mobile web forms with MobiOne is a simple process. The following example is of a basic login form that transitions to a welcome page upon completion. The designer mobi files and the customized php code are provided as an attachment at the end of this article.

Note to deploy and test the login-form webapp you will need access to a PHP web server.

Designing Form and Result Pages
1. I start by laying out the user interfaces for the login.mobi form page and the welcome.mobi page in the Design Center.

2. Next I configured the login form as follows:
Form Action URL = “welcome.mobi”
Form Result = “Dynamic Page”

These login.mobi properties will result in HTML runtime code that will submit the login form data to the welcome page on the deployed server. The “Dynamic Page” result value instructs MobiOne to use an AJAX mechanism (XHR) to submit the form and then merge the resulting content (i.e., welcome.php) into the current DOM.

The Login button was added with Form Action = “Submit”.

See attachment login-form-DC-illustrated.png

Export as HTML and Customize with PHP
I exported the code as HTML to my local file system and then with a text editor modified welcome.php to replace the “<userid>” labels in the design with the value of the User Id field from the login page.

See attachment login-form-TC-illustrated.png

Deploy Webapp
Lastly I uploaded to our genuitec.com server and tested the following URL in the Test Center browser: http://genuitec.com/mobile/mobione/1.0/examples/login-form/login.html Note: this link will only work on the Test Center or a WebKit-based browser such as Safari or Chrome.

login-form project archive
See attachment login-form.zip

Attachments:

You must be logged in to view attached files.

[Albatros78]

Hey,

Seems very nice solution…

2 things:

How

and

Where put some code to check if the login name and password are not blank before to go to the next page.

Sample pls ?

[support-michael]

One place to put validation code is in the preSubmitForm_m1_login() function in login_custom.js.

function preSubmitForm_m1_login(form) {
  // add custom presubmission code here, e.g., form validation & error handling
  // return false to terminate form submission
  
   if (isBlank( $('#m1-login-userid').val()) ) {
      alert('User id is empty');
      return false;
   }    
   if (isBlank( $('#m1-login-passcode').val()) ) {
      alert('Passcode is empty');
      return false;
   }
    
  return true;
}

function isBlank(str) {
    return (!str || /^\s*$/.test(str));
    //credit http://stackoverflow.com/users/389026/janogonzalez
}

[kaza007]

Sorry Wayne,
I can’t get it to work.

I get a blank page.

Edited the php file with one line of php, did not work.
Edited the php with one line of html code and that did not work either.

Has anyone else got this example working yet?

[hughabbott]

Hello Wayne – I tried to run the sample login pages.

I ran it in the test centre and it doesn’t seem to work?
I click on the green button and nothing happens ?

I’d love to get this to work.

Hope you can help.

Hugh

Hugh Abbott
http://www.theitsolution.co.uk/index.php/phone-systems-london.html

[support-michael]

@hughabbott

I’m tied up helping test and document features of a new release of MobiOne that will ship tomorrow. I will give this a look tomorrow after the 1.3 release rolls out (Thurs).

[hughabbott]

Thanks Wayne – I look forward to working with you on this one.

What I’m trying to do is have a list of people (pre-populated) – then let the user select a name and have this name reflected on the next screen.

I’m sure this is a basic need of many apps. I’m sure you can do it within mobiOne … but I don’t know how 🙂

Good luck with the release.

Hugh

Hugh Abbott
http://www.theitsolution.co.uk/index.ph … ondon.html

[compware]

Is it possible to design a website App using Mobione and at the same User registrations, User Authentication and chatting

be done on the site.

Will be compatible using other scripts on the Design Center?

Doing something similar as an APP

http://www.shafri.com

[support-michael]

@compware

> User registrations, User Authentication and chatting

MobiOne is great for quickly laying out the user interface for such use-cases. Custom development is required to implement the use-case functionality such as authentication You have 2 architectural options for how to implement custom functionality:
1) server side scripting using php, jsp, or asp
2) client-side ajax style application implemented on client in JavaScript

[katmag]

This message has not been recovered.

[support-michael]

This message has not been recovered.

[geebee]

This message has not been recovered.

[compware]

The login.js is encoded and can’t be accesible and more so I need a javascript code to open a url to a server for User login details authentications

[InfinitumLyceum]

hej, i also want this to work.
is it possible to make a database with all the names and make the login so only that users can use the app?
i want to make an app for my school with this program.
http://www.genuitec.com/support-genuitec/viewtopic.php?f=8&t=2900

tnx

[zvezdan1]

Hello, does anybody know how to set up at MobiOne guestbook? I’ve searched in hilsmenü, but found nothing …………..

[Author]

Posts