DevOps, CI/CD and Automation

Hi All,

I'm having some problems with the ojet router. I have two states, when I navigate to the 2nd state, everything works fine, the state id is in the URL. However, if I navigate back (not the browser back button), the the state id is not there in the URL resulting that when refreshing, we got a 404 error.

Here is the code for the router:

<div id="routing-container">
  <div id="content" data-bind="ojModule: moduleConfig()"></div>
</div>

Very simple.

Here is the js for the router:

define(['generalApp', 'ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout',
         'ojs/ojmenu', 'ojs/ojtoolbar', 'ojs/ojbutton', 'ojs/ojmodule',
         'ojs/ojrouter', 'ojs/ojmoduleanimations', 'text'
   ], function(app, oj, ko, $)
   {
     // Retrieve the router static instance and configure the states
     var router = oj.Router.rootInstance;
     router.configure(
     {
       'firstPage':  { label: 'firstPage', isDefault: true },
       'secondPage':  { label: 'secondPage' }
     });
     varoj.Router.sync(); gettingStartedRouterModel =
     {
       router: router,
       
       goToPage: function(pageName, animation) 
       {
           if (animation) 
           {
              gettingStartedRouterModel.anim(animation);    
           }
           else 
           {
              gettingStartedRouterModel.anim('None');
           }
           
           gettingStartedRouterModel.router.go(pageName).then(function(result)
           {
             // In case the transition was canceled, restore original selection
             if (!result.hasChanged)
             {
               //log the error here
             }
           });          
       },
       
       // An observable to hold the animation type.
       anim: ko.observable('None'),
   
       moduleConfig: ko.pureComputed(function ()
       {
         // When no animation is needed, just return the router moduleConfig
         if (gettingStartedRouterModel.anim() === 'None')
         {
           return gettingStartedRouterModel.router.moduleConfig;
         } 
         else
         {
           return $.extend({}, gettingStartedRouterModel.router.moduleConfig,
             {
               animation: oj.ModuleAnimations[gettingStartedRouterModel.anim()]
             });
         }         
       })
     };
     
      return gettingStartedRouterModel;
   });

I call goToPage() to navigate between pages. Here is the js for the first page:

      function GettingStartedModel()
      {
         
         var self = this;
         self.connector = websites;
         
         self.selectedCategory = new Object();
         
         self.categories        = ko.observableArray([ ]);
         self.selectCategory = function(value) 
         {  
            //seeting up the parameters for the detail page.
            self.selectedCategory = value;
            
            // go to the second page
            var router = ko.dataFor(document.getElementById('routing-container'));
            router.goToPage('secondPage','navChild');
         } 

Here is the js for the second page

    function GettingStartedDetailModel()
      {
         var self = this;
            
         var selectedCategory = (ko.dataFor(document.getElementById('gs-firstPage'))).selectedCategory;
         self.backButtonAction =function (data, event) 
         {
            var router = ko.dataFor(document.getElementById('routing-container'));
            router.goToPage('gettingStarted', 'navParent');
         }
     }

Here is the html for the second page

<div id="banner" class="gs-top" style="height: 50px;">
   <div id="gs-detail-content" class="gs-top-detail">
      <span data-bind="text: categoryTitle" style="font-size: 32px; font-weight: bold;"> </span>
      <span data-bind="text: categoryInline" style="font-size: 32px"> </span>
   </div>   
   <button id= "gs-back" class="gs-button" style="float: right; margin-top: 10px; margin-right: 10px;" data-bind="click: backButtonAction, ojComponent: { component: 'ojButton', label:backButtonLabel}">
   </button>  
</div>

So if I go from first page to the second page, it is working fine: http://localhost:7101/secondPage

However if we come back to the first page by pressing the button(not the browser back button), the state id is not present in the URL.  it is something like: http://localhost:7101/

The page is rendered just fine.

The state is missing in the URL.

Thank you very much for your help!

Regards,

Quincy