• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to organize single page app navigation with JQuery and ColdFusion 2016?

Community Beginner ,
Sep 14, 2018 Sep 14, 2018

Copy link to clipboard

Copied

0down votefavorite

I have started my new single page application. So far I was able to create login/authentication process and build the templates for the Home.cfm page. While looking around the web I see that JQuery can provide navigation template for single page app. My current code is old fashion and here is what I have. So in root folder I have index.html and here is content of that page:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Refresh" content="0; URL=Login.cfm" /> </head> <body></body> </html>

You can see the url in meta tag redirects to Login.cfm. First thing I would like for my website to show only web site name instead of what I have now:

https://example.com/Login.cfm

After user entered Username and Password in Login.cfm I will process authentication with Auth.cfc where I check user credentials. If they successfully pass that step I lead them to Home.cfm. This page is main page of my SPA. Then my url looks like this:

https://example.com/Home.cfm

In Home.cfm I have code that is organize and loaded in different .html files. Code does work and I have decent performance but I would like to use JQuery navigation template method something like MVC. I would prefer to use my current technology stak JQuery, Bootstrap 3, HTML5, CSS and ColdFusion 2016. I looked over few examples but still did not understand how to reorganize my application. I use IIS web server on my site. Here is example of my Home.cfm page:

#main-container { padding-top: 20px; }  .nav-tabs { margin-bottom: 0; }  .tab-content { padding-bottom: 10px; }  div.tab-box { background-color: #f8f8f8; ; }  ul.nav-tabs>li.active>a, ul.nav-tabs>li.active>a:focus, ul.nav-tabs>li.active>a:hover { background-color: #f8f8f8; }
<!DOCTYPE html> <html lang="en">  <head> <title>SPA</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head>  <body> <div id="main-container" class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <p class="navbar-text"><span class="glyphicon glyphicon-home"></span> <b>Welcome to My Application!</b></p> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a> <ul id="main-menu" class="dropdown-menu"> <li class="active"><a href="/tab1-page" data-container="tab1-container">Tab 1</a></li> <li><a href="/tab2-page" data-container="tab2-container">Tab 2</a></li> <li><a href="/tab3-page" data-container="tab3-container">Tab 3</a></li> </ul> </li> <li> <a href="#" data-toggle="popover" role="button"> <span class="glyphicon glyphicon-user"></span> </a> </li> <li> <a href="#" data-toggle="confirmation" data-popout="true" role="button" id="log_out"> <span class="glyphicon glyphicon-log-in"></span> Logout</a> </li> </ul> </div> </nav> <div id="tab1-container"> <cfinclude template="Includes/Tab1.html"> </div> <div id="tab2-container"> <cfinclude template="Includes/Tab2.html"> </div> <div id="tab3-container"> <cfinclude template="Includes/Tab3.html"> </div> </div> <script language="javascript" src="JS/Tab1.js"></script> <script language="javascript" src="JS/Tab2.js"></script> <script language="javascript" src="JS/Tab3.js"></script> </body>  </html>

I use JQuery to navigate user to different template once they click on the menu. Basically this will show/hide the elements on the screen. If anyone can provide some good tutorial or example on how this can be organize please let me know.

Views

465

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation
Resources
Documentation