Need Responsive Nav bar which supports Coldfusion links

ColdFusion is server-side, by the time your page loads, there is no coldfusion code in existence.  Therefore, CF is compatible with anything you're trying to do in HTML5 or bootstrap, etc.    

Try this.   Temporarily comment out your CFINCLUDE statements and just type in a bit of text "This is tab one" etc.    Get your tabs working and then put your cfinclude back in.    If your CFINCLUDE breaks the tabs, it can be cause it generates something like extra <div> that is not closed, etc.  

Looking at your link, there is a ColdFusion error on your page,   having an error will interrupt the completion of drawing your page, so you cannot expect the javascript to work unless the page loads successfully.    The error says   Element MEMBERID is undefined in SESSION

Make sure you add <cfset session.memberID = ""> to your onSessionStart function in your application.cfc file.   A session variable should be declared there so it always exists, even if not populated.

Ah !!!!!!  Please excuse me !!!!!!!!!!!!!!

I have been running login.cfm each time  BEFORE running the page home1.cfm.  Loginform.cfm sets up the session variable and the error you got when running the link does not occur.  When you ran the home1.cfm page, the session had timed out. If you would:-

First run http://cannes-beaux-arts.com/office_19/loginform.cfm   ....................... with un/pw  kane/26479
Then run http://cannes-beaux-arts.com/office_19/home1.cfm

You will then see that tabs 2, 4 and 5 have been executed successfully - so tabs are working. HOWEVER :-

While tabs 2 and  4 are correctly positioned, tab 5 has been positioned outside the container (see VOTRE INFORMATIONS, top left of output).

I also note that both tab 2 and tab 5 are coldfusion pages - but tab 5 cfm needs the memberID session variable wheras tab2 does not.
Tab 4 is just text, and you will see that at the bottom of the home2.cfm output.

For your convenience, here is the section of code relevant to above

<div class="tab-pane" id="tab2">
          <cfinclude template="activities.cfm">
        </div>
        
        <div class="tab-pane" id="tab4">
          <p>I'm in Section 4.</p>
        </div>
        
        <div class="tab-pane" id="tab5">
          <cfinclude template="frame_member_middle_testing.cfm">
        </div>

Select allOpen in new window

CONCLUSION/THOUGHTS.  
* Problem is not a result of defective cfm pages
* Problem only occurs with pages which use session variables ?  Takes too long for server to respond ?
* I'm thinking this navbar from w3schools does not support use of coldfusion. If not, is there an alternative approach ?

Thank you very much for taking the time to respond myquestion.

James

James,
With respect, I have to emphatically say that you are absolutely wrong.   Please believe me when I say that the ColdFusion language itself has nothing to do with your issue.  That is both wrong in theory and in practice.  In theory, the ColdFusion code has fully executed and is completely gone by the time your page loads.  When the jquery/HTML5 takes over when the browser loads, the coldfusion no longer exists.  So in theory, they cannot conflict.  In practice, I have used HTML5 and bootstrap tabs with coldfusion in many, many pages, they work perfectly together.

I tried to follow your instructions - after login, I saw nothing but a blank page.  On refresh of that page, it said form.nom was undefined.   Then I plugged in the other URL as instructed and got the same error about session.memberID being undefined.

First - you need to add <cfset session.memberID = ""> to your application.cfc onSessionStart() function.   You should declare any session variable there to prevent this from happening!   It is bad practice not to do it.

Second - take your cfinclude template one-at-a-time and debug them.   Bugs are causing your issue.   Whether the bugs are the errors that I have seen or missing or unclosed html tags, the problems are somewhere in the code.   Start by removing your cfinclude tags and get the tabs working.   Then run the cfinclude portions directly in your URL and debug them.

If you can get the login and page working, I can take another look.
But absolutely do not think there is a compatibility issue.   This code will work guaranteed.

gdemaria,    I have to apologize again.   If you re-read the post I made,  you will see the beginning of the second sentence reads Loginform.cfm.


I have been running login.cfm each time  BEFORE running the page home1.cfm.  Loginform.cfm..................

I'm sorry, but I miss typed it to read login. cfm. BUT, the link I typed below you will see, is

First run http://cannes-beaux-arts.com/office_19/loginform.cfm  ....................... with un/pw  kane/26479

I am attaching

I am attaching an image of part of the screen output after running

Sorry, sent the above without completing it.

So, if you would run

First run http://cannes-beaux-arts.com/office_19/loginform.cfm   ....................... with un/pw  kane/26479
Then run http://cannes-beaux-arts.com/office_19/home1.cfm


you will see the above image.

The code I am using may not be the best written ever, however - the home1.cfm  code is part of an application I have been running for 10 years, without any problems.  So, I can't agree that its down to my code.

I would appreciate it if you could point me to any documentation, tutorials or blogs where I might get some help. I have obviously taken up too much of your time already.

Thank you

Please click this link to see a video of what I'm experiencing.

I'm not saying your code is 'bad' I'm just saying that I am seeing an error.   The page does not complete rendering if CF throws an error, so the jquery will not work.   If you can show me how to get around this error, then I can help further.   Please let me know what I'm doing wrong..

https://www.screencast.com/t/LbtkuvqMpcYs

Hi, thanks for staying with me on this gdemaria.

Here is a link to a video I just made.

HTTP://cannes-beaux-arts.com/office_19/myvideo.wmv

The video starts with memberID not existing in session. I try home1.cfm and get the same result you have got.
I then log in using loginpage.cfm -  this sets up the memberID session via its action page
Thirdly, I again try home1.cfm and this time both pages work - but page frame_member_middle_testing.cfm is outside the navbar - see top left of video.

part of the form action page which sets up the session variable

<title>MEMBER CONFIRMATION</title>
</head>

<body>

<cfif #members_selected.recordcount# NEQ 0 >

<cfoutput>ok PERSON FOUND </cfoutput>

<!---<CFScript>
StructClear(session);
</CFScript>--->
 <cfset session.memberID=#memberID#>
<cfset session.nom=#nom#>

<cfelse> 

Select allOpen in new window

So, for me this shows the code works - but the problem is that the coldfusion page which uses the session variable does not remain in the navbar container.  On the other hand, the activities.cfm page does stay within the navbar container

(no points...)

Are you sure that is the correct password? I tried the steps above and got the same error as in GD's video, even after logging in.  Also, In your video it appears like you typed 6 characters. The password posted earlier only has 5 characters.

page frame_member_middle_testing.cfm is outside the navbar

Also, I agree with what GD said above. Positioning on screen is matter of CSS/HTML, not CF.  As GD suggested, create a few simplified tests to help you pin it down.

Assuming this is the tutorial, it works fine with simple cfm pages (no extra CSS). That suggests a clash between the CSS/HTML generated from the two .cfm scripts and the bootstrap stuff.  

Application.cfc

component {
	this.name = "SomeApplication"; 
	this.Sessionmanagement = true;
	public void function onSessionStart() {
		session.memberID = "ABC123456";
	}
	
}

