Angular-devise 401 unauthorized error on landing page - ruby

I am building an app ROR that uses Devise for authentication and the angular-devise gem to link my angularJS front-end to rails.
When I come to the landing page of the app though the console is showing an error which I understand to be devise trying to sign in and having no username or password for that. My question is: Why is it trying to sign in?
I admit my limited understanding of how Devise and Angular-devise work. So I am not being able to debug this error. On top of that I m having the error twice, which I understand to be devise trying to sign in twice. I still don't know where these calls are being made to improve the code.
navCtrl.js
angular.module('theNotesApp')
.controller('navCtrl', ['$scope', 'Auth', '$state', 'notesFactory', 'Flash', function($scope, Auth, $state, notesService, Flash) {
$scope.signedIn = Auth.isAuthenticated;
$scope.logout = Auth.logout;
$scope.successAlert = function() {
var message = '<strong> Well done!</strong> You successfully read this important alert message.';
Flash.create('success', message, 'custom-class');
// First argument (success) is the type of the flash alert
// Second argument (message) is the message displays in the flash alert
// You can inclide html as message (not just text)
// Third argument (custom-class) is the custom class for the perticular flash alert
};
// When the controller loads the function below is executed and the currentUser returned promise is set as
//the value of $scope.user
Auth.currentUser().then(function(user) {
$scope.user = user;
});
$scope.$on('devise:new-registration', function(event, user){
$scope.user = user;
});
$scope.$on('devise:login', function (event, user){
$scope.user = user;
});
$scope.$on('devise:logout', function (event, user){
$scope.user = {};
$state.go('welcome');
$scope.clear();
});
}])
authCtrl.js
angular.module('theNotesApp')
.controller('authCtrl',['$scope', '$state', 'Auth', function($scope, $state, Auth) {
$scope.login = function() {
Auth.login($scope.user).then(function () {
$state.go('home');
});
};
$scope.register = function() {
Auth.register($scope.user).then(function () {
$state.go('home');
});
};
}])
application_controller.rb
![class ApplicationController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
respond_to :json
before_action :configure_permitted_parameters, if: :devise_controller?
def angular
render 'layouts/application'
end
def configure_permitted_parameters
devise_parameter_sanitizer.for(:sign_up) << :username
end
end][3]
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>The Notes App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<!--jquerytag must be on top as it's required for bootstrap.min.js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--javascript plugins -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body ng-app="theNotesApp">
<nav class="navbar navbar-default" ng-controller="navCtrl" ng-show="signedIn()" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/home">The Notes App</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#/home" >+ New Note</a></li>
<li class="active" ng-hide="signedIn()">Register <span class="sr-only">(current)</span></li>
<li ng-hide="signedIn()">Login</li>
<li ng-show="signedIn()">{{user.email}}</li>
<li ng-show="signedIn()"><a ng-click="logout()">Logout</a></li>
</ul>
</div>
</div>
</nav>
<ui-view></ui-view>
</body>
</html>
welcome.html
<div class="intro-header fadein">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message" style="color: black">
<h1>The Notes App</h1>
<h3>Access your notes anywhere, anytime!</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Login</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">register</span>
</li>
</ul>
</div>
</div>
<div class="col-lg-12" >
</div>
</div>
</div>
<!-- /.container -->
</div>


In navCtrl.js you have:
Auth.currentUser().then(function(user) {
$scope.user = user;
});
This is responsible for one of the sign-in attempt.
I don't know where the other attempt is from. I would advise you to check for a similar call by running grep -r Auth\.currentUser app in you Rails root folder.


If my guess is right, signedIn() function will be fire up "sign_in.json" call.
If yes then it is due to ng-show="signedIn()" / ng-hide="signedIn()" that you have in application.html.erb.
Ng-show & ng-hide will be evaluated when the page is parsed.

Related

output in BarChart with stacks is empty NaN

