how to setup a login with a login-form on each page in Jquery Mobile and Coldfusion8?

Question

I'm trying to setup user authentification in Jquery Mobile/Coldfusion8. I'm using Coldfusion for just a week so I'm still on shaky ground.

Say I have the following Jquery Mobile pages:

// "outside"
index.cfm
content.cfm
content2.cfm
content3.cfm
// "inside" 
secure.cfm

The user should be able to login from all outside pages using a login form.

I'm trying to think of the best way to handle this with multiple content pages and each one having it's own login (can't change this). The problem will be, when changing pages, I will always have at least two pages in the DOM, so there will be two login forms both named "LoginForm".

I tried nevertheless, and am getting this error:

Variable THISFORM is undefined

not sure as to why? Probably because there already is a "loginForm" on the index.cfm page.

My question:
Any clues on my error?

What would be the best way to set something like this up? I think the whole login-routine should go into the index.cfm, since this will be the anchor page, that always stays in the DOM. I also put the login-form inside a template and pull this into every page, which also feels right.

But how should multiple instances of my loginform be handled?

Thanks for help

EDIT: Some code:

<!-- TEMPLATE -->
<CFFORM ACTION = "#ThisForm#" NAME = "LoginForm" > 
    <input name = "Username2" id="Username2" type="text" /> 
    <input name = "Password2" id= "Password2" type="password" /> 
    <input type = "submit" id="CheckLogin" name="CheckLogin" value="<cfoutput>#tx_login#</cfoutput>" /> 
</CFFORM>

<!-- INDEX PAGE and content pages all look like this -->
<cfoutput>    
    <div data-role="page" id="starter">
        <div data-role="header" data-position="fixed" data-theme="a">
            <h1><cfoutput>#tx_willkommen#</cfoutput > </h1>    
            <!-- this calls the template -->
            <CFINCLUDE TEMPLATE="../templates/tmp_pop.cfm">
        </div>
        <div data-role="content "...
</cfoutput>

<!-- inside application.cfm -->
<cfif Session.ative EQ "No ">
    <CF_index datasource="mydatabase "
        ...>

<!-- inside index.cfm -->
<cfif Session.ative EQ "No ">
    <CFPARAM NAME="Attributes.Datasource ">
    <CFPARAMs more params...
</cfif>

Not sure this is helpful, but you should get the basic structure from this. Could it be the problem, that I'm setting parameters only on index.cfm IF no session is active. If a user goes to index.cfm, params are set, a session is created. I thought when I pull in the next page into the DOM, these parameters are still active, aren't they?

Answer 1

I've never done any mobile development, but what we do is just set a cookie, with a expiration, and check that cookie every time a user tries to access a page and just include that cookie check file

<cfinclude template="cookie_check.cfm">

cookie_check.cfm:

<CFIF IsDefined("cookie.User_Id") is False OR isDefined("cookie.password") is False
    <title>Login Error</title>
    <h3>You must login . Click here to <a href="index.cfm">login</a>.</h3>
    <CFABORT>
</CFIF> 

I"m assuming you could do something like that on your pages. Just include a small check file, and if it is expired, show the log in page.