Select allOpen in new window

activities.cfm

<html>
<body>
	<h1>Actvities</h1>
	<cfoutput>MemberID = #session.memberID#</cfoutput>
	<div style="background-color: yellow;">
	<div id="Panes"><div>
	<h2>What is Lorem Ipsum?</h2>
	<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div><div>
	<h2>Why do we use it?</h2>
	<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
	</div><br><div>
	<h2>Where does it come from?</h2>
	<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p><p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
	</div><div>
	<h2>Where can I get some?</h2>
	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
	</div>
	</div>
</body>
</html>

Select allOpen in new window

frame_member_middle_testing.cfm

<html>
<body>
	<h1>frame_member_middle_testing.cfm</h1>
	<cfoutput>MemberID = #session.memberID#</cfoutput>
	<div style="background-color: orange;">
	<div id="Panes"><div>
	<h2>What is Lorem Ipsum?</h2>
	<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div><div>
	<h2>Why do we use it?</h2>
	<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
	</div><br><div>
	<h2>Where does it come from?</h2>
	<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p><p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
	</div><div>
	<h2>Where can I get some?</h2>
	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
	</div>
	</div>
</body>
</html>

Select allOpen in new window

_agx_  ,  gdemaria

You are right agx, there should be 6 characters  ----  they are 264279 ---   sorry to have wasted your time gdemaria with that typo. Please run the example again with the correct pw.