I have a problem with the stacked barchart in dc.
I think it's a problem with the group, but I'm not sure.
Can someone please help me.. I'm working on this problem for days.
The BarChart sould show the date (date in this .csv is "daten_stand") on the x-Axis. And on the y-Axis, three Stacks. One for the column of the csv "faelle_covid_aktuell", on for "betten_frei" and on for "betten_belegt". Additionally I filtered all the data by die column "bundesland" (state);
Hier you can see the code and the csv...
let barChartContainer1;
let barChart;
function drawbarChar() {
barChart = new dc.BarChart("#" + barChartContainer1[0].id);
d3.csv("../data/betten_BarChart.csv").then(function (data) {
let filterData = data.filter(x => x.bundesland == "01");
let newData = [];
let i = 0;
filterData.forEach(element => {
let parts = element.daten_stand.split('-');
let date = parts[2] + "." + parts[1] + "." +parts[0];
newData.push([element.daten_stand, element.gemeindeschluessel, "betten_frei", element.betten_frei]);
i++;
newData.push([element.daten_stand, element.gemeindeschluessel, "betten_belegt", element.betten_belegt]);
i++;
newData.push([element.daten_stand, element.gemeindeschluessel, "faelle_covid_aktuell", element.faelle_covid_aktuell]);
i++;
});
var myCrossfilter = crossfilter(newData),
dim = myCrossfilter.dimension(function (d) {
return d;
}),
group = dim.group().reduce((p, d)=> {
//p[d.gemeindeschluessel] = (p[d.gemeindeschluessel] || 0) + d.betten_frei;
p[d] = (p[d] || 0) + d.faelle_covid_aktuell;
p[d] = (p[d] || 0) + d.betten_frei;
p[d] = (p[d] || 0) + d.betten_belegt;
console.log(p)
return p;
}, function reduceRemove(p, d) {
// p[d.gemeindeschluessel] = (p[d.gemeindeschluessel] || 0) - d.betten_frei;
p[d] = (p[d] || 0) - d.faelle_covid_aktuell;
p[d] = (p[d] || 0) - d.betten_frei;
p[d] = (p[d] || 0) - d.betten_belegt;
return p;
}, () => ({}));
function sel_stack (i) {
return function (dataItem) {
return dataItem.value[i];
};
}
barChart
.height(200)
.x(d3.scaleLinear().domain([1, 21]))
.brushOn(false)
.clipPadding(10)
.dimension(dim)
.group(group, '1', sel_stack('1'))
.renderLabel(true);
barChart.legend(dc.legend());
for(var j = 2; j<4; j++){
barChart.stack(group, '' + j, sel_stack(j))
}
barChart.render();
});
}
$(document).ready(function () {
barChartContainer1 = $("#right-graph1");
drawbarChar();
$(window).resize(function () {
drawbarChar();
});
});
bundesland,gemeindeschluessel,anzahl_meldebereiche,faelle_covid_aktuell,faelle_covid_aktuell_beatmet,anzahl_standorte,betten_frei,betten_belegt,daten_stand
01,01001,2,0,0,2,51,32,2020-06-07
01,01002,5,0,0,3,136,122,2020-06-07
01,01003,2,0,0,2,135,108,2020-06-07
01,01004,1,0,0,1,22,18,2020-06-07
01,01051,1,1,0,1,22,34,2020-06-07
01,01053,2,0,0,2,14,10,2020-06-07
01,01054,3,0,0,3,23,21,2020-06-07
01,01055,3,0,0,3,20,32,2020-06-07
01,01056,2,0,0,2,9,26,2020-06-07
01,01057,1,0,0,1,7,5,2020-06-07
01,01058,3,0,0,3,15,35,2020-06-07
01,01059,1,3,0,1,11,13,2020-06-07
01,01060,4,1,0,4,60,70,2020-06-07
01,01061,1,0,0,1,18,22,2020-06-07
01,01062,3,0,0,3,29,30,2020-06-07
02,02000,26,19,16,23,404,524,2020-06-07
03,03101,5,1,1,5,68,91,2020-06-07
03,03102,2,0,0,2,7,20,2020-06-07
03,03103,1,2,0,1,30,16,2020-06-07
03,03151,2,0,0,2,7,29,2020-06-07
03,03153,3,0,0,3,52,37,2020-06-07
03,03154,1,2,0,1,15,19,2020-06-07
03,03155,2,0,0,2,9,14,2020-06-07
03,03157,1,0,0,1,5,17,2020-06-07
03,03158,1,2,2,1,4,12,2020-06-07
03,03159,8,4,3,7,79,135,2020-06-07
03,03241,16,16,12,16,133,348,2020-06-07
03,03251,3,0,0,3,10,3,2020-06-07
03,03252,4,1,1,4,15,57,2020-06-07
03,03254,5,0,0,4,44,54,2020-06-07
03,03255,1,0,0,1,4,10,2020-06-07
03,03256,1,0,0,1,17,17,2020-06-07
03,03257,1,1,1,1,9,14,2020-06-07
03,03351,3,0,0,1,8,33,2020-06-07
03,03352,2,1,0,2,9,9,2020-06-07
03,03353,3,1,0,3,31,35,2020-06-07
03,03354,1,0,0,1,16,7,2020-06-07
03,03355,2,0,0,2,13,25,2020-06-07
03,03356,2,0,0,2,6,9,2020-06-07
03,03357,3,0,0,2,6,26,2020-06-07
03,03358,3,0,0,3,17,22,2020-06-07
03,03359,3,0,0,2,14,23,2020-06-07
03,03360,2,0,0,2,31,50,2020-06-07
03,03361,2,4,0,2,4,13,2020-06-07
03,03401,1,0,0,1,13,14,2020-06-07
03,03402,1,0,0,1,12,9,2020-06-07
03,03403,5,6,6,3,111,114,2020-06-07
03,03404,4,0,0,4,90,34,2020-06-07
03,03405,1,0,0,1,12,22,2020-06-07
03,03451,3,0,0,2,18,25,2020-06-07
03,03452,3,0,0,3,21,21,2020-06-07
03,03453,3,2,0,3,11,35,2020-06-07
03,03454,7,0,0,7,49,52,2020-06-07
03,03455,2,1,1,2,12,25,2020-06-07
03,03456,1,0,0,1,19,11,2020-06-07
03,03457,3,0,0,2,22,21,2020-06-07
03,03458,1,0,0,1,6,9,2020-06-07
03,03459,8,0,0,7,72,53,2020-06-07
03,03460,3,0,0,3,36,21,2020-06-07
03,03461,2,0,0,2,7,9,2020-06-07
03,03462,1,0,0,1,6,7,2020-06-07
04,04011,9,5,3,8,76,91,2020-06-07
04,04012,2,2,1,2,7,17,2020-06-07
05,05111,12,3,2,11,71,239,2020-06-07
05,05112,13,6,4,9,83,181,2020-06-07
05,05113,15,8,5,14,103,251,2020-06-07
05,05114,6,2,1,4,30,74,2020-06-07
05,05116,5,1,1,4,29,90,2020-06-07
05,05117,2,2,1,2,18,37,2020-06-07
05,05119,6,0,0,4,36,40,2020-06-07
05,05120,1,0,0,1,15,21,2020-06-07
05,05122,3,4,3,3,35,65,2020-06-07
05,05124,5,2,2,5,97,97,2020-06-07
05,05154,5,1,0,5,30,38,2020-06-07
05,05158,6,0,0,6,39,36,2020-06-07
05,05162,7,0,0,6,52,66,2020-06-07
05,05166,4,0,0,4,28,33,2020-06-07
05,05170,9,10,1,8,73,93,2020-06-07
05,05314,15,7,3,11,72,201,2020-06-07
05,05315,26,5,4,18,73,364,2020-06-07
05,05316,4,0,0,2,32,56,2020-06-07
05,05334,8,12,10,7,63,225,2020-06-07
05,05358,6,0,0,5,37,40,2020-06-07
05,05362,7,0,0,7,20,59,2020-06-07
05,05366,3,1,0,3,9,36,2020-06-07
05,05370,3,0,0,3,12,24,2020-06-07
05,05374,7,2,0,7,41,85,2020-06-07
05,05378,4,0,0,4,20,32,2020-06-07
05,05382,6,0,0,6,31,65,2020-06-07
05,05512,2,1,1,2,38,28,2020-06-07
05,05513,6,1,0,4,62,71,2020-06-07
05,05515,8,3,3,7,31,232,2020-06-07
05,05554,5,1,1,5,37,44,2020-06-07
05,05558,3,0,0,3,26,9,2020-06-07
05,05562,14,1,1,14,105,177,2020-06-07
05,05566,5,2,2,5,30,61,2020-06-07
05,05570,5,0,0,5,28,34,2020-06-07
05,05711,4,0,0,4,38,106,2020-06-07
05,05754,3,1,1,3,24,26,2020-06-07
05,05758,4,2,2,3,25,43,2020-06-07
05,05762,5,0,0,5,15,23,2020-06-07
05,05766,2,1,1,2,26,55,2020-06-07
05,05770,6,5,2,6,53,99,2020-06-07
05,05774,4,4,4,4,33,56,2020-06-07
05,05911,8,1,1,6,91,160,2020-06-07
05,05913,9,5,2,9,61,238,2020-06-07
05,05914,5,1,1,5,40,48,2020-06-07
05,05915,6,1,1,5,34,59,2020-06-07
05,05916,4,2,1,4,29,42,2020-06-07
05,05954,7,1,0,6,43,97,2020-06-07
05,05958,9,4,3,9,51,71,2020-06-07
05,05962,8,2,0,8,47,80,2020-06-07
05,05966,3,1,1,3,27,14,2020-06-07
05,05970,6,0,0,6,34,87,2020-06-07
05,05974,6,0,0,6,21,42,2020-06-07
05,05978,8,0,0,8,35,98,2020-06-07
06,06411,7,1,0,4,40,75,2020-06-07
06,06412,15,9,6,12,78,233,2020-06-07
06,06413,2,2,2,2,47,67,2020-06-07
06,06414,5,7,6,4,42,80,2020-06-07
06,06431,5,0,0,5,22,26,2020-06-07
06,06432,2,2,0,2,2,26,2020-06-07
06,06433,2,0,0,2,6,19,2020-06-07
06,06434,3,0,0,3,10,20,2020-06-07
06,06435,5,2,1,4,36,65,2020-06-07
06,06436,2,0,0,2,14,19,2020-06-07
06,06437,1,2,2,1,0,104,2020-06-07
06,06438,2,5,3,2,25,31,2020-06-07
06,06439,2,0,0,2,13,7,2020-06-07
06,06440,5,2,0,5,61,71,2020-06-07
06,06531,4,9,3,4,56,230,2020-06-07
06,06532,2,0,0,2,9,52,2020-06-07
06,06533,3,0,0,3,19,43,2020-06-07
06,06534,3,1,1,3,49,132,2020-06-07
06,06535,4,0,0,4,23,17,2020-06-07
06,06611,6,1,1,6,46,143,2020-06-07
06,06631,3,0,0,3,25,57,2020-06-07
06,06632,3,1,0,3,33,43,2020-06-07
06,06633,3,0,0,3,10,20,2020-06-07
06,06634,3,0,0,3,33,20,2020-06-07
06,06635,7,0,0,7,47,79,2020-06-07
06,06636,3,0,0,3,39,19,2020-06-07
07,07111,5,0,0,4,57,58,2020-06-07
07,07131,2,0,0,2,8,17,2020-06-07
07,07132,2,0,0,2,13,10,2020-06-07
07,07133,4,0,0,4,27,24,2020-06-07
07,07134,2,0,0,2,14,14,2020-06-07
07,07135,2,0,0,2,20,7,2020-06-07
07,07137,4,1,1,4,28,17,2020-06-07
07,07138,5,0,0,5,37,40,2020-06-07
07,07140,2,0,0,2,5,10,2020-06-07
07,07141,5,0,0,5,21,26,2020-06-07
07,07143,4,0,0,4,16,22,2020-06-07
07,07211,4,0,0,3,58,60,2020-06-07
07,07231,2,0,0,2,16,21,2020-06-07
07,07232,2,0,0,2,9,8,2020-06-07
07,07233,2,0,0,2,15,1,2020-06-07
07,07235,2,0,0,2,10,6,2020-06-07
07,07311,1,0,0,1,8,14,2020-06-07
07,07312,1,3,2,1,70,95,2020-06-07
07,07313,3,0,0,2,8,7,2020-06-07
07,07314,4,1,1,4,64,66,2020-06-07
07,07315,2,0,0,2,42,86,2020-06-07
07,07316,1,0,0,1,8,13,2020-06-07
07,07317,1,0,0,1,8,8,2020-06-07
07,07318,3,2,2,2,12,25,2020-06-07
07,07319,1,0,0,1,7,22,2020-06-07
07,07320,1,0,0,1,8,6,2020-06-07
07,07331,1,0,0,1,6,2,2020-06-07
07,07332,2,0,0,2,11,11,2020-06-07
07,07333,2,0,0,2,6,6,2020-06-07
07,07334,2,0,0,2,22,7,2020-06-07
07,07335,1,0,0,1,11,3,2020-06-07
07,07336,1,0,0,1,0,16,2020-06-07
07,07337,2,0,0,2,9,8,2020-06-07
07,07339,2,4,4,2,10,17,2020-06-07
07,07340,1,0,0,1,7,2,2020-06-07
08,08111,11,11,5,9,218,299,2020-06-07
08,08115,4,0,0,4,20,29,2020-06-07
08,08116,6,4,0,4,25,47,2020-06-07
08,08117,4,2,0,3,31,44,2020-06-07
08,08118,5,13,7,4,137,77,2020-06-07
08,08119,2,2,1,2,66,43,2020-06-07
08,08121,1,1,1,1,32,36,2020-06-07
08,08125,2,0,0,2,12,40,2020-06-07
08,08126,1,0,0,1,7,5,2020-06-07
08,08127,2,1,0,2,24,28,2020-06-07
08,08128,3,1,1,3,30,38,2020-06-07
08,08135,1,0,0,1,7,17,2020-06-07
08,08136,3,1,0,3,26,29,2020-06-07
08,08211,2,1,0,1,13,11,2020-06-07
08,08212,4,0,0,4,52,81,2020-06-07
08,08215,3,3,2,3,18,48,2020-06-07
08,08216,2,0,0,2,4,11,2020-06-07
08,08221,6,7,5,6,112,217,2020-06-07
08,08222,5,3,2,3,37,98,2020-06-07
08,08225,3,0,0,3,11,7,2020-06-07
08,08226,4,1,0,4,12,25,2020-06-07
08,08231,2,2,0,2,18,45,2020-06-07
08,08235,2,0,0,2,17,5,2020-06-07
08,08236,2,0,0,2,13,14,2020-06-07
08,08237,1,0,0,1,2,8,2020-06-07
08,08311,4,4,3,4,103,135,2020-06-07
08,08315,4,0,0,4,43,71,2020-06-07
08,08316,3,1,1,3,8,26,2020-06-07
08,08317,6,2,0,6,66,56,2020-06-07
08,08325,2,1,1,2,5,7,2020-06-07
08,08326,5,13,2,2,51,48,2020-06-07
08,08327,1,2,1,1,15,6,2020-06-07
08,08335,7,0,0,6,29,66,2020-06-07
08,08336,1,0,0,1,0,19,2020-06-07
08,08337,2,1,1,2,12,26,2020-06-07
08,08415,2,1,1,1,12,24,2020-06-07
08,08416,5,5,4,2,24,99,2020-06-07
08,08417,1,0,0,1,18,12,2020-06-07
08,08421,3,0,0,3,49,84,2020-06-07
08,08425,2,0,0,2,19,11,2020-06-07
08,08426,1,0,0,1,20,7,2020-06-07
08,08435,3,0,0,3,40,34,2020-06-07
08,08436,5,2,1,4,18,44,2020-06-07
08,08437,2,0,0,2,15,12,2020-06-07
09,09161,2,8,3,1,6,30,2020-06-07
09,09162,28,41,29,26,225,554,2020-06-07
09,09163,1,0,0,1,38,32,2020-06-07
09,09171,3,0,0,2,6,35,2020-06-07
09,09172,3,0,0,3,1,20,2020-06-07
09,09173,2,0,0,2,4,24,2020-06-07
09,09174,1,1,1,1,42,26,2020-06-07
09,09175,1,0,0,1,11,9,2020-06-07
09,09176,3,4,3,3,19,57,2020-06-07
09,09177,1,0,0,1,14,13,2020-06-07
09,09178,1,3,3,1,3,19,2020-06-07
09,09179,1,0,0,1,6,9,2020-06-07
09,09180,1,0,0,1,26,45,2020-06-07
09,09181,1,0,0,1,3,7,2020-06-07
09,09182,1,0,0,1,22,8,2020-06-07
09,09183,1,0,0,1,11,15,2020-06-07
09,09184,2,0,0,2,8,9,2020-06-07
09,09185,3,1,1,2,9,8,2020-06-07
09,09186,1,0,0,1,4,9,2020-06-07
09,09187,5,6,2,5,27,41,2020-06-07
09,09188,5,3,3,5,44,44,2020-06-07
09,09189,3,3,3,2,18,44,2020-06-07
09,09190,3,0,0,3,23,20,2020-06-07
09,09261,5,1,1,3,12,55,2020-06-07
09,09262,2,0,0,2,16,13,2020-06-07
09,09263,1,0,0,1,30,13,2020-06-07
09,09271,2,0,0,2,4,31,2020-06-07
09,09272,2,0,0,2,10,12,2020-06-07
09,09273,3,0,0,3,20,12,2020-06-07
09,09274,1,0,0,1,4,6,2020-06-07
09,09275,1,2,2,1,4,16,2020-06-07
09,09276,2,0,0,2,14,11,2020-06-07
09,09277,1,1,1,1,22,13,2020-06-07
09,09278,2,0,0,2,17,7,2020-06-07
09,09279,2,1,0,2,7,19,2020-06-07
09,09361,1,2,1,1,18,20,2020-06-07
09,09362,3,14,10,3,102,163,2020-06-07
09,09363,1,3,2,1,24,49,2020-06-07
09,09371,1,1,1,1,11,3,2020-06-07
09,09372,1,0,0,1,8,14,2020-06-07
09,09373,1,0,0,1,7,23,2020-06-07
09,09375,2,1,0,2,4,10,2020-06-07
09,09376,4,0,0,4,31,15,2020-06-07
09,09377,1,0,0,1,2,10,2020-06-07
09,09461,4,1,0,1,27,31,2020-06-07
09,09462,5,0,0,2,15,44,2020-06-07
09,09463,1,2,1,1,10,26,2020-06-07
09,09464,1,0,0,1,15,27,2020-06-07
09,09471,2,0,0,2,10,7,2020-06-07
09,09472,1,0,0,1,8,1,2020-06-07
09,09474,2,0,0,2,13,10,2020-06-07
09,09475,2,0,0,2,3,14,2020-06-07
09,09476,1,0,0,1,1,14,2020-06-07
09,09477,1,0,0,1,11,27,2020-06-07
09,09478,2,3,0,2,8,22,2020-06-07
09,09479,2,0,0,2,13,7,2020-06-07
09,09561,2,1,1,2,9,14,2020-06-07
09,09562,3,5,1,3,35,128,2020-06-07
09,09563,2,1,0,2,19,34,2020-06-07
09,09564,8,1,0,6,88,152,2020-06-07
09,09565,1,1,0,1,2,5,2020-06-07
09,09571,2,0,0,2,8,9,2020-06-07
09,09572,1,0,0,1,1,5,2020-06-07
09,09574,3,0,0,3,10,14,2020-06-07
09,09575,3,0,0,2,20,51,2020-06-07
09,09576,1,0,0,1,4,7,2020-06-07
09,09577,2,0,0,2,6,10,2020-06-07
09,09661,2,1,1,1,10,43,2020-06-07
09,09662,2,1,1,2,6,39,2020-06-07
09,09663,3,4,4,3,50,109,2020-06-07
09,09671,1,0,0,1,5,3,2020-06-07
09,09672,4,0,0,4,11,42,2020-06-07
09,09673,1,0,0,1,40,122,2020-06-07
09,09674,2,0,0,2,12,4,2020-06-07
09,09675,1,0,0,1,0,10,2020-06-07
09,09676,1,0,0,1,5,9,2020-06-07
09,09677,1,0,0,1,2,7,2020-06-07
09,09678,2,0,0,2,5,1,2020-06-07
09,09679,1,0,0,1,8,4,2020-06-07
09,09761,3,0,0,2,48,100,2020-06-07
09,09762,1,0,0,1,18,13,2020-06-07
09,09763,1,0,0,1,7,24,2020-06-07
09,09764,1,0,0,1,15,19,2020-06-07
09,09771,2,2,0,2,10,16,2020-06-07
09,09772,2,0,0,2,9,9,2020-06-07
09,09773,2,0,0,2,10,14,2020-06-07
09,09774,4,0,0,4,21,50,2020-06-07
09,09775,2,2,0,2,11,12,2020-06-07
09,09776,2,0,0,2,13,1,2020-06-07
09,09777,2,0,0,2,8,12,2020-06-07
09,09778,2,0,0,2,11,9,2020-06-07
09,09779,3,0,0,3,21,12,2020-06-07
09,09780,1,0,0,1,11,12,2020-06-07
10,10041,7,2,1,7,87,139,2020-06-07
10,10042,2,0,0,2,18,7,2020-06-07
10,10043,3,0,0,3,18,31,2020-06-07
10,10044,4,2,1,3,36,35,2020-06-07
10,10045,2,1,0,2,109,164,2020-06-07
10,10046,1,2,1,1,5,11,2020-06-07
11,11000,59,59,43,42,362,1048,2020-06-07
12,12051,3,1,0,3,10,45,2020-06-07
12,12052,2,0,0,2,52,51,2020-06-07
12,12053,1,0,0,1,12,29,2020-06-07
12,12054,4,0,0,4,26,57,2020-06-07
12,12060,2,1,0,2,55,57,2020-06-07
12,12061,5,0,0,5,18,54,2020-06-07
12,12062,3,0,0,3,23,26,2020-06-07
12,12063,4,0,0,2,16,13,2020-06-07
12,12064,3,0,0,3,13,23,2020-06-07
12,12065,5,0,0,5,39,20,2020-06-07
12,12066,1,3,0,1,23,22,2020-06-07
12,12067,4,0,0,4,88,64,2020-06-07
12,12068,3,0,0,3,23,23,2020-06-07
12,12069,3,0,0,3,43,58,2020-06-07
12,12070,2,0,0,2,18,7,2020-06-07
12,12071,3,0,0,3,10,13,2020-06-07
12,12072,2,0,0,2,12,10,2020-06-07
12,12073,4,0,0,4,14,27,2020-06-07
13,13003,2,1,1,2,39,80,2020-06-07
13,13004,1,0,0,1,7,47,2020-06-07
13,13071,5,1,0,5,37,54,2020-06-07
13,13072,6,0,0,4,36,30,2020-06-07
13,13073,4,0,0,4,24,47,2020-06-07
13,13074,2,0,0,2,10,35,2020-06-07
13,13075,7,0,0,7,69,159,2020-06-07
13,13076,7,0,0,7,55,142,2020-06-07
14,14511,3,0,0,3,24,148,2020-06-07
14,14521,6,0,0,6,31,54,2020-06-07
14,14522,5,0,0,5,35,38,2020-06-07
14,14523,4,0,0,4,46,46,2020-06-07
14,14524,6,1,0,5,37,82,2020-06-07
14,14612,12,0,0,6,67,218,2020-06-07
14,14625,6,3,3,5,21,43,2020-06-07
14,14626,6,0,0,6,33,33,2020-06-07
14,14627,5,0,0,5,47,49,2020-06-07
14,14628,6,26,6,6,60,66,2020-06-07
14,14713,9,0,0,7,166,263,2020-06-07
14,14729,3,0,0,3,24,29,2020-06-07
14,14730,8,0,0,8,36,44,2020-06-07
15,15001,2,0,0,2,20,28,2020-06-07
15,15002,6,4,3,5,93,220,2020-06-07
15,15003,7,0,0,5,52,176,2020-06-07
15,15081,2,0,0,2,8,12,2020-06-07
15,15082,3,0,0,3,26,26,2020-06-07
15,15083,2,0,0,2,25,13,2020-06-07
15,15084,3,0,0,3,39,18,2020-06-07
15,15085,4,0,0,4,22,33,2020-06-07
15,15086,2,5,4,2,13,17,2020-06-07
15,15087,3,0,0,3,25,11,2020-06-07
15,15088,2,0,0,2,11,12,2020-06-07
15,15089,4,0,0,4,25,48,2020-06-07
15,15090,2,0,0,2,32,26,2020-06-07
15,15091,2,0,0,2,38,25,2020-06-07
16,16051,2,3,0,2,30,66,2020-06-07
16,16052,1,3,1,1,10,36,2020-06-07
16,16053,1,0,0,1,18,97,2020-06-07
16,16054,1,1,1,1,11,11,2020-06-07
16,16055,1,0,0,1,5,11,2020-06-07
16,16056,1,0,0,1,21,23,2020-06-07
16,16061,3,1,1,3,14,16,2020-06-07
16,16062,3,3,0,3,45,36,2020-06-07
16,16063,3,0,0,3,21,66,2020-06-07
16,16064,3,1,1,3,47,26,2020-06-07
16,16065,1,0,0,1,4,7,2020-06-07
16,16066,2,0,0,2,11,37,2020-06-07
16,16067,2,0,0,2,25,16,2020-06-07
16,16068,1,0,0,1,6,8,2020-06-07
16,16069,1,0,0,1,5,3,2020-06-07
16,16070,2,0,0,2,12,6,2020-06-07
16,16071,3,0,0,3,57,69,2020-06-07
16,16072,1,0,0,1,4,4,2020-06-07
16,16073,1,0,0,1,9,13,2020-06-07
16,16074,1,0,0,1,12,4,2020-06-07
16,16075,1,0,0,1,0,0,2020-06-07
16,16076,1,2,2,1,6,11,2020-06-07
16,16077,2,0,0,1,30,30,2020-06-07
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -->
<meta name="description" content="">
<meta name="author" content="Philipp Fruh">
<meta name="generator" content="">
<title>Angewandtes Projekt: Visualisierung SS20</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<link href="./stylesheets/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid h-100 d-flex flex-column">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white border shadow rounded mt-2">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Content -->
<!-- Top Row -->
<div class="row flex-grow-1">
<div class="col-md-12 p-2 px-3">
<div class="card shadow h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<div id="top-graph"></div>
</div>
</div>
</div>
</div>
<!-- Bottom Row -->
<div class="row flex-grow-1">
<!-- Left -->
<div class="col-md-4 p-2 pl-3">
<div class="card shadow h-100">
<div class="card-body">
<h5 class="card-title">Auslastung ÖPNV am 19.05.2020</h5>
<div id="left-graph"></div>
</div>
</div>
</div>
<!-- Middle -->
<div class="col-md-4 p-2">
<div class="card shadow h-100">
<div class="card-body">
<h5 class="card-title">Kartenausschnitt Umkreis Uniklinikum Mannheim</h5>
<div id="middle-graph"></div>
</div>
</div>
</div>
<!-- Right -->
<div class="col-md-4 p-2 pr-3">
<div class="card shadow h-100">
<div class="card-body">
<h5 class="card-title">Auslastung der Krankenhäuser Mannheim</h5>
<h6 class="card-title">Belegung der Intensivbetten im Kreis Mannheim</h6>
<div id="right-graph1"></div>
<h6 class="card-title">Universitätsklinikum</h6>
<div id="right-graph2"></div>
<h6 class="card-title">Diakonissenkrankenhaus</h6>
<div id="right-graph3"></div>
<h6 class="card-title">Theresienkrankenhaus</h6>
<div id="right-graph4"></div>
<div id="right-graph"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js" integrity="sha256-Xb6SSzhH3wEPC4Vy3W70Lqh9Y3Du/3KxPqI2JHQSpTw=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.0.3/dc.min.js" integrity="sha256-nnWFwZ3i2j5HWFnLM8oZrkabWG1Pn080eVXL6MvLsH4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js" integrity="sha256-T9tvV3x+/vCnCoFciKNZwbaJ46q9lh6iZjD0ZjD95lE=" crossorigin="anonymous"></script>
<script src="./js/heatmap.js"></script>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
Thanks for your help.

