route validation and prevent navigation from breaking on re-cklick

css/mainStyle.css

@@ -43,8 +43,13 @@ span.expanded {
   font-size: 30px;
 }
 
+.navbar-default .navbar-nav>.disabled>a, .navbar-default .navbar-nav>.disabled>a:focus, .navbar-default .navbar-nav>.disabled>a:hover {
+  background-color:#FFFFFF;
+}
+
 .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus{
     background-color: #FFFFFF;
+    border:3px solid #616d77;
     color:#b2382a;
 }
 
@@ -54,12 +59,13 @@ span.expanded {
   text-align: center;
   color:#000000;
   border-radius: 15px;
-  border: 0px solid;
+  border:3px solid transparent;
 }
 
 .navbar-default .navbar-nav>li>a:hover{
-    background-color: #666b75;
+  background-color: #666b75;
-    text-emphasis: bold;
+  text-emphasis: bold;
+  border:3px solid transparent;
 }
 
 .navbar-inner{
@@ -90,4 +96,4 @@ span.expanded {
 .nopadding {
    padding: 0 !important;
    margin: 0 !important;
-}
+}

js/main.js

@@ -8,8 +8,18 @@ var ibuyproperties=(function(){
   function navShow(cls,ele){
     $("."+cls).addClass('hide');
     $("#pnl_"+ele).removeClass('hide');
-    $(".topNav"+cls).removeClass('active');
+    $(".topNav"+cls).removeClass('active disabled');
-    $(".topNav"+ele).addClass('active');
+    $(".topNav"+cls).removeAttr('href');
+
+    $.each($(".topNav"+cls+">a"),function(pos,ele){
+      $(ele).attr("href", $(ele).attr("mytargeturl"));
+    });
+
+
+    $($(".topNav"+ele)[0]).addClass('active disabled');
+    $($(".topNav"+ele)[0]).addClass('active disabled');
+    $($(".topNav"+ele+">a")[0]).removeAttr('href');
+
   }
 
   function toggleButton(elEnable,elDisable){
@@ -38,6 +48,7 @@ $(document).ready(function(){
     if (ibuyproperties.isDebugMode) {
        $("body").append(ibuyproperties.templateHelper.get("debug")({}));
     }
+
     ibuyproperties.router.route();
     $(window).on('hashchange', ibuyproperties.router.route);
   });

js/router.js

@@ -2,7 +2,7 @@
 
 ibuyproperties.router=(function(){
   var allRoutes=[];
-  
+
   function route() {
     var hash = window.location.hash;
     var lastLocation = null;
@@ -14,12 +14,18 @@ ibuyproperties.router=(function(){
     if (lastLocation != hash) {
       this.lastLocation=hash;
 
+      var routeFoundMainNav=false;
+      var promisesMainNav=[];
       // Generic routing based on template names
       $.each(ibuyproperties.templates.getType("mainPages"),function(pos,name){
+        var def = new $.Deferred();
+        promisesMainNav.push(def);
+
         var re=new RegExp("^#" + name + "[/]*");
         if (ibuyproperties.isDebugMode) { console.log("Generic Router - test ",name);}
        // debugger;
         if (hash.match(re)) {
+          routeFoundMainNav=true;
           if (ibuyproperties.isDebugMode) { console.log("Generic Router - match ",name);}
             if ($("#pnl_" +name).length === 0) {
               $("#content").empty().append(ibuyproperties.templateHelper.get(name)({templateName:name}));
@@ -27,30 +33,40 @@ ibuyproperties.router=(function(){
           ibuyproperties.navShow('mainScreen',name);
           $('.in,.open').removeClass('in open');
         }
+        def.resolve();
       });
-    
+      $.when.apply(undefined,promisesMainNav).then(function(){if (!routeFoundMainNav) {console.error("NO matching Navigation tab route found");}});
+
+      var promisesDyn=[];
+      var routeFoundDynamic=false;
       // Dynamic route handling
       $.each(allRoutes,function(pos,theRoute){
+        var def = new $.Deferred();
+        promisesDyn.push(def);
         if (ibuyproperties.isDebugMode) { console.log("Dynamic Router - test ",hash ,theRoute);}
-    
+
         var re=new RegExp(theRoute.re);
         if (hash.match(re)) {
+          routeFoundDynamic=true;
           if (ibuyproperties.isDebugMode) { console.log("Dynamic Router - match ",hash,theRoute);}
           theRoute.cb.call();
           return false; // exit the loop
         }
+        def.resolve();
       });
-    
+      $.when.apply(undefined,promisesDyn).then(function(){if (!routeFoundDynamic) {console.error("NO matching Dynamic route found");}});
+
+
     }
   }
-             
+
   function addRoute(re, callBack){
     var theRoute={re:re,cb:callBack};
     allRoutes.push(theRoute);
-    
+
   }
   return {
     route:route,
     addRoute:addRoute
   };
-}());
+}());

templates/nav.html

@@ -25,10 +25,10 @@
         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul class="nav navbar-nav">
-            <li class="topNavmainScreen topNavHome active"><a class="navBarTab" href="#Home" >Home</a></li>
+            <li class="topNavmainScreen topNavHome active"><a class="navBarTab" mytargeturl="#Home" >Home</a></li>
-            <li class="topNavmainScreen topNavSell"><a class="navBarTab" href="#Sell">Sell</a></li>
+            <li class="topNavmainScreen topNavSell"><a class="navBarTab" mytargeturl="#Sell">Sell</a></li>
           </ul>
-                  
+
           <ul class="nav navbar-nav navbar-right">
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More<span class="caret"></span></a>

templates/sell_sendError.html

@@ -1,5 +1,6 @@
-<h1>ERROR occured whilst sending form data. Please try again!</h1>
+<h1>ERROR occured whilst sending form data.</h1>
 
+Please check your internet connection and try to <a type="submit" class="btn btn-success"  onclick="ibuyproperties.sellForm.sendForm();">resubmit</a><br>
 <b>... or alternatively send the data via <button class="btn btn-success" onclick="generateMail();" id="mailLink">e-mail</button>.</b>
 
 <script>
@@ -8,4 +9,4 @@
     console.log("Fallback Mail Content",content);
     window.location.href=content;
   }
-</script>
+</script>

templates/sell_thanks.html

@@ -1 +1,8 @@
-<h1>Thanks!</h1>
+<h1>Thanks!</h1>
+<hr/>
+Your data was submitted and we will contact you after reviewing.<br/>
+<br/>
+Kind regards<br/>
+<br/>
+~Joe
+

templates/sell_userInfo.html

@@ -2,13 +2,13 @@
 function checkEMail(theEmailAddress){
   return (/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.test(theEmailAddress));
 }
-  
+
 function nextHandler(){
   $("#alertInvalidEMail").addClass("hide");
   if(checkEMail($($('[name="email"]')[0]).val())){
-    window.location="#Sell/page2/"; 
+    window.location="#Sell/page2/";
   } else {
-    console.log("EMail Wrong");
+    if (ibuyproperties.isDebugMode) { console.log("EMail Wrong"); }
     $("#alertInvalidEMail").removeClass("hide");
   }
 }
@@ -18,13 +18,13 @@ function nextHandler(){
 <div id="alertInvalidEMail" class="alert alert-danger hide" role="alert">
   <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
   <span class="sr-only">Error:</span>
-  Enter a valid email address
+  A valid email address is required.
 </div>
 <div class="input-group" style="width:100%">
   <span class="input-group-addon fixWidth1 fieldLabel" >First Name</span>
   <input type="text" name="firstName" class="form-control"/>
-</div>  
+</div>
-<div class="input-group"  style="width:100%">  
+<div class="input-group"  style="width:100%">
   <span class="input-group-addon fixWidth1 fieldLabel">Last Name</span>
   <input type="text" name="LastName" class="form-control"/>
 </div>
@@ -34,8 +34,8 @@ function nextHandler(){
   <span class="input-group-addon fieldLabel">
     Preferred <input type="checkbox"  name="prefEmail"/>
   </span>
-</div>  
+</div>
-<div class="input-group">  
+<div class="input-group">
   <span class="input-group-addon fixWidth1 fieldLabel" >Phone</span>
   <input type="text" name="phone" class="form-control"/>
   <span class="input-group-addon fieldLabel">