If you run the example again in my video again - with 264279 :(  -  you will find the following:

There are 3 tabs (2,4,5) in the navbar and there are 3 corresponding results (see also home1.cfm below for ref) which are :

tab 2  ......  <cfinclude template="activities.cfm">  coldfusion page, which does not need session.memberID.
tab 4....... <p>I'm in Section 4.</p> This is just simple text
tab 5.......  <cfinclude template="frame_member_middle_testing.cfm">  coldfusion page which DOES need session.memberID

If the navbar was working correctly:

 when home1.cfm is launched we would see the navbar with tab2 content immediately underneath it. We would NOT see tab4 or 5 content. (this is bacause tab2 was set to be 'active' in home1.cfm (see page code below)

We would then be able to see tabs 4 and 5 by clicking on the navbar tabs.

However, what we are seeing is :-

ALL three tabs are being launched immediately - even though tab2 was the only one set to active.

While the content of all 3 tabs presented is correct - tab2 and tab4 content are aligned under the navbar, but tab5 misaligned to top left.

While the active tab2 nav bar item is highlighted correctly, the other two navbar links are not active.


In Summary :

1. Both Coldfusion pages are launching -  but the page which uses session.memberID is not positioned under the navbar.
2. Navbar is not functioning correctly - tab2 active content should be the only content showing on launch - Navbar menu items are not live.
3. Its clear that the problem exists, independantly of coldfusion. I created a seperate page - home2.cfm, which has no coldfusion content. You
   can try this on line. You will see that the navbar menu items are not working and that all content is immediately displayed.

FOOTNOTE
I continue to use the login page, because this is how I will operate.  A client will need to login using his/her un/pw. On completing the login successfully, the client will be automatically be assigned a  memberID session variable via the login action page.

Many thanks again to you both for helping.  Sorry for the SCREW UP with the login.



home1.cfm page code is shown below. Line 36 is where the tab2 content is set to ACTIVE.

This page is based  on w3schools template  COLLAPSABLE NAVBAR on  https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

home1.cfm page

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>
.background {
    width: 100%;
    height: 2000px;
    background-image: url('images/background3.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    <!---border: 1px solid red;--->
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>Untitled Document</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</head>

<body>
<div class="container background">
  <div class="row">

    <h1>ABAC INSCRIPTION 2019</h1>
<nav class="navbar navbar-inverse">
    <div class="container-fluid ">
      <ul class="nav navbar-nav">
        
        <li class=active><a href="#tab2" data-toggle="tab">Programme (2018/19)</a></li>
       
        <li><a href="#tab4" data-toggle="tab">Mise a Jour votre Infos</a></li>
        <li><a href="#tab5" data-toggle="tab">Votre Compte</a></li>
      
      </nav>
      <div class="container">
      <div >
      
       <div class="tab-pane" id="tab2">
          <cfinclude template="activities.cfm">
        </div>
        
        <div class="tab-pane" id="tab4">
          <p>I'm in Section 4.</p>
        </div>
        
        <div class="tab-pane" id="tab5">
          <cfinclude template="frame_member_middle_testing.cfm">
        </div>
        
        
        
        
        
      </div>
    </div>

  </div>
</div>
</div>
</body>
</html>

Select allOpen in new window

THIS IS HOME 2 Page which does not contain any coldfusion content

This page is based  on w3schools template  COLLAPSABLE NAVBAR on  https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>
.background {
    width: 100%;
    height: 2000px;
    background-image: url('images/background3.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    <!---border: 1px solid red;--->
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>Untitled Document</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</head>

<body>
<div class="container background">
  <div class="row">

    <h1>ABAC INSCRIPTION 2019</h1>
<nav class="navbar navbar-inverse">
    <div class="container-fluid ">
      <ul class="nav navbar-nav">
        
        <li class="active"><a href="#tab2" data-toggle="tab">Programme (2018/19)</a></li>
       
        <li><a href="#tab4" data-toggle="tab">Mise a Jour votre Infos</a></li>
        <li><a href="#tab5" data-toggle="tab">Votre Compte</a></li>
      
      </nav>
      <div class="container">
      <div >
      
       <div class="tab-pane" id="tab2">
          <cfinclude template="activities.cfm">
        </div>
        
        <div class="tab-pane" id="tab4">
          <p>I'm tab4.I'm tab4I'm tab4I'm tab4I'm tab4I'm tab4I'm tab4I'm tab4I'm tab4</p>
        </div>
        
        <div class="tab-pane" id="tab5">
           <p>I'm tab5. I'm tab5I'm tab5I'm tab5I'm tab5I'm tab5I'm tab5I'm tab5I'm tab5</p>
        </div>
        
        
        
        
        
      </div>
    </div>

  </div>
</div>
</div>
</body>
</html>

Select allOpen in new window

FURTHER TO ABOVE SUBMISSION



_agx_,    

I took the template you used and slightly changed it to include text input only. There is no coldfusion content. I saved the page as home998.cfm and also home998.html.  Same result in each case .....

I find a result which is  similar to home1.cfm  - in that all the individual tab infos appear immediately and the tabs are not active.

Obviously I am also doing something wrong in connecting the  NAVBAR tab names to their related content.  There are two problem areas - Coldfusion and bootstrap.


THIS IS THE PAGE

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#two">Page two</a></li>
      <li><a href="#four">Page four</a></li>
      <li><a href="#five">Page five</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
  
  <div class="tab-pane" id="tab4">
          <p>I'm in page2.</p>
        </div>
        
        <div class="tab-pane" id="tab4">
          <p>I'm in page4.</p>
        </div>
        
        
        <div class="tab-pane" id="tab4">
          <p>I'm in page5.</p>
        </div>
  
</div>

</body>
</html>

Select allOpen in new window

Whooh, thats  a big advance,  but not quite there yet.  tab5 gave the correct output, but is positioned outside the navbar, as you can see from the image below.  Also,  all 3 tabs were active at the start.  Tabs 2 and 4 worked correctly, but again tab 5, in additional to wrong placement of output, froze the navbar and no tab links worked.

Below is the code for this version you sent me. I changed the name to   home2_new.cfm. You can try is using the procedure as before.

James

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.background {
    width: 100%;
    height: 2000px;
    background-image: url('images/background3.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    <!---border: 1px solid red;--->
}
</style>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>


<body>
<div class="container background">
  <div class="row">

    <h1>ABAC INSCRIPTION 2019</h1>
	<nav class="navbar navbar-inverse">
	  <div class="container-fluid ">
		<ul id="myTab" class="nav nav-tabs">
			<li class="active"><a href="#tab2" data-toggle="tab">Programme (2018/19)</a></li>
			<li><a href="#tab4" data-toggle="tab">Mise a Jour votre Infos</a></li>
			<li><a href="#tab5" data-toggle="tab">Votre Compte</a></li>
		</ul>
    </nav>
    <div class="container">
      <div id="mainContent" class="tab-content">
		<div id="myTabContent" class="tab-content">
		  <div class="tab-pane fade active in" id="tab2">
			<cfinclude template="activities.cfm">
		  </div>
		  <div class="tab-pane fade" id="tab4">
			<p>I'm in Section 4.</p>
		  </div>
		  <div class="tab-pane fade" id="tab5">
			<cfinclude template="frame_member_middle_testing.cfm">
		  </div>
		</div>
      </div>
    </div>

  </div>
</div>
</div>
</body>
</html>	

Select allOpen in new window

FOLLOW ON TO ABOVE

I just replaced tab5's  frame_member_middle_testing.cfm with activities.cfm.  This file I called home2a_new.cfm you can run it to confirm.

That would now point the finger to frame_member_middle_testing.cfm and the  session variable it utilizes??

James

Yeah, I was about to say it points to frame_member_middle_testing.cfm. Assuming it runs without error, then like GD was saying, the issue isn't the session variable. It is a problem with the HTML/CSS generated from that .cfm page.  It is probably clashing somehow with the bootstrap code.  It might work fine as a separate html page, but might not play well with the boostrap code (as a whole) when you try and inject it as the content of a "<div>".

I'd suggest a few more tests. Commenting out everything in frame_member_middle_testing.cfm and see if it loads. If it does, the issue is something in the rest of the CSS/HTML generated from that script.

Also, I noticed this <div> is not properly closed:   <div class="container-fluid ">

FOLLOWUP 2 information.

I replaced the text output in tab4 with  the last of the 3 cfm pages I need to hang on the nav bar. This cfm page also uses session.memberID.
Pleased to say it worked !  SO maybe the frame_member_middle_testing.cfm  problem  is not due to use of session variables, but some some other stupid error I made ?

The name of this latest navbar page is  home3a_new.cfm.  You can test this if you have the chance.


New page home3a_new page with tab4 using client_form_registration_update.cfm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.background {
    width: 100%;
    height: 2000px;
    background-image: url('images/background3.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    <!---border: 1px solid red;--->
}
</style>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>


<body>
<div class="container background">
  <div class="row">

    <h1>ABAC INSCRIPTION 2019</h1>
	<nav class="navbar navbar-inverse">
	  <div class="container-fluid ">
		<ul id="myTab" class="nav nav-tabs">
			<li class="active"><a href="#tab2" data-toggle="tab">Programme (2018/19)</a></li>
			<li><a href="#tab4" data-toggle="tab">Mise a Jour votre Infos</a></li>
			<li><a href="#tab5" data-toggle="tab">Votre Compte</a></li>
		</ul>
    </nav>
    <div class="container">
      <div id="mainContent" class="tab-content">
		<div id="myTabContent" class="tab-content">
		  <div class="tab-pane fade active in" id="tab2">
			<cfinclude template="activities.cfm">
		  </div>
		  <div class="tab-pane fade" id="tab4">
			<cfinclude template="client_form_registration_update.cfm">
		  </div>
		  <div class="tab-pane fade" id="tab5">
			<cfinclude template="activities.cfm">
		  </div>
		</div>
      </div>
    </div>

  </div>
</div>
</div>
</body>
</html>	

Select allOpen in new window

Code for client-form-registration-update.cfm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>



<!---SCROLLER BUTTON STUFF--->
<!---Just generate the javascript below using the tool at http://www.willmaster.com/library/manage-forms/floating-submit-button.php OR simply copy and paste this onto the new page you are creating--->

<!---NOTE you can change the width and position of the button by changing the variables see below--->

<script type="text/javascript"><!--
/* 
   Float Submit Button To Right Edge Of Window
   Version 1.0
   April 11, 2010

   Will Bontrager
   http://www.willmaster.com/
   Copyright 2010 Bontrager Connection, LLC

   Generated with customizations on May 14, 2014 at
   http://www.willmaster.com/library/manage-forms/floating-submit-button.php

   Bontrager Connection, LLC grants you 
   a royalty free license to use or modify 
   this software provided this notice appears 
   on all copies. This software is provided 
   "AS IS," without a warranty of any kind.
*/

//*****************************//

/** Five places to customize **/

// Place 1:
// The id value of the button.

var ButtonId = "floatingbutton";


// Place 2:
// The width of the button.

var ButtonWidth = 150;


// Place 3:
// Left/Right location of button (specify "left" or "right").

var ButtonLocation = "right";


// Place 4:
// How much space (in pixels) between button and window left/right edge.

var SpaceBetweenButtonAndEdge = 260;


// Place 5:
// How much space (in pixels) between button and window top edge.

var SpaceBetweenButtonAndTop = 360;


/** No other customization required. **/

//************************************//

TotalWidth = parseInt(ButtonWidth) + parseInt(SpaceBetweenButtonAndEdge);
ButtonLocation = ButtonLocation.toLowerCase();
ButtonLocation = ButtonLocation.substr(0,1);
var ButtonOnLeftEdge = (ButtonLocation=='l') ? true : false;

function AddButtonPlacementEvents(f)
{
   var cache = window.onload;
   if(typeof window.onload != 'function') { window.onload = f; }
   else { window.onload = function() { if(cache) { cache(); } f(); }; }
   cache = window.onresize;
   if(typeof window.onresize != 'function') { window.onresize = f; }
   else { window.onresize = function() { if(cache) { cache(); } f(); }; }
}

function WindowHasScrollbar() {
var ht = 0;
if(document.all) {
   if(document.documentElement) { ht = document.documentElement.clientHeight; }
   else { ht = document.body.clientHeight; }
   } 
else { ht = window.innerHeight; }
if (document.body.offsetHeight > ht) { return true; }
else { return false; }
}

function GlueButton(ledge) {
var did = document.getElementById(ButtonId);
did.style.top = SpaceBetweenButtonAndTop + "px";
did.style.width = ButtonWidth + "px";
did.style.left = ledge + "px";
did.style.display = "block";
did.style.zIndex = "9999";
did.style.position = "fixed";
}

function PlaceTheButton() {
if(ButtonOnLeftEdge) {
   GlueButton(SpaceBetweenButtonAndEdge);
   return;
   }
if(document.documentElement && document.documentElement.clientWidth) { GlueButton(document.documentElement.clientWidth-TotalWidth); }
else {
   if(navigator.userAgent.indexOf('MSIE') > 0) { GlueButton(document.body.clientWidth-TotalWidth+19); }
   else {
      var scroll = WindowHasScrollbar() ? 0 : 15;
      if(typeof window.innerWidth == 'number') { GlueButton(window.innerWidth-TotalWidth-15+scroll); }
      else { GlueButton(document.body.clientWidth-TotalWidth+15); }
      }
   }
}

AddButtonPlacementEvents(PlaceTheButton);
//--></script>

<!---END OF SCROLLER STUFF .... USE THE CODE ABOVE TO CREATE A NEW PAGE. Note that you have to use the button ID "floatingbutton"--->



<script language="javascript"> 
function startup() {
  setTimeout( 'init()', 500 );    // Call init() in 1/2 a second
  setTimeout( 'detach()', 1000 );  // Then call detach() next
}
</script>







<cfquery datasource="office_19">
DROP TABLE registrationsdelta
</cfquery>

<!---<cfquery datasource="office_19" >
SELECT *
INTO [Registrationsdelta]
FROM [registrations]
</cfquery>--->

<cfquery datasource="office_19">
CREATE TABLE registrationsdelta AS SELECT * FROM registrations;
</cfquery>


<!---NOTE the above takes the current Registratons table and copies it to the registrationsdelta table. 
This is necessary to facilitate the enrollment of a new member. On enrollement, a new member has a blank recored automatically inserted into the resistrations table - BUT - not into the registrationsDELTA table (would have been more elegant if this had been possible, but it  was not). SO at this point, when the secretary starts to register activities for any member next time (this new one or an existing one) - the regsitrations table is copied to the registratonsDELTA table - thus inserting the blank record for the new enrolled member into the registrationsDELTA table--->




<cfparam name="memberID" default="0">
<cfset memberID = #session.memberID#>
<cfquery name="recordset2" datasource="office_19">
SELECT onetone, onettwo, onetthree, twotone, twottwo, twotthree, threetone, threettwo, threetthree, fourtone, fourttwo, fourtthree, fivetone, fivettwo, fivetthree, sixtone, sixttwo, sixtthree, seventone, seventtwo, seventthree, eighttone, eightttwo, eighttthree, ninetone, ninettwo, ninetthree, tentone, tenttwo, tentthree, eleventone, eleventtwo, eleventthree, twelvetone, twelvettwo, twelvetthree, thirteentone, thirteenttwo, thirteentthree, fourteentone, fourteenttwo, fourteentthree, fifteentone, fifteenttwo, fifteentthree, sixteentone, sixteenttwo, sixteentthree, seventeentone, seventeenttwo, seventeentthree, eighteentone, eighteenttwo, eighteentthree, nineteentone, nineteenttwo, nineteentthree, twentytone, twentyttwo, twentytthree, twentyonetone, twentyonettwo, twentyonetthree, twentytwotone, twentytwottwo, twentytwotthree, twentythreetone, twentythreettwo, twentythreetthree, twentyfourtone, twentyfourttwo, twentyfourtthree, twentyfivetone, twentyfivettwo, twentyfivetthree, twentysixtone, twentysixttwo, twentysixtthree, twentyseventone, twentyseventtwo, twentyseventthree, twentyeighttone, twentyeightttwo, twentyeighttthree, twentyninetone, twentyninettwo, twentyninetthree, thirtytone, thirtyttwo, thirtytthree, thirtyonetone, thirtyonettwo, thirtyonetthree, thirtytwotone, thirtytwottwo, thirtytwotthree, thirtythreetone, thirtythreettwo, thirtythreetthree, thirtyfourtone, thirtyfourttwo, thirtyfourtthree, thirtyfivetone, thirtyfivettwo, thirtyfivetthree, thirtysixtone, thirtysixttwo, thirtysixtthree, thirtyseventone, thirtyseventtwo, thirtyseventthree
FROM registrationsdelta
WHERE memberID= <cfqueryparam value="#session.memberID#" cfsqltype="cf_sql_numeric">
</cfquery>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Office Application</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:1px;
	top:1px;
	width:602px;
	height:364px;
	z-index:1;
}
body {
	background-color: #FDE7EA;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#apDiv2 {
	position:absolute;
	left:-3px;
	top:2px;
	width:1006px;
	height:732px;
	z-index:1;
}
.style4 {font-size: smaller}
body,td,th {
	color: #000000;
	font-family: Times New Roman, Times, serif;
}
a:link {
	color: #364365;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #364365;
}
a:hover {
	text-decoration: none;
	color: #820201;
}
a:active {
	text-decoration: none;
	color: #364365;
}
.style6 {
	font-family: "Times New Roman", Times, serif;
	color: #999999;
}
.style8 {
	font-size: 24px;
	color: #000000;
	font-family: "Times New Roman", Times, serif;
}

input.btn {
background:#FF0000; /* background color of button */

color:#000000; /* text color */
}
.style20 {
	color: #000000;
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	text-decoration: underline;
}

.style29 {
	color: #3F4556;
	font-family: "Times New Roman", Times, serif;
	font-size: 28px;
}
.style21 {font-weight: bold}
.style22 {color: #000000; font-family: "Times New Roman", Times, serif; font-size: 18px; 

text-decoration: underline; font-weight: bold; }

.datatable, .datatable TD, .datatable TH
{
font-family: "Times New Roman", Times, serif;
font-size:13pt;
color: #000000;

}


-->
</style>

<style type="text/css">
table, td, th { border: 1px solid #ffffff;
</style>
</head>


 
 
 
<BODY MARGINWIDTH=0 MARGINHEIGHT=0 
onload='startup()'
 <!---onload="init();detach()"--->
 onresize="alignFloatLayers()"
 onscroll="alignFloatLayers()"  >
 
 
 
 
<table width="100%" border="1" bordercolor="#72757E" bgcolor="#72757E">
  <tr bgcolor="#FFFFFF">
    <td align="left"  scope="col"><span class="style3">Association des BeauxArts de Cannes, 

Deuxi&egrave;me
    Rue du Barri, Le Suquet  - 06400, Cannes, France Tel : 0493990974 

</span></td>
  </tr>
</table><br />




<a href="http://cannes-beaux-arts.com/office_19/index.cfml?reload" title="Home" target="_self" 
class="style1"><strong><u>ACCUEIL</u></strong></a>&nbsp;&nbsp;

<a href="javascript:history.go(-1)"><strong><u>PRECEDENT</u></strong></a><br />
<!---</body>
</html>--->

        
        
        
   
        
        
        
        <cfset n=1>
        <cfset coursenumber=0>
<cfloop index = "LoopCount" from = "1" to = "37"> 
<!------>

 <cfif n EQ 1> <cfset recordsetvalueone = '#recordset2.onetone#'> <cfset recordsetvaluetwo = '#recordset2.onettwo#'>
  <cfset recordsetvaluethree = '#recordset2.onetthree#'><cfelse>
  <cfif n EQ 2> <cfset recordsetvalueone = '#recordset2.twotone#'> <cfset recordsetvaluetwo = '#recordset2.twottwo#'>
  <cfset recordsetvaluethree = '#recordset2.twotthree#'><cfelse>
  <cfif n EQ 3> <cfset recordsetvalueone = '#recordset2.threetone#'> <cfset recordsetvaluetwo = '#recordset2.threettwo#'>
  <cfset recordsetvaluethree = '#recordset2.threetthree#'><cfelse>
  <cfif n EQ 4> <cfset recordsetvalueone = '#recordset2.fourtone#'> <cfset recordsetvaluetwo = '#recordset2.fourttwo#'>
  <cfset recordsetvaluethree = '#recordset2.fourtthree#'><cfelse>
  <cfif n EQ 5> <cfset recordsetvalueone = '#recordset2.fivetone#'> <cfset recordsetvaluetwo = '#recordset2.fivettwo#'>
  <cfset recordsetvaluethree = '#recordset2.fivetthree#'><cfelse>
  <cfif n EQ 6> <cfset recordsetvalueone = '#recordset2.sixtone#'> <cfset recordsetvaluetwo = '#recordset2.sixttwo#'>
  <cfset recordsetvaluethree = '#recordset2.sixtthree#'><cfelse>
  <cfif n EQ 7> <cfset recordsetvalueone = '#recordset2.seventone#'> <cfset recordsetvaluetwo = '#recordset2.seventtwo#'>
  <cfset recordsetvaluethree = '#recordset2.seventthree#'><cfelse>
  <cfif n EQ 8> <cfset recordsetvalueone = '#recordset2.eighttone#'> <cfset recordsetvaluetwo = '#recordset2.eightttwo#'>
  <cfset recordsetvaluethree = '#recordset2.eighttthree#'><cfelse>
  <cfif n EQ 9> <cfset recordsetvalueone = '#recordset2.ninetone#'> <cfset recordsetvaluetwo = '#recordset2.ninettwo#'>
  <cfset recordsetvaluethree = '#recordset2.ninetthree#'><cfelse>
  <cfif n EQ 10> <cfset recordsetvalueone = '#recordset2.tentone#'> <cfset recordsetvaluetwo = '#recordset2.tenttwo#'>
  <cfset recordsetvaluethree = '#recordset2.tentthree#'><cfelse>
  <cfif n EQ 11> <cfset recordsetvalueone = '#recordset2.eleventone#'> <cfset recordsetvaluetwo = '#recordset2.eleventtwo#'>
  <cfset recordsetvaluethree = '#recordset2.eleventthree#'><cfelse>
  <cfif n EQ 12> <cfset recordsetvalueone = '#recordset2.twelvetone#'> <cfset recordsetvaluetwo = '#recordset2.twelvettwo#'>
  <cfset recordsetvaluethree = '#recordset2.twelvetthree#'><cfelse>
  <cfif n EQ 13> <cfset recordsetvalueone = '#recordset2.thirteentone#'> <cfset recordsetvaluetwo = '#recordset2.thirteenttwo#'>
  <cfset recordsetvaluethree = '#recordset2.thirteentthree#'><cfelse>
  <cfif n EQ 14> <cfset recordsetvalueone = '#recordset2.fourteentone#'> <cfset recordsetvaluetwo = '#recordset2.fourteenttwo#'>
  <cfset recordsetvaluethree = '#recordset2.fourteentthree#'><cfelse>
  
  <cfif n EQ 15> <cfset recordsetvalueone = '#recordset2.fifteentone#'> <cfset recordsetvaluetwo = '#recordset2.fifteenttwo#'>
  <cfset recordsetvaluethree = '#recordset2.fifteentthree#'><cfelse>
  <cfif n EQ 16> <cfset recordsetvalueone = '#recordset2.sixteentone#'> <cfset recordsetvaluetwo = '#recordset2.sixteenttwo#'>
  <cfset recordsetvaluethree = '#recordset2.sixteentthree#'><cfelse>
  <cfif n EQ 17> <cfset recordsetvalueone = '#recordset2.seventeentone#'> <cfset recordsetvaluetwo = '#recordset2.seventeenttwo#'>
  <cfset recordsetvaluethree = '#recordset2.seventeentthree#'><cfelse>
  <cfif n EQ 18> <cfset recordsetvalueone = '#recordset2.eighteentone#'> <cfset recordsetvaluetwo = '#recordset2.eighteenttwo#'>
  <cfset recordsetvaluethree = '#recordset2.eighteentthree#'><cfelse>
  <cfif n EQ 19> <cfset recordsetvalueone = '#recordset2.nineteentone#'> <cfset recordsetvaluetwo = '#recordset2.nineteenttwo#'>
  <cfset recordsetvaluethree = '#recordset2.nineteentthree#'><cfelse>
  <cfif n EQ 20> <cfset recordsetvalueone = '#recordset2.twentytone#'> <cfset recordsetvaluetwo = '#recordset2.twentyttwo#'>
  <cfset recordsetvaluethree = '#recordset2.twentytthree#'><cfelse>
  
  
  
   <cfif n EQ 21> <cfset recordsetvalueone = '#recordset2.twentyonetone#'> <cfset recordsetvaluetwo = '#recordset2.twentyonettwo#'>
  <cfset recordsetvaluethree = '#recordset2.twentyonetthree#'><cfelse>
   <cfif n EQ 22> <cfset recordsetvalueone = '#recordset2.twentytwotone#'> <cfset recordsetvaluetwo = '#recordset2.twentytwottwo#'>
  <cfset recordsetvaluethree = '#recordset2.twentytwotthree#'><cfelse>
   <cfif n EQ 23> <cfset recordsetvalueone = '#recordset2.twentythreetone#'> <cfset recordsetvaluetwo = '#recordset2.twentythreettwo#'>
  <cfset recordsetvaluethree = '#recordset2.twentythreetthree#'><cfelse>
   <cfif n EQ 24> <cfset recordsetvalueone = '#recordset2.twentyfourtone#'> <cfset recordsetvaluetwo = '#recordset2.twentyfourttwo#'>
  <cfset recordsetvaluethree = '#recordset2.twentyfourtthree#'><cfelse>
   <cfif n EQ 25> <cfset recordsetvalueone = '#recordset2.twentyfivetone#'> <cfset recordsetvaluetwo = '#recordset2.twentyfivettwo#'>
  <cfset recordsetvaluethree = '#recordset2.twentyfivetthree#'><cfelse>
   <cfif n EQ 26> <cfset recordsetvalueone = '#recordset2.twentysixtone#'> <cfset recordsetvaluetwo = '#recordset2.twentysixttwo#'>
  <cfset recordsetvaluethree = '#recordset2.twentysixtthree#'><cfelse>
   <cfif n EQ 27> <cfset recordsetvalueone = '#recordset2.twentyseventone#'> <cfset recordsetvaluetwo = '#recordset2.twentyseventtwo#'>
  <cfset recordsetvaluethree = '#recordset2.twentyseventthree#'><cfelse>
   <cfif n EQ 28> <cfset recordsetvalueone = '#recordset2.twentyeighttone#'> <cfset recordsetvaluetwo = '#recordset2.twentyeightttwo#'>
  <cfset recordsetvaluethree = '#recordset2.twentyeighttthree#'><cfelse>
   <cfif n EQ 29> <cfset recordsetvalueone = '#recordset2.twentyninetone#'> <cfset recordsetvaluetwo = '#recordset2.twentyninettwo#'>
  <cfset recordsetvaluethree = '#recordset2.twentyninetthree#'><cfelse>
  
  <cfif n EQ 30> <cfset recordsetvalueone = '#recordset2.thirtytone#'> <cfset recordsetvaluetwo = '#recordset2.thirtyttwo#'>
  <cfset recordsetvaluethree = '#recordset2.thirtytthree#'><cfelse>
  <cfif n EQ 31> <cfset recordsetvalueone = '#recordset2.thirtyonetone#'> <cfset recordsetvaluetwo = '#recordset2.thirtyonettwo#'>
  <cfset recordsetvaluethree = '#recordset2.thirtyonetthree#'><cfelse>
  <cfif n EQ 32> <cfset recordsetvalueone = '#recordset2.thirtytwotone#'> <cfset recordsetvaluetwo = '#recordset2.thirtytwottwo#'>
  <cfset recordsetvaluethree = '#recordset2.thirtytwotthree#'><cfelse>
  <cfif n EQ 33> <cfset recordsetvalueone = '#recordset2.thirtythreetone#'> <cfset recordsetvaluetwo = '#recordset2.thirtythreettwo#'>
  <cfset recordsetvaluethree = '#recordset2.thirtythreetthree#'><cfelse>
  <cfif n EQ 34> <cfset recordsetvalueone = '#recordset2.thirtyfourtone#'> <cfset recordsetvaluetwo = '#recordset2.thirtyfourttwo#'>
  <cfset recordsetvaluethree = '#recordset2.thirtyfourtthree#'><cfelse>
  <cfif n EQ 35> <cfset recordsetvalueone = '#recordset2.thirtyfivetone#'> <cfset recordsetvaluetwo = '#recordset2.thirtyfivettwo#'>
  <cfset recordsetvaluethree = '#recordset2.thirtyfivetthree#'><cfelse>
  <cfif n EQ 36> <cfset recordsetvalueone = '#recordset2.thirtysixtone#'> <cfset recordsetvaluetwo = '#recordset2.thirtysixttwo#'>
  <cfset recordsetvaluethree = '#recordset2.thirtysixtthree#'><cfelse>
  <cfif n EQ 37> <cfset recordsetvalueone = '#recordset2.thirtyseventone#'> <cfset recordsetvaluetwo = '#recordset2.thirtyseventtwo#'>
  <cfset recordsetvaluethree = '#recordset2.thirtyseventthree#'><cfelse>
  
        </cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif></cfif>
        
        <!---<cfoutput> #recordsetvalueone#,#recordsetvaluetwo#,#recordsetvaluethree#<br /></cfoutput>--->
        
        
        <cfif recordset2.RecordCount>
        <cfif not isdefined("Form.first")>
           <cfset Form.first = #recordsetvalueone#>
        </cfif>
        <cfif not isdefined("Form.second")>
           <cfset Form.second = #recordsetvaluetwo#>
        </cfif>
        <cfif not isdefined("Form.third")>
           <cfset Form.third = #recordsetvaluethree#>
        </cfif>
        <!---<cfif not isdefined("Form.coursenumber")>
           <cfset Form.coursenumber = 1>
        </cfif>--->
</cfif>


<!---The above deals with the fact that we are not using a form to update the activityformversion talbe, but rather updating it directly from this page. The above recognises that form.first, second and third does not exist, as there was no form submitted - it then sets each of the form.first,second and thirds to the recordsetvalueone,two,three's as set at the start of the loop--->






     

<cfquery datasource="office_19">
        <cfset coursenumber = #coursenumber# + 1>
UPDATE activityformversionn
SET
`first` = '#recordsetvalueone#' ,
`second` = '#recordsetvaluetwo#' ,
`third` = '#recordsetvaluethree#'

WHERE 
`CourseNumber` = '#coursenumber#'
</cfquery>


<cfset n = #n# +1>
<cfquery name="unlock" datasource="office_19">
SELECT first 
FROM activityformversionn
</cfquery>

         </cfloop>
		 
		 
		 <!---The above is the actual update of a single course in the activityformversion table. Each activity / course is update on each cycle of the cfloop. SO in summary the table activityformersion is dynamically updated, record by record for the memberID who has just started to register new courses. This table is used to present the menu form to the customer for purpose of chooseing the courses he wants to register for. The code below is for this--->
<cfquery name="Recordset_sort" datasource="office_19">
SELECT *
FROM activityformversionn
ORDER BY weekday ASC 
 
         </cfquery>
<cfset listDays = "Dimanche,Lundi,Mardi,Mercredi,Jeudi,Vendredi,Samedi,Weekdays">

 
<cfset arrDays = arraynew(1)>
 
<cfloop query="Recordset_sort">
  <cfset arrayappend(arrDays, listfindnocase(listDays, Recordset_sort.weekday))>
</cfloop>
 
<cfset queryaddcolumn(Recordset_sort, 'weekdayNumber', 'integer', arrDays)>
 
<cfquery name="Recordset3" dbtype="query">
SELECT *
FROM Recordset_sort
ORDER BY weekdayNumber ASC
</cfquery>


<!---<cfoutput query="recordset3"> #weekdaynumber#</cfoutput>
<cfoutput query="recordset_sort"> #weekday#</cfoutput>--->


<!---<CFOUTPUT> #RECORDSET3.weekdaynumber# </cfoutput>--->

<!---The above is to facilitate the changing order of the activities on the menu form. The activities are preseneted in groupings by day starting with Lundi. The challenge here is to make sure the sord is done by day and not just by day alphabetically. The approach above is to create a list which contains the days in the order you want them. Then you use this to create an array which has numbers 1,2 etc representing the days in the order dictated in the list. This array is actually inserted into the opening recordset recoreset_sort and a new recordset RECORDSET3 is created which is the same as recordseet_sort, except that the activites are now sorted by day as disctated in the  list we created. Recordset3 is used below in the construction of the menu form--->

<!---This is where we start the creation of the activity order menu form--->


<cfquery name="registration_member" datasource="office_19">
SELECT Nom,Prenom
FROM members2
WHERE members2.memberID= <cfqueryparam value="#session.memberID#" cfsqltype="cf_sql_numeric">
</cfquery>



<form action="action_form_registration_update.cfm" method="post" name="registratonUpdate" target="_self" id="registratonUpdate" >


<table  class="datatable" width="100%" border="1" id="mytable" bordercolor="#FFAA55">
<caption>
    <span class="style2"><strong>Inscription aux Activit pour M ou Mme</strong></span> <cfoutput query="registration_member"> <span class="style2"><strong>#Prenom#</strong>&nbsp;<strong>#Nom#</strong></span></cfoutput>
  </caption>
  <tr>
    <td colspan="8" align="left"><div id="floatlayer"><label>
  <input type="submit" name="floatingbutton" id="floatingbutton" value="Reviser le panier d'achat"/>
  </label></div></td>
  </tr>

 <tr bgcolor="#BED3BE">
   <th width="30" align="left" valign="middle" scope="col">#</th>
    <th width="150" align="left" valign="middle" scope="col">Activit</th>
	<!---<th width="270" align="left" valign="middle" scope="col">Notes</th>--->
    <th width="70" align="left" valign="middle" scope="col">Jour</th>
    <th width="120" align="left" valign="middle" scope="col">Horaire</th>
    <th width="130" align="left" valign="middle" scope="col">Professeur</th>
   <th width="40" align="left" valign="middle" scope="col">1er Trim.</th>
    <th width="40" align="left" valign="middle" scope="col">2em Trim.</th>
    <th width="40" align="left" valign="middle"scope="col">3em Trim.</th>
  </tr>



   
   
  <cfset color= 1>
  <cfoutput query="recordset3"><!---This is the start of the output query for the menu--->
  <cfif color EQ 1>
  <tr bgcolor="##DFDFDF">
  <cfelse>
  <tr></cfif>
  <!---The above is the trick for causing the table to be outputted with alternatively different coloured lines. It ends with the line just above the </cfoutput> tag below--->
  <cfif #recordset3.coursenumber# EQ 1> <cfset num = 'one'> </cfif>
  <cfif #recordset3.coursenumber# EQ 2> <cfset num = 'two'> </cfif>
  <cfif #recordset3.coursenumber# EQ 3> <cfset num = 'three'> </cfif>
  <cfif #recordset3.coursenumber# EQ 4> <cfset num = 'four'> </cfif>
  <cfif #recordset3.coursenumber# EQ 5> <cfset num = 'five'> </cfif>
  <cfif #recordset3.coursenumber# EQ 6> <cfset num = 'six'> </cfif>
  <cfif #recordset3.coursenumber# EQ 7> <cfset num = 'seven'> </cfif>
  <cfif #recordset3.coursenumber# EQ 8> <cfset num = 'eight'> </cfif>
  <cfif #recordset3.coursenumber# EQ 9> <cfset num = 'nine'> </cfif>
  <cfif #recordset3.coursenumber# EQ 10> <cfset num = 'ten'> </cfif>
  <cfif #recordset3.coursenumber# EQ 11> <cfset num = 'eleven'> </cfif>
  <cfif #recordset3.coursenumber# EQ 12> <cfset num = 'twelve'> </cfif>
  <cfif #recordset3.coursenumber# EQ 13> <cfset num = 'thirteen'> </cfif>
  <cfif #recordset3.coursenumber# EQ 14> <cfset num = 'fourteen'> </cfif>
  <cfif #recordset3.coursenumber# EQ 15> <cfset num = 'fifteen'> </cfif>
  <cfif #recordset3.coursenumber# EQ 16> <cfset num = 'sixteen'> </cfif>
  <cfif #recordset3.coursenumber# EQ 17> <cfset num = 'seventeen'> </cfif>
  <cfif #recordset3.coursenumber# EQ 18> <cfset num = 'eighteen'> </cfif>
  <cfif #recordset3.coursenumber# EQ 19> <cfset num = 'nineteen'> </cfif>
  <cfif #recordset3.coursenumber# EQ 20> <cfset num = 'twenty'> </cfif>
  <cfif #recordset3.coursenumber# EQ 21> <cfset num = 'twentyone'> </cfif>
  <cfif #recordset3.coursenumber# EQ 22> <cfset num = 'twentytwo'> </cfif>
  <cfif #recordset3.coursenumber# EQ 23> <cfset num = 'twentythree'> </cfif>
  <cfif #recordset3.coursenumber# EQ 24> <cfset num = 'twentyfour'> </cfif>
  <cfif #recordset3.coursenumber# EQ 25> <cfset num = 'twentyfive'> </cfif>
  <cfif #recordset3.coursenumber# EQ 26> <cfset num = 'twentysix'> </cfif>
  <cfif #recordset3.coursenumber# EQ 27> <cfset num = 'twentyseven'> </cfif>
  <cfif #recordset3.coursenumber# EQ 28> <cfset num = 'twentyeight'> </cfif>
  <cfif #recordset3.coursenumber# EQ 29> <cfset num = 'twentynine'> </cfif>
  <cfif #recordset3.coursenumber# EQ 30> <cfset num = 'thirty'> </cfif>
  <cfif #recordset3.coursenumber# EQ 31> <cfset num = 'thirtyone'> </cfif>
  <cfif #recordset3.coursenumber# EQ 32> <cfset num = 'thirtytwo'> </cfif>
  <cfif #recordset3.coursenumber# EQ 33> <cfset num = 'thirtythree'> </cfif>
  <cfif #recordset3.coursenumber# EQ 34> <cfset num = 'thirtyfour'> </cfif>
  <cfif #recordset3.coursenumber# EQ 35> <cfset num = 'thirtyfive'> </cfif>
  <cfif #recordset3.coursenumber# EQ 36> <cfset num = 'thirtysix'> </cfif>
  <cfif #recordset3.coursenumber# EQ 37> <cfset num = 'thirtyseven'> </cfif>

<!---The above is to create the naming system for the names of each of the squares in the form used for recording the choise of course. These names are crucial if the updating of the activityformversionn table is to be achieved when the menu is submitted to the action page acton_form_registrtion_update--->
 <cfif #teacher# NEQ 0>
 
 <!---note the above cfif is to block certain activities in the database from appearing on the form. If the teacher field in any activity is given a 0 (vrs the name of a teacher OR a "non" indicating no teacher) then that activity will not be shown in the form. This way the tables activities and activityformversionn always have 37 items listed - the mechanism here is how an activity from these tables is blocked. Note when the activities update form is used all changes made are applied to both the activities and activityformversionn tables--->
 
 <td>#CourseNumber#</td>
    <td>#activity#</td>
	<!---<td>#notes#</td>--->
    <td>#RECORDSET3.weekday#</td>
    <td>#startime#</td>
    <td>#teacher#</td>
    <td>
	
	<cfif #first# eq 'on'>
<input type="checkbox"  name="#num#Tone" checked>
T1
<cfelse>
		<input type="checkbox" name="#num#tone">T1
</cfif></td>


    <td><cfif #second# eq 'on'>
<input type="checkbox"  name="#num#Ttwo" checked>
T2
<cfelse>
		<input type="checkbox" name="#num#ttwo">T2
</cfif></td>
    
    
    
    <td><cfif #third# eq 'on'>
<input type="checkbox"  name="#num#tthree" checked>
T3
<cfelse>
		<input type="checkbox" name="#num#tthree">T3
</cfif></td>

<!---The above lines make use of the num valuse calculated above to identify the names of the squares.Additionally, the above lines determine if a square is to presented in the form with a tick or without a tick--->
  </tr>
  <cfif #color# EQ 1> <cfset color=0> <cfelse>  <cfset color=1></cfif><!---end of the table colouring---></cfif>
 </cfoutput><!---the ending output tag. Note the output tags here cause looping through recordset3 (each activity at a time) and dynamically creating the menu form.--->
</table>

<p>
  
  <input name="memberID" type="hidden" id="memberID" value="<cfoutput>#memberID#</cfoutput>" />
  <input name="MM_updateRecord" type="hidden" id="MM_updateRecord" value="registration_update" />
</p>
</form>

</body>
</html>

Select allOpen in new window

There's something wrong with frame_member_middle_testing.cfm. The home2 script is throwing a ClassCastException. Same when viewing the page individually:

      http://cannes-beaux-arts.com/office_19/frame_member_middle_testing.cfm

One additional (hopefully easy to correct) problem.  The video below shows home3a_new  navbar as described above.

http://cannes-beaux-arts.com/office_19/lastVideo.wmv

Everything on the navbar works . However, the client_form_registration_update.cfm page on tab4 is the first of  4 pages which are drilled down into. The video above shows this.  Problem is that, on the first drilldown, the page jumps out of the navbar container and follow on drill down pages also remain outside.

Is there a way to ensure that the drill down pages stay within the navbar container ?

My knowledge of bootstrap is limited, so I'll wait for someone else to confirm or dispute this, but .... truthfully I don't think what you are trying should actually work. Not without tweaking anyway.

A) Each of the included scripts is designed to generate a complete HTML page. CFInclude'ing them means the combined html of home1.cfm is no longer valid. (You can't nest multiple <html> tags, for example).  Browsers are somewhat forgiving,  so some things may work, but ... complex pages probably won't. At least not as expected.

B) Each of the included pages has its own CSS and JS, designed to function independently.  Even if nesting the pages together was allowed, there's a good chance the CSS/JS in each page would clash with the others.

So ultimately, it may be overly optimistic to just include the pages and expect them to work without any tweaking.

I agree with agx.   The Coldfusion needs to generate ONLY the parts that should be found within the tab's div tag.   Certainly, that would not include the HTML tags, body tags, etc.  

On a related note, I would like to ask why the need to load all pages and dynamically switch between them using css/js?   I don't see the advantage to have all the pages preloaded.   IMHO, the menu item should be a link and draw just ONE page.. the nav is a shared file so it looks the same on every page.   Loading every page at once just so you can dynamically switch between them doesn't seem necessary.  And you can't bookmark any of the pages.   Switch the tab reference to a link.  Make life easy, pages will load faster and be less buggy.

Ha,  I have not explained this clearly -  sorry.  

Frame_member_middle_testing.cfm  is a Form. When the submit button is clicked at the top this page goes to the action page ( to which it has been pointed to from Frame_member_middle_testing.cfm) - which also presents the bill.... etc

Eventually, two pages later the customer is presented with a receipt.

These 4 pages, starting with frame_member_middle_testing.cfm are logically connected and linked to each other by buttons. Each page launches on top of the previous (no fresh browser tab) via the use of target = _self. So it works perfectly on the PC - for nearly 10 years now


The point of  recasting the current pages is to create a client which will permit our customers to register on line in place of coming to the school at the start of each year to register.  This client will be used by mobiles and tablets as well as pc's.  The recasting of the application is to support users of mobiles and tablets.  Bootstrap and its responsive menus have been billed as the way to do this.

Its hard to believe that it is not possible to retain the 4 pages I mentioned above within the same menu item container ?   Bootstrap even has drop menus -  which surely demands that menu items are retained within the menu item container ??

James

I think you may have misunderstood.  It's not that you can't create that layout at all - it just probably can't be done without modifying the existing pages first.   Those pages were all designed to work independently. Put them in a container, alongside other, complete html pages and chances are they're not going to work correctly (i.e. the same as they do independently). I strongly suspect that's what's causing the current issues.

To start with, including all of the pages creates invalid HTML. You wouldn't create a normal page with  multiple <html> and <body> tags like this, but that is exactly what the cfinclude's will produce:

       <html>
        <body>
                <div...><html><body><div>other stuff</div></body></html></div>
                <div...><html><head><script>....</script></head><body><div>other stuff</div></body></html></div>
                <div...><html><body><div>other stuff</div></body></html></div>
       </body>
        </html>


What if each page has its own Javascript code that triggers on "<body>" load / document.ready()? How would the browser know which one to fire if there are multiple <body> tags? Not to mention any CSS within those pages could clash, or overwrite styles within the other pages.  Those are only a few of the possible issues.

Again, it is not that it isn't possible.  However, whatever html you are including needs to be designed to work properly within the parent container.  The current code isn't.  Content within a <div>...</div>, should be exactly that - content tags - not <html>, <body>, ...etc...

I suspect something in frame_member_middle_testing.cfm is causing the problem, but it is hard to say what without being able to access the HTML of that page.  It is still throwing an error, even after logging in:

http://cannes-beaux-arts.com/office_19/frame_member_middle_testing.cfm is throwing an error:

Error casting an object of type <b>java.lang.Integer cannot be cast to java.lang.String</b> to an incompatible type.  

Hi _agx_ , gdemaria

Well -  I found the problem. It was an extra, used <div> tag !!!   As I recall you predicted this was the problem. Anyhow, now you can see it running

 login  use  AGUADO/787072

with  home3A_new.cfm after login.

As you said,  a cfm page can be working outside bootstrap, and at the same time, fail within bootstrap.  


Thanks for your explanation of why I can't drill down within the bootstrap container - understand that now. Not to worry, I think I have a work around.

Finally let me thank both yourself and gdemaria. In particular thanks_agx_ for discovering and fixing the bootstrap part - which I would never have discovered on my own.

On, top off all the above, THANKS  FOR THE EDUCATION  and PATIENCE !!!

James

You are very welcome. Glad you were finally able to resolve it.

I appreciate the points, but given that it was a group effort a split is probably warranted :)