KnockoutJS elements not rendered once loaded via Jquery Ajax function

I have loaded a sidebar over ajax however this html uses knockoutJS to render completely. I am wondering how to execute the KnockoutJs portions of this code.
The content below is loaded via jQuery ajax function and contains a number of knockout elements as well as some X Magento Init type scripts:
<div class=\"block filter\" id=\"layered-filter-block\" data-mage-init='{\"collapsible\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": false, \"collateral\": { \"openedState\": \"filter-active\", \"element\": \"body\" } }}'>
<div class=\"block-title filter-title\" data-count=\"0\">
<strong data-role=\"title\">Shop By<\/strong>
<\/div>
<div class=\"block-content filter-content\">
<strong role=\"heading\" aria-level=\"2\" class=\"block-subtitle filter-subtitle\">Shopping Options<\/strong>
<div class=\"filter-options\" id=\"narrow-by-list\" data-role=\"content\" data-mage-init='{\"accordion\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": [0,1,2], \"multipleCollapsible\": true}}'>
<div data-role=\"collapsible\" class=\"filter-options-item\">
<div data-role=\"title\" class=\"filter-options-title\">Category<\/div>
<div data-role=\"content\" class=\"filter-options-content\">\n<ol class=\"items\">
<li class=\"item\">
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=143&q=ice+machine\">Front of House
<span class=\"count\">2<span class=\"filter-count-label\">items<\/span><\/span><\/a>
<\/li>
<li class=\"item\">
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=182&q=ice+machine\">Bar Supplies
<span class=\"count\">4<span class=\"filter-count-label\">items<\/span><\/span><\/a>
<\/li>
<li class=\"item\">
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=257&q=ice+machine\">Catering Equipment<span class=\"count\">111<span class=\"filter-count-label\">\n
items <\/span><\/span>\n
<\/a>\n <\/li>\n
<li class=\"item\">\n
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=342&q=ice+machine\">\n
Warewashing <span class=\"count\">\n
3 <span class=\"filter-count-label\">\n
items <\/span><\/span>\n
<\/a>\n <\/li>\n <li class=\"item\">\n
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=521&q=ice+machine\">\n
Catering Equipment Offers <span class=\"count\">\n 1
<span class=\"filter-count-label\">\n item <\/span><\/span>\n
<\/a>\n <\/li>\
<\/ol>
<\/div>\n
<\/div>\n
<div data-role=\"collapsible\" class=\"filter-options-item\">
<div data-role=\"title\" class=\"filter-options-title\">Brand<\/div>\n
<div data-role=\"content\" class=\"filter-options-content\">
<div data-bind=\"scope: 'brandFilter'\">
<!-- ko template: getTemplate() --> <!-- \/ko -->
<\/div>
<script type=\"text\/x-magento-init\">
{\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"brandFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\\/js\\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":true,\"ajaxLoadUrl\":\"http:\\\/\\\/www.domain.com\\\/catalog\\\/navigation_filter\\\/ajax\\\/?ajax=1&filterName=brand&q=ice+machine\",\"items\":[{\"label\":\"Scotsman\",\"count\":41,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Scotsman&q=ice+machine\",\"is_selected\":false},{\"label\":\"Hoshizaki\",\"count\":15,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Hoshizaki&q=ice+machine\",\"is_selected\":false},{\"label\":\"Ice-o-matic\",\"count\":12,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Ice-o-matic&q=ice+machine\",\"is_selected\":false},{\"label\":\"Blue Ice\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Blue+Ice&q=ice+machine\",\"is_selected\":false},{\"label\":\"Graupel\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Graupel&q=ice+machine\",\"is_selected\":false},{\"label\":\"Nemox\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Nemox&q=ice+machine\",\"is_selected\":false},{\"label\":\"Manitowoc\",\"count\":6,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Manitowoc&q=ice+machine\",\"is_selected\":false},{\"label\":\"Polar Refrigeration\",\"count\":5,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Polar+Refrigeration&q=ice+machine\",\"is_selected\":false},{\"label\":\"Longo & Co\",\"count\":4,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Longo+%26+Co&q=ice+machine\",\"is_selected\":false},{\"label\":\"Beaumont\",\"count\":3,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Beaumont&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\">\n <div data-role=\"title\" class=\"filter-options-title\">Power<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"><div data-bind=\"scope: 'power_ddFilter'\">\n <!-- ko template: getTemplate() --> <!-- \/ko -->\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n {\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"power_ddFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\\/js\\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":false,\"ajaxLoadUrl\":\"http:\\\/\\\/www.domain.com\\\/catalog\\\/navigation_filter\\\/ajax\\\/?ajax=1&filterName=power_dd&q=ice+machine\",\"items\":[{\"label\":\"13 Amp (Plug)\",\"count\":111,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&power_dd=13+Amp+%28Plug%29&q=ice+machine\",\"is_selected\":false},{\"label\":\"1 Phase (Hard Wired)\",\"count\":2,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&power_dd=1+Phase+%28Hard+Wired%29&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\">\n <div data-role=\"title\" class=\"filter-options-title\">Price<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"><div class=\"smile-es-range-slider\" data-role=\"range-price-slider-price\">\n <div data-role=\"from-label\"><\/div>\n <div data-role=\"to-label\"><\/div>\n <div data-role=\"slider-bar\"><\/div>\n <div class=\"actions-toolbar\">\n <div data-role=\"message-box\"><\/div>\n <div class=\"actions-primary\">\n <a class=\"action primary small\" data-role=\"apply-range\">\n <span>OK<\/span>\n <\/a>\n <\/div>\n <\/div>\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n { \"[data-role=range-price-slider-price]\" : { \"rangeSlider\" : {\"minValue\":1,\"maxValue\":6091,\"currentValue\":{\"from\":1,\"to\":6091},\"fieldFormat\":{\"pattern\":\"\\u00a3%s\",\"precision\":2,\"requiredPrecision\":2,\"decimalSymbol\":\".\",\"groupSymbol\":\",\",\"groupLength\":3,\"integerRequired\":false},\"intervals\":[{\"value\":1,\"count\":1},{\"value\":2,\"count\":1},{\"value\":3,\"count\":1},{\"value\":40,\"count\":1},{\"value\":60,\"count\":1},{\"value\":64,\"count\":1},{\"value\":150,\"count\":1},{\"value\":179,\"count\":1},{\"value\":190,\"count\":1},{\"value\":242,\"count\":1},{\"value\":291,\"count\":1},{\"value\":325,\"count\":1},{\"value\":355,\"count\":2},{\"value\":395,\"count\":1},{\"value\":465,\"count\":1},{\"value\":472,\"count\":1},{\"value\":515,\"count\":1},{\"value\":520,\"count\":1},{\"value\":535,\"count\":1},{\"value\":555,\"count\":1},{\"value\":577,\"count\":1},{\"value\":585,\"count\":1},{\"value\":599,\"count\":1},{\"value\":605,\"count\":2},{\"value\":615,\"count\":1},{\"value\":640,\"count\":1},{\"value\":658,\"count\":1},{\"value\":685,\"count\":1},{\"value\":705,\"count\":1},{\"value\":730,\"count\":1},{\"value\":745,\"count\":2},{\"value\":785,\"count\":1},{\"value\":805,\"count\":1},{\"value\":830,\"count\":1},{\"value\":895,\"count\":2},{\"value\":925,\"count\":1},{\"value\":965,\"count\":1},{\"value\":970,\"count\":1},{\"value\":990,\"count\":2},{\"value\":1030,\"count\":1},{\"value\":1065,\"count\":1},{\"value\":1080,\"count\":1},{\"value\":1085,\"count\":1},{\"value\":1095,\"count\":1},{\"value\":1105,\"count\":1},{\"value\":1130,\"count\":1},{\"value\":1155,\"count\":1},{\"value\":1225,\"count\":1},{\"value\":1235,\"count\":1},{\"value\":1240,\"count\":1},{\"value\":1259,\"count\":1},{\"value\":1310,\"count\":1},{\"value\":1360,\"count\":1},{\"value\":1365,\"count\":1},{\"value\":1450,\"count\":1},{\"value\":1485,\"count\":1},{\"value\":1495,\"count\":1},{\"value\":1510,\"count\":1},{\"value\":1580,\"count\":2},{\"value\":1605,\"count\":2},{\"value\":1685,\"count\":1},{\"value\":1710,\"count\":1},{\"value\":1779,\"count\":1},{\"value\":1785,\"count\":1},{\"value\":1865,\"count\":1},{\"value\":1870,\"count\":1},{\"value\":1885,\"count\":1},{\"value\":1890,\"count\":1},{\"value\":1970,\"count\":1},{\"value\":1995,\"count\":1},{\"value\":2000,\"count\":1},{\"value\":2050,\"count\":1},{\"value\":2130,\"count\":1},{\"value\":2199,\"count\":1},{\"value\":2220,\"count\":1},{\"value\":2345,\"count\":1},{\"value\":2350,\"count\":1},{\"value\":2360,\"count\":1},{\"value\":2405,\"count\":1},{\"value\":2415,\"count\":1},{\"value\":2445,\"count\":1},{\"value\":2450,\"count\":2},{\"value\":2480,\"count\":1},{\"value\":2500,\"count\":1},{\"value\":2530,\"count\":1},{\"value\":2565,\"count\":1},{\"value\":2570,\"count\":1},{\"value\":2595,\"count\":1},{\"value\":2695,\"count\":1},{\"value\":2730,\"count\":1},{\"value\":2825,\"count\":1},{\"value\":2850,\"count\":1},{\"value\":2950,\"count\":1},{\"value\":2995,\"count\":1},{\"value\":3010,\"count\":1},{\"value\":3025,\"count\":1},{\"value\":3145,\"count\":1},{\"value\":3205,\"count\":1},{\"value\":3295,\"count\":1},{\"value\":3300,\"count\":1},{\"value\":3485,\"count\":1},{\"value\":3495,\"count\":1},{\"value\":3580,\"count\":1},{\"value\":4015,\"count\":1},{\"value\":4075,\"count\":1},{\"value\":4305,\"count\":1},{\"value\":4310,\"count\":1},{\"value\":4595,\"count\":1},{\"value\":4620,\"count\":1},{\"value\":5250,\"count\":1},{\"value\":5355,\"count\":1},{\"value\":6090,\"count\":1}],\"urlTemplate\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&price=<%- from %>-<%- to %>&q=ice+machine\",\"messageTemplates\":{\"displayCount\":\"<%- count %> products\",\"displayEmpty\":\"No products in the selected range.\"},\"rate\":1}
} }
<\/script>
<\/div>
<\/div>
<\/div>
<\/div>
<\/div>
These are then added to a block on my page via html jQuery method:
$(sidebarBlock).html(this.filters);
Looking at the DOM I cannot actually see the scripts however they are there in response when reviewing with console.log(). Similarly the below shows the scripts are present:
$(sidebar).find("script").each(function() {
console.log("found a script");
}
I have tried to use .trigger('contentUpdated'); like below:
document.getElementById("layered-filter-block").innerHTML = this.filters;
$(sidebarBlock).trigger('contentUpdated');
and:
$(sidebarBlock).html(this.filters);
$(sidebarBlock).trigger('contentUpdated');
and by reapplying bindings for knockout:
ko.cleanNode($('#layered-filter-block'));
ko.applyBindings($('#layered-filter-block'));
The above throws an error about bindings already being applied however but I have used cleanNode before to unbind however error persists.

This fixed issue for me:
$(sidebarBlock).applyBindings();
https://codeblog.experius.nl/magento-2-uicomponent-reinit-ajax-reload/

Laravel Notification markasread does no update the notification table

If I missed an easy part of whole thing forgive.
I am observing a strange behavior of Laravel Notifications between my local development and my server on Bluehost. On my PC it runs version 5.5 and Bluehost 5.4
I set the database notification and successfully can get them as expected.
<ul class="dropdown-menu list-unstyled msg_list" role="menu" onclick="markPostAsRead({{count(auth()->user()->unreadNotifications)}})">
<li>
#forelse (auth()->user()->unreadNotifications as $notification)
#include('layouts.notifications.'.snake_case(class_basename($notification->type)))
#empty
<strong>No notification</strong>
#endforelse
</li>
</ul>
Then when the user click it triggers a javascript to get the route to update the read_at column in my notification table in the database.
<script type="text/javascript" >
function markPostAsRead(countofNotification){
if(countofNotification !== '0')
$.get('/markasread');
}
</script>
Following is the route
Route::get('/markasread',function(){
auth()->user()->unreadNotifications->first()->markAsRead();
});
Everything went as expected on my local environment.
Once uploaded with all migrations in place, the notifications are shown as expected. However when the user clicks the notification the table does not update.
I checked that the js is working with some alerts on both server and local environment. But I do not understand why the table does not update on my server side.
If you could give me one hint it will really help me.
The notification html is a follows
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li role="presentation" class="dropdown" >
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-globe"></i>
<span class="badge bg-green">{{count(auth()->user()->unreadNotifications)}}</span>
</a>
<ul class="dropdown-menu list-unstyled msg_list" id="notification" role="menu" onclick="markPostAsRead({{count(auth()->user()->unreadNotifications)}})">
<li>
#forelse (auth()->user()->unreadNotifications as $notification)
#include('layouts.notifications.'.snake_case(class_basename($notification->type)))
#empty
<strong>No Unread Notification</strong>
#endforelse
</li>
</ul>
</li>.
</ul>
</nav>
</div>
</div>
<script type="text/javascript" >
var mynotificationcount;
function markPostAsRead(countofNotification){
mynotificationcount= countofNotification;
}
$('#notification').on('click', function(e){
e.preventDefault();
var href = this.href;
if(mynotificationcount !== '0') {
$.get('/markasread');
} else {
window.location.href = href;
}
});
</script>
Thanks,

The redirection of the page is faster than the Ajax request to update the table.
you should make the click event trigger the ajax.
<script type="text/javascript" >
$('#notification a').on('click', function(e){
if(countofNotification !== '0') {
$.get('/markasread');
}
});
</script>
if that doesnt work, you will need something more complicated like
<script type="text/javascript" >
$('#notification a').on('click', function(e){
e.preventDefault();
var href = this.href;
if(countofNotification !== '0') {
$.get('/markasread')->always(function(){window.location.href = href;});
} else {
window.location.href = href;
}
});
</script>

#N69S
Thank you very much.
I updated the java script a little bit to get around. I named the route and set as follows
<script type="text/javascript" >
var mynotificationcount;
function markPostAsRead(countofNotification){
mynotificationcount= countofNotification;
}
</script>
<script type="text/javascript" >
$('#notification a').on('click', function(e){
e.preventDefault();
var href = this.href;
var url = "{{route('markasread')}}";
if(mynotificationcount !== '0') {
$.get(url).always(function(){window.location.href = href;});
// window.location.href="{{ route('markasread') }}";
} else {
window.location.href = href;
}
});
</script>

Route [/createhotel] not defined. laravel 5.4

This is my index view page.
#extends('layouts.app')
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/hotel.css" rel="stylesheet" type="text/css"/>
</head>
<body>
#section('content')
<h2>Hotels</h2>
<div class="container-fluid sug-1">
<div class="ui_column is-12 h1 ui_header sug-1head">{{ $data[0]->city}}
</div>
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
#for ($i = 0; $i < 4; $i++)
<div class= "img__wrap">
<form method="get" action="/hotel/viewpost.blade.php">
<img class = "img__img" src={{asset($data[$i]->image)}} alt="Logo" style="width:90%;height:90%" >
<p class = "img__description"> {{$data[$i]->name}} <br> {{$data[$i]->rating}}<br> {{$data[$i]->price}}</p>
</form>
</div>
#endfor
<input class="sug1btn" type=Button id="allsugbtn" onclick="findHotels();" value="See all"/>
</div>
#endsection
</body>
</html>
This is controller for my index:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HotelController extends Controller
{
public function index()
{
$hotelData['data'] = \DB::table('hotels')->get();
if(count($hotelData) > 0)
{
return view("hotel.index",$hotelData);
}
else
{
return view("hotel.index");
}
}
}
I created a route from my index to viewpost i.e. following code:
#extends('layouts.app')
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/hotel.css" rel="stylesheet" type="text/css"/>
</head>
<body>
#section('content')
<div class="container-fluid sug-1">
<div class="ui_column is-12 h1 ui_header sug-1head">
</div>
<div style="display:flex; flex-direction: row; justify-content: left; align-items: left">
<div class="card">
<img src={{asset($data->image)}} alt="Image" style="width:100%">
<div class="container">
<h4><b>{{$data->name}}</b></h4>
<p>Rating: {{$data->rating}}<br>Price: {{$data->price}}</p>
</div>
</div>
<button href="{{ route('/createhotel') }}" type="button" class="btn btn-default">Left</button>
</div>
<h2>Reviews</h2>
#foreach ($reviews as $review)
<p>{{ $review->user_name }}<br>{{ $review->description }}</p>
<br><br><br>
#endforeach
#endsection
</body>
</html>
This is HotelPostController for my viewpost and createhotel:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HotelPostsController extends Controller
{
public function show($hotelviewid)
{
$imagedata['data'] = \DB::table('hotels')->select('id','image','name','city','rating','price' )->where('id', $hotelviewid)->first();
$reviewdata['reviews'] = \DB::table('hotel_reviews')->where('hotel_id', $hotelviewid)->get();
return view("hotel.viewpost",$imagedata,$reviewdata);
}
public function createhotel()
{
return view("hotel.createhotel");
}
}
This is web.php routes file:
Route::get('/', 'HotelController#index');
Route::get('/hotel', 'HotelController#index');
Route::get('/hotel/viewpost/{hotelviewid}', 'HotelPostsController#show');
Route::get('travelapp.me/hotel/viewpost/createhotel, 'HotelPostsController#createhotel');
The problem I am facing is that in views folder I have created a sub folder by name of hotel, it has 3 files index, viewpost and createhotel. the frst page is index and when a user clicks on some post it opens in viewpost. Now from there I want to create a button that goes to the third page i.e. creathotel. I have created a funtion in controller also added routes but it gives the error of undefined routes.

Change
Route::get('travelapp.me/hotel/viewpost/createhotel, 'HotelPostsController#createhotel');
to
Route::get('/hotel/viewpost/createhotel, 'HotelPostsController#createhotel');
And your button to go to create page:
Create Hotel
The method url() will give you the full URL automatically. You just need to create URL from root (/) and you dont have to attache full domain.
You can do like this (Just an example)
Route::get('/hotel-create, 'HotelPostsController#createhotel');
and button to go to that page
Create Hotel
Now in this example, When you click on Create Hotel link, this will gonna call the method createhotel() of HotelPostsController controller.
Update:
Problem
In your controller you are not passing any data to the view
public function createhotel()
{
return view("hotel.createhotel");
}
So how can you access the variable called $data on
<img src={{asset($data->image)}} alt="Image" style="width:100%">
Solution: (Pass your data to template)
public function createhotel()
{
$imagedata['data'] = \DB::table('hotels')->select('id','image','name','city','rating','price' )->where('id', $hotelviewid)->first();
$reviewdata['reviews'] = \DB::table('hotel_reviews')->where('hotel_id', $hotelviewid)->get();
return view("hotel.createhotel",$imagedata,$reviewdata);
}

The route() helper method accepts the name as the parameter, not the actual route.
route('create') is what you want. To use the url, url('/hotel/create').

Route::get('/hotel/create', 'HotelReviewController#create')->name('create');
change it to
Route::get('/hotel/create', 'HotelReviewController#create')->name('createhotel');
it will work i hope. you are using named route read here about routing.
https://laravel.com/docs/5.6/routing#named-routes

in your index action value filled by a view blade page and it seems wrong
<form method="get" action="/hotel/viewpost.blade.php">
and in viewpost you need to change {{ route("/create") }} to {!! route("create")!!}

Kendo mobile view parameters

I have a a basic kendo view and am wondering if there is a way to access the view.params without using the data-show or data-init to run a js OR if i do use the current functon call on data-show how can i dynamically populate the data elements of my EDIT button?
<!-- eventDetail view -------------------------------------------------------------------------------------------------->
<div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="left" data-role="button" class="nav-button" href="#view-myEvents">Back</a>
<a data-align="right" data-role="button" class="nav-button" data-click="showEventUpdate" data-event_id="view.params.event_id" data-user_id="view.params.user_id">Edit</a>
</div>
</header>
<div id="eventDetail"></div>
</div>

The best method i have found so far (access view parameters in view) is to use the Kendo ViewModel method - MVVM - and the template - pulling in the view.params from a querystring click:
<a data-role="button" href="#view-Home?userID=2&userType=1&trainerID=2">
Then call a script via the data-show or data-init method of the view and bind the viewModel:
<!-- =========================================================================================== Home page -->
<div data-role="view" id="view-Home" data-title="Home" data-show="checkAuth" data-model="home_viewModel" >
<div id="homeWrapper">
<div id="myTrainerInfo" data-template="myTrainerIcon-template" data-bind="source: user_info" ></div>
</div>
<!-- ========================================================================================= Home script -->
<script>
//init the viewmodel
var home_viewModel = kendo.observable({
user_info: []
});
function checkAuth(e) {
var userID = e.view.params.userID;
var userType = e.view.params.userType;
var trainerID = e.view.params.trainerID;
var userData = {userID:userID,userType:userType,trainerID:trainerID};
//set the viewmodel data
home_viewModel.set("user_info", userData);
}
</script>
The vars can then be accessed via ${var_name} or via HTML data-bind="value: var_name":
<!-- ============================================================================== myTrainerIcon template -->
<script id="myTrainerIcon-template" type="text/x-kendo-template">
<div id="myTrainerIcon" class="homePageIcons">
<a data-role="button" href="\\#view-trainerDetail?user_id=${userID}&trainer_id=${trainerID}">
<img src = "styles/icons/myTrainerICON.png" alt="myTrainer" />
</a>
<div class = "icon-text" >myTrainer</div>
</div>
<div>TrainerID: <input name="edit_id" id="edit_id" data-min="true" class="k-input" data-bind="value: trainerID" type="text" /></div>
</script>
Im sure there is a different way to do this but so far nothing i have discovered on my own..

Resources