Pfthb

I have a very weird problem happening in my application. I am using backbone JS framework as well as loading the screens one depending on another. To explain my problem below is the example of URL formation, the screens are loading and URL is getting formed one by one. But when I directly create the same URL & hit into the browser the screens are not getting loaded. I needed this as we want to link one screen to another

For example:
First, the parent is loading depending on parent id, children are loading, depending on children grandchildren are loading.

So below is URL formation.

https://example.com/#/parent-detail/xxx?child1=xxx&child2=xxx&child3=xxxxxxx&child4=xxxxxxxxxxxxx

In the above URL each child id depending on one another.

When I want to link the last child using this URL, then this is not going through that particular page.

But when I go with to the page by clicking one by one to each child then it's loading the respected child page.

Please help me out how should I link the last grandchild using the URL.

I am using below technical stack:

Backbone JS & Javascript - For Frontend
Node JS - for backend
Mysql - database
MongoDB - database
Redis server - caching
HTML5 & CSS3 - design

EDIT

Here is how I am forming the URL on my frontend pages dahboard.html:

<a href="#/parent-detail_2/<%= child[0].parent_id %>?s=<%= child[0].child1 %>&child2=<%= child[0].child2 %>&child3=<%= child[0]._id %>"><span></span> <b><%= child[i].child[0].name %></b></a>

This URL is getting formed with above code that I am using in the dashboard.

Here are my application routes from routes.js:

 routes:

 "dashboard" : "dashboard",
 "dashboard/parent/:id" : "dashboard_parent",
 "signup" : "signup",
 "forgotpassword" : "forgotpassword",
 "change-password/:token" : "resetpassword",
 "login" : "login", 
 "logout" : "logout",
 "parents/" : "parents",
 "parent-detail/:id" : "parent_detail",
 "parent-detail_1/:id" : "parent_detail_1",
 "parent-detail_2/:id" : "parent_detail_2",
 "verify_user/:token" : "verifyEmail"

Here is the carter code:

window.ParentView = Backbone.View.extend(
 el: "#content2",
 initialize: function() 
 this.render();
 ,
 render: function() 
 var self = this;
 // $('body').attr('class', 'fixed-topbar fixed-sidebar theme-sdtl color-default dashboard');

 $.get(BASEURL + "template/parents/parents.html", function(html) 
 var template = _.template(html);
 var vars = username: window.localStorage.getItem('username') ;
 html = template(vars);
 self.$el.html(html);
 );
 ,

);

var ParentTabsView = Backbone.View.extend(
 el: '#parents-tabs',
 props: ,

 initialize: function(params) 
 // console.log(params);
 if(params && params.sharedParentModel) 
 this.sharedParentModel = params.sharedParentModel
 
 //console.log(this.sharedParentModel);
 ,
 renderChat: function(parent) 
 var _this = this;
 $.get(BASEURL + "template/parents/right_section/chat.html", function(html) 
 $(parent).html(html);
 );
 ,
 renderTasks: function(parent, activity_id) 
 this.sharedParentModel.activity_id = activity_id;
 var _this = this;
 $.get(BASEURL + "template/parents/right_section/tasks_layout.html", function(html) 
 var template = _.template(html);
 $(parent).html(template());
 ).done(function() 
 new TasksView(sharedParentModel: _this.sharedParentModel).load_data_and_render();
 );
 ,
 renderInvitePeople: function(parent) 
 this.clearIt(parent);
 $(parent).append(new InvitePeopleView(sharedParentModel: this.sharedParentModel).render().el);
 ,
 renderShowInvitedPeople: function(parent) 
 this.clearIt(parent);
 $(parent).append(new ShowInvitedPeopleView(sharedParentModel: this.sharedParentModel).render().el);
 ,
 renderTeam: function(parent) 
 var _this = this;
 // console.log(this.sharedParentModel);

 this.clearIt(parent);
 $(parent).append(new TeamListParentView(sharedParentModel: this.sharedParentModel).render().el);
 ,
 renderTasksInfoChat: function(parent) 
 this.clearIt(parent);

 var outerTemplate = crel('div', class: 'row');
 var promiseOne = new Promise(function(resolve, reject) 
 $.get(BASEURL + "template/parents/right_section/task_info.html")
 .done(function(html) resolve(html); )
 .fail(function(err) reject(err));
 );
 var promiseTwo = new Promise(function(resolve, reject) 
 $.get(BASEURL + "template/parents/right_section/chat.html")
 .done(function(html) resolve(html); )
 .fail(function(err) reject(err); );
 );

 Promise.all([promiseOne, promiseTwo]).then(function(values) 
 var view = _.map(values, function(dom) $(outerTemplate).append(dom); );
 $(parent).append(outerTemplate);
 );
 ,
 clearThem: function(parents) 
 var _this = this;
 _.each(parents, function(parent) 
 $(parent).empty();
 )
 ,
 clearIt: function(parent) 
 $(parent).empty();
 ,
 destroy_view: function() 
 // COMPLETELY UNBIND THE VIEW
 this.undelegateEvents();
 this.$el.removeData().unbind(); 
 // Remove view from DOM
 this.remove(); 
 Backbone.View.prototype.remove.call(this);
 ,
 set_params: function(params) 
 if(params && params.sharedParentModel) 
 this.sharedParentModel = params.sharedParentModel
 
 ,
);

What is wrong here.

Please help.
Thanks in advance.

So basically we have found a workaround for our problem. We have loaded the last child in the parent views that was not loading directly. So for that loaded each child by setting the click trigger with some interval using below code.

renderChild:function(e)
 var child_id = $(e.target).closest('.renderChild').attr('child-id');
 var renderChildTimer = setInterval(function()
 if (document.getElementById(task_id)) 
 $('#'+child_id).trigger('click');
 clearInterval(renderChildTimer);
 
 , 800); 

Here in above code we have triggered each child id from url with click function.