AngularJS two templates routing trouble

AngularJS two templates routing trouble - javascript

I am creating Angular app and I need two templates(one for working with workout and one for working with diet) so I created workout.html and diet.html and I want to change page content in ng-view but now it isn't work(I get blank content).
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>WorkoutExport</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/style.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body ng-controller="workoutController">
<div class= "container">
<div class="col-sm-10 col-sm-offset-1 appContent">
Workout
Diet
<div id="main">
<div ng-view></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
script.js
var app = angular.module("app", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/workout.html',
controller : 'workoutController'
})
.when('/diet', {
templateUrl : 'pages/diet.html',
controller : 'dietController'
})
});
app.controller('workoutController', function($scope) {
$scope.records = [
{workout: "", series:"", reps: "", day: ""}
];
// add record
$scope.add = function() {
$scope.records.push( {workout: $scope.inputExercise,series: $scope.inputSeries, reps:$scope.inputReps, day:$scope.inputDay});
$scope.inputExercise="";
$scope.inputSeries="";
$scope.inputReps="";
$scope.inputDay="";
};
// delete record
$scope.remove = function(index) {
$scope.records.splice(index, 1);
};
//export as PDF
$scope.export = function(){
html2canvas(document.getElementById('exportpdf'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("workoutPlan.pdf");
}
});
}
$scope.MondayFilter = function (item) {
return item.day === 'Monday' ;
};
$scope.TuesdayFilter = function (item) {
return item.day === 'Tuesday' ;
};
$scope.WednesdayFilter = function (item) {
return item.day === 'Wednesday' ;
};
$scope.ThursdayFilter = function (item) {
return item.day === 'Thursday' ;
};
$scope.FridayFilter = function (item) {
return item.day === 'Friday' ;
};
$scope.SaturdayFilter = function (item) {
return item.day === 'Saturday' ;
};
$scope.SundayFilter = function (item) {
return item.day === 'Sunday' ;
};
});
app.controller('dietController', function($scope) {
$scope.message =' Diet';
};
pages/workout.html
<h1>WorkoutExport</h1>
<p>Tool for creating workout plans build with AngularJS</p>
<h2>Add exercise</h2>
<div>
<input type="text" ng-model="inputExercise" placeholder="Enter the exercise">
<input type="text" ng-model="inputSeries" placeholder="Enter the number of series">
<input type="text" ng-model="inputReps" placeholder="Enter the range of repetition">
<select ng-model="inputDay">
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
<button class="btn btn-default" type="submit" ng-click="add()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</div>
<div id="exportpdf">
<h2>Your training plan</h1>
<ul>
<h3>Monday</h3>
<li ng-repeat="record in records | filter:MondayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps}}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Tuesday</h3>
<li ng-repeat="record in records | filter:TuesdayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Wednesday</h3>
<li ng-repeat="record in records | filter:WednesdayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Thursday</h3>
<li ng-repeat="record in records | filter:ThursdayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Friday</h3>
<li ng-repeat="record in records | filter:FridayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Saturday</h3>
<li ng-repeat="record in records | filter:SaturdayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
<ul>
<h3>Sunday</h3>
<li ng-repeat="record in records | filter:SundayFilter">
{{"Exercise: " + " " + record.workout + " " + "Number of series:" + " " + record.series + " " + "Number of reps:" + " " + record.reps }}
<button class="btn btn-default" ng-click="remove($index)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</li>
</ul>
</div>
<button class="btn btn-default exportBtn" ng-click="export()">export to PDF</button>
pages/diet.html
<h1>DietPage</h1>
{{message}}
Do you see some wrong code? I appreciate any help.

Your Diet Controller is missing a bracket:
app.controller('dietController', function($scope) {
$scope.message =' Diet';
});
You are also not loading in the ngRoute Library (https://docs.angularjs.org/api/ngRoute)
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js" type="text/javascript"></script>
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>WorkoutExport</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/style.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body ng-controller="workoutController">
<div class= "container">
<div class="col-sm-10 col-sm-offset-1 appContent">
Workout
Diet
<div id="main">
<div ng-view></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Making these two changes, and it works for me now.

to change route in Single Page Application (SPA) in AngularJS you dont use just
Diet
I would change the index.html so it would contain another controller for the navigation with a banner and not assign the workoutController there.
more, for changing route in angular you need to inject ngRoute in you app creation:
var app = angular.module("app", ['ngRoute']);
and use it in a function like this:
app.controller('workoutController', function($scope, $location) {
$scope.navigate = function(pageToNavigate) {
$location.path(pageToNavigate);
}
});
you can build navigation that will activate with ng-click and wil invoke $location.path

Related

Deleting html elements if data is not exist when looping with for

I have javascript code like this, i am rendering some html with looping json data through it. But some json values are empty o i don't want to render html elements for thoose empty values how can i do that ?
const setSampleThirdWidget = () => {
getData(20,30).then((data) => {
console.log(data);
const thirdWidget = document.querySelector("#third-slider > .splide__track");
const list = thirdWidget.querySelector(".splide__list")
for (var i=0; i<10; i++){
list.innerHTML += "<div class=\"splide__slide\">\n" +
" <div class=\"item\">\n" +
" <div class=\"item-image-container\">\n" +
" <img src="+data[i].image+" alt=\"\">\n" +
" <i class=\"icon-discount\"></i>\n" +
" <i class=\"icon-new\">"+data[i].params.land.substring(1, 4)+"</i>\n" +
" <i class=\"icon-fav\">"+data[i].params.likeCount+"</i>\n" +
" </div>\n" +
" <span class=\"item-title\">"+data[i].name+"</span>\n" +
" <span class=\"item-categories\">"+data[i].params.rebsorte+"</span>\n" +
" <div class=\"item-text-container\">\n" +
" <span class=\"item-price\">"+data[i].priceText+"</span>\n" +
" <span class=\"item-oldprice\">"+data[i].oldPriceText+"</span>\n" +
" <span class=\"item-detail\">"+data[i].params.basePrice+"</span>\n" +
" </div>\n" +
" </div>\n" +
" </div>"
}
})
}

You're better off doing that with Template literals, i have made it for you:
`
<div class="splide__slide">
<div class="item">
<div class="item-image-container">
<img src=${data[i].image} alt="">
<i class="icon-discount"></i>
<i class="icon-new"> ${data[i].params.land.substring(1, 4)} </i>
<i class="icon-fav"> ${data[i].params.likeCount} </i>
</div>
<span class="item-title"> ${data[i].name} </span>
<span class="item-categories"> ${data[i].params.rebsorte} </span>
<div class="item-text-container">
<span class="item-price"> ${data[i].priceText} </span>
<span class="item-oldprice"> ${data[i].oldPriceText} </span>
<span class="item-detail"> ${data[i].params.basePrice} </span>
</div>
</div>
</div>
`
Then you can use the the nesting templates features to put conditionals, i've made a conditials for you aswell, but you'll have to change according to what you want
`
<div class="splide__slide">
<div class="item">
<div class="item-image-container">
${ data[i].image == null ? '' : `<img src=${data[i].image} alt="">`}
<i class="icon-discount"></i>
${ data[i].params.land == null ? '' : `<i class="icon-new"> ${data[i].params.land.substring(1, 4)} </i>`}
${ data[i].params.likeCount == null ? '' : `<i class="icon-fav"> ${data[i].params.likeCount} </i>`}
</div>
${ data[i].name == null ? '' : `<span class="item-title"> ${data[i].name} </span>` }
${ data[i].params.rebsorte == null ? '' : `<span class="item-categories"> ${data[i].params.rebsorte} </span>` }
<div class="item-text-container">
${ data[i].priceText == null ? '' : `<span class="item-price"> ${data[i].priceText} </span>` }
${ data[i].oldPriceText == null ? '' : `<span class="item-oldprice"> ${data[i].oldPriceText} </span>` }
${ data[i].basePrice == null ? '' : `<span class="item-detail"> ${data[i].params.basePrice} </span> ` }
</div>
</div>
</div>
`

jquery.min.js:2 Uncaught TypeError: Cannot read property 'replace' of undefined (javascript)(laravel)

I'm trying to import a drag and drop editor using this library
But I get these errors
jquery.min.js:2 Uncaught TypeError: Cannot read property 'replace' of undefined
at initModalSource (examples.js:96)
at HTMLDocument.<anonymous> (examples.js:3)
at e (jquery.min.js:2)
at t (jquery.min.js:2)
initModalSource # examples.js:96
(anonymous) # examples.js:3
e # jquery.min.js:2
t # jquery.min.js:2
setTimeout (async)
S.readyException # jquery.min.js:2
(anonymous) # jquery.min.js:2
e # jquery.min.js:2
t # jquery.min.js:2
setTimeout (async)
(anonymous) # jquery.min.js:2
c # jquery.min.js:2
fireWith # jquery.min.js:2
fire # jquery.min.js:2
c # jquery.min.js:2
fireWith # jquery.min.js:2
t # jquery.min.js:2
setTimeout (async)
(anonymous) # jquery.min.js:2
c # jquery.min.js:2
fireWith # jquery.min.js:2
fire # jquery.min.js:2
c # jquery.min.js:2
fireWith # jquery.min.js:2
ready # jquery.min.js:2
B # jquery.min.js:2
this is the code of examples.js
(function ($) {
$(function () {
initModalSource();
initModalContent();
initToolbar();
});
function initToolbar() {
var toolbar = $('<div class="toolbar"></div>');
var btnViewSource = $('<button type="button" class="view-source"><i class="fa fa-code"></i> View source</button>');
var btnViewContent = $('<button type="button" class="view-content"><i class="fa fa-file-text-o"></i> Get content</button>');
var btnBackToList = $('<i class="fa fa-list"></i> Examples list');
toolbar.appendTo(document.body);
toolbar.append(btnViewSource);
toolbar.append(btnViewContent);
toolbar.append(btnBackToList);
btnViewSource.on('click', function () {
$('#modal-source').modal('show');
});
btnViewContent.on('click', function () {
var modal = $('#modal-content');
modal.find('.content-html').html(
beautifyHtml(
$('#content-area').keditor('getContent')
)
);
modal.modal('show');
});
}
function initModalContent() {
var modal = $(
'<div id="modal-content" class="modal fade" tabindex="-1">' +
' <div class="modal-dialog modal-lg">' +
' <div class="modal-content">' +
' <div class="modal-header">' +
' <button type="button" class="close" data-dismiss="modal">×</button>' +
' <h4 class="modal-title">Content</h4>' +
' </div>' +
' <div class="modal-body">' +
' <pre class="prettyprint lang-html content-html"></pre>' +
' </div>' +
' <div class="modal-footer">' +
' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
' </div>' +
' </div>' +
' </div>' +
'</div>'
);
modal.appendTo(document.body);
}
function initModalSource() {
var modal = $(
'<div id="modal-source" class="modal fade" tabindex="-1">' +
' <div class="modal-dialog modal-lg">' +
' <div class="modal-content">' +
' <div class="modal-header">' +
' <button type="button" class="close" data-dismiss="modal">×</button>' +
' <h4 class="modal-title">Source</h4>' +
' </div>' +
' <div class="modal-body">' +
' <ul class="nav nav-tabs">' +
' <li class="active"><i class="fa fa-html5"></i> HTML</li>' +
' <li ><i class="fa fa-code"></i> JavaScript</li>' +
' </ul>' +
' <div class="tab-content">' +
' <div class="tab-pane active" id="source-html">' +
' <pre class="prettyprint lang-html source-html"></pre>' +
' </div>' +
' <div class="tab-pane" id="source-js">' +
' <pre class="prettyprint lang-js source-js"></pre>' +
' </div>' +
' </div>' +
' </div>' +
' <div class="modal-footer">' +
' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
' </div>' +
' </div>' +
' </div>' +
'</div>'
);
var htmlCode = $('[data-keditor="html"]').html();
var htmlInclude = $('<div />').html($('[data-keditor="html-include"]').clone()).html();
htmlInclude = htmlInclude.replace('data-keditor="html-include"', '');
htmlInclude = htmlInclude.replace(/\</g, '<').replace(/\>/g, '>');
modal.find('.source-html').html(beautifyHtml(htmlCode + htmlInclude));
var jsCode = $('[data-keditor="script"]').html();
jsCode = jsCode.replace(/\</g, '<').replace(/\>/g, '>');
modal.find('.source-js').html(beautifyJs(jsCode));
modal.appendTo(document.body);
}
function beautifyHtml(htmlCode) {
htmlCode = html_beautify(htmlCode, {
'indent_size': '4',
'indent_char': ' ',
'space_after_anon_function': true,
'end_with_newline': true
});
htmlCode = htmlCode.replace(/</g, '<').replace(/>/g, '>');
return PR.prettyPrintOne(htmlCode, 'lang-html');
}
function beautifyJs(jsCode) {
jsCode = js_beautify(jsCode, {
'indent_size': '4',
'indent_char': ' ',
'space_after_anon_function': true,
'end_with_newline': true
});
return PR.prettyPrintOne(jsCode, 'lang-js');
}
})(jQuery);
On my view, I just have this
<div id="content-area"></div>
<script>
$(function () {
$('#content-area').keditor();
});
</script>
I'm using
css:
font-awesome
editor
keditor-components
prettify
keditor-examples
javascript:
jquery min 3.5.1
jquery UI 1.12.1
ckeditor
formBuilder 2.5.3 min
fromRender 2.5.3 min
keditor
keditor-components
prettify
beautify
beauutify-html
examples
This is the final result
The problem is that the button "+" is missing
This is a functional example
How can I solve this? Thanks :)

You forgot to add data-keditor="script" on your script element which makes your code fail. You also need to add data-type="keditor-style" on the link rel="stylesheet" elements.
Here is your code with the right attributes on the right elements.
For some reason it doesn't work here but you can try it in JSFiddle
(function ($) {
// Mocked functions because not provided in the question
const noop = str => str;
const html_beautify = noop;
const js_beautify = noop;
const PR = {
prettyPrintOne: noop
}
$(function () {
initModalSource();
initModalContent();
initToolbar();
});
function initToolbar() {
var toolbar = $('<div class="toolbar"></div>');
var btnViewSource = $('<button type="button" class="view-source"><i class="fa fa-code"></i> View source</button>');
var btnViewContent = $('<button type="button" class="view-content"><i class="fa fa-file-text-o"></i> Get content</button>');
var btnBackToList = $('<i class="fa fa-list"></i> Examples list');
toolbar.appendTo(document.body);
toolbar.append(btnViewSource);
toolbar.append(btnViewContent);
toolbar.append(btnBackToList);
btnViewSource.on('click', function () {
$('#modal-source').modal('show');
});
btnViewContent.on('click', function () {
var modal = $('#modal-content');
modal.find('.content-html').html(
beautifyHtml(
$('#content-area').keditor('getContent')
)
);
modal.modal('show');
});
}
function initModalContent() {
var modal = $(
'<div id="modal-content" class="modal fade" tabindex="-1">' +
' <div class="modal-dialog modal-lg">' +
' <div class="modal-content">' +
' <div class="modal-header">' +
' <button type="button" class="close" data-dismiss="modal">×</button>' +
' <h4 class="modal-title">Content</h4>' +
' </div>' +
' <div class="modal-body">' +
' <pre class="prettyprint lang-html content-html"></pre>' +
' </div>' +
' <div class="modal-footer">' +
' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
' </div>' +
' </div>' +
' </div>' +
'</div>'
);
modal.appendTo(document.body);
}
function initModalSource() {
var modal = $(
'<div id="modal-source" class="modal fade" tabindex="-1">' +
' <div class="modal-dialog modal-lg">' +
' <div class="modal-content">' +
' <div class="modal-header">' +
' <button type="button" class="close" data-dismiss="modal">×</button>' +
' <h4 class="modal-title">Source</h4>' +
' </div>' +
' <div class="modal-body">' +
' <ul class="nav nav-tabs">' +
' <li class="active"><i class="fa fa-html5"></i> HTML</li>' +
' <li ><i class="fa fa-code"></i> JavaScript</li>' +
' </ul>' +
' <div class="tab-content">' +
' <div class="tab-pane active" id="source-html">' +
' <pre class="prettyprint lang-html source-html"></pre>' +
' </div>' +
' <div class="tab-pane" id="source-js">' +
' <pre class="prettyprint lang-js source-js"></pre>' +
' </div>' +
' </div>' +
' </div>' +
' <div class="modal-footer">' +
' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
' </div>' +
' </div>' +
' </div>' +
'</div>'
);
var htmlCode = $('[data-keditor="html"]').html();
var htmlInclude = $('<div />').html($('[data-keditor="html-include"]').clone()).html();
htmlInclude = htmlInclude.replace('data-keditor="html-include"', '');
htmlInclude = htmlInclude.replace(/\</g, '<').replace(/\>/g, '>');
modal.find('.source-html').html(beautifyHtml(htmlCode + htmlInclude));
var jsCode = $('[data-keditor="script"]').html();
jsCode = jsCode.replace(/\</g, '<').replace(/\>/g, '>');
modal.find('.source-js').html(beautifyJs(jsCode));
modal.appendTo(document.body);
}
function beautifyHtml(htmlCode) {
htmlCode = html_beautify(htmlCode, {
'indent_size': '4',
'indent_char': ' ',
'space_after_anon_function': true,
'end_with_newline': true
});
htmlCode = htmlCode.replace(/</g, '<').replace(/>/g, '>');
return PR.prettyPrintOne(htmlCode, 'lang-html');
}
function beautifyJs(jsCode) {
jsCode = js_beautify(jsCode, {
'indent_size': '4',
'indent_char': ' ',
'space_after_anon_function': true,
'end_with_newline': true
});
return PR.prettyPrintOne(jsCode, 'lang-js');
}
})(jQuery);
<link href="https://cdn.jsdelivr.net/npm/#kademi/keditor#2.0.1/dist/css/keditor.css" rel="stylesheet" data-type="keditor-style"/>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" data-type="keditor-style">
<div id="content-area"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#kademi/keditor#2.0.1/dist/js/keditor.js"></script>
<script type="text/javascript" data-keditor="script">
$(function () {
$('#content-area').keditor();
});
</script>

JQuery foreach Loop +adding stuff

I´m trying to add a button which sends me to another HTML File inside the for each LOOP but my problem is once i add something new into the loop it doesn´t display any of the products anymore // "customize product"+ is the code that i´m trying to add but somehow it doesn´t work
This is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Produkte</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Honig GmbH</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<h1 class="my-4">Produkte
<small>Übersicht</small>
</h1>
<a class="btn btn-primary" href="product_create.html">Neues Produkt anlegen</a>
<br/>
<!-- Content -->
<div id="ArtikelContainer" class="row">
</div>
<!-- /.container -->
<br/>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Honig GmbH 2018</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="javascript/jquery/jquery.min.js"></script>
<script src="css/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
$( document ).ready(function() {});
console.log("Ready");
// var currentId = sessionStorage.getItem('customerId');
$.ajax({
type: "GET",
url: "http://localhost:8081/api/artikel/",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result){
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item){
console.log(result[i].beschreibung);
console.log(result[i].name);
$("#ArtikelContainer").append(
"<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>"+
"<div class='card h-100'>"+
"<a href='#'><img class='card-img-top' src='"+result[i].bildpfad+"' height='200' width='140'></a>"+
"<div class='card-body'>"+
" <h4 class='card-title'>"+
"<a href='#'>"+result[i].name+"</a>"+
"</h4>"+
"<p id=artikel"+ result[i].artikelId + " class='card-text'>Artikelnummer: "+result[i].artikelId+"</p>"+
"<p class='card-text'> Beschreibung: "+result[i].beschreibung+"</p>"+
"</div>"+
// I´m trying to add this part into the loop "<a class="btn btn-primary" href="product_create.html">customize product</a>"+
" </div>"+
"</div>"
);
});
},complete: function(xhr, statusText){
//alert(xhr.status);
console.log(xhr.status + ": " + "Home - Completed!");
},error: function(xhr, errMsg) {
if(xhr.status==401){
alert(xhr.status + ": " + "Benutzername oder Passwort ist ungültig");
}
}
});
function btn_click() {
artikelId: $('#artikelId').val();
// var artikelnummer = sessionStorage.setItem("artikelId");
document.location = index.html;
alert(artikelnummer);
}
function url(){
document.location = 'http://somewhere.com/';
}
</script>
</body>
so everytime I add anything into the loop all my products disappear
I´m gladful for any help and any help is appreciated, I have been stuck a while on this now

As was mentioned, you can only use certain quotes inside of quotes. For example, if you define a String with double quotes ("), then inside, you must use single quotes (') and vice-versa.
Take a look:
$(function() {
console.log("Ready");
var result = [{
beschreibung: "Text 1",
name: "Name 1",
bildpfad: "Source 1",
artikelId: 1
}, {
beschreibung: "Text 2",
name: "Name 2",
bildpfad: "Source 2",
artikelId: 2
}, {
beschreibung: "Text 3",
name: "Name 3",
bildpfad: "Source 3",
artikelId: 3
}];
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item) {
var content = "";
content += "<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>";
content += "<div class='card h-100'>";
content += "<a href='#'><img class='card-img-top' src='" + result[i].bildpfad + "' height='200' width='140'></a>";
content += "<div class='card-body'>";
content += "<h4 class='card-title'><a href='#'>" + item.name + "</a></h4>";
content += "<p id='artikel" + item.artikelId + "' class='card-text'>Artikelnummer: " + item.artikelId + "</p>";
content += "<p class='card-text'> Beschreibung: " + item.beschreibung + "</p></div>";
content += "<a class='btn btn-primary' href='product_create.html'>customize product</a>";
content += "</div></div>";
$("#ArtikelContainer").append(content);
});
/*
var currentId = sessionStorage.getItem('customerId');
$.ajax({
type: "GET",
url: "http://localhost:8081/api/artikel/",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item) {
console.log(result[i].beschreibung);
console.log(result[i].name);
$("#ArtikelContainer").append(
"<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>" +
"<div class='card h-100'>" +
"<a href='#'><img class='card-img-top' src='" + result[i].bildpfad + "' height='200' width='140'></a>" +
"<div class='card-body'>" +
" <h4 class='card-title'>" +
"<a href='#'>" + result[i].name + "</a>" +
"</h4>" +
"<p id=artikel" + result[i].artikelId + " class='card-text'>Artikelnummer: " + result[i].artikelId + "</p>" +
"<p class='card-text'> Beschreibung: " + result[i].beschreibung + "</p>" +
"</div>" +
// I´m trying to add this part into the loop "<a class="btn btn-primary" href="product_create.html">customize product</a>"+
" </div>" +
"</div>"
);
});
},
complete: function(xhr, statusText) {
//alert(xhr.status);
console.log(xhr.status + ": " + "Home - Completed!");
},
error: function(xhr, errMsg) {
if (xhr.status == 401) {
alert(xhr.status + ": " + "Benutzername oder Passwort ist ungültig");
}
}
});
*/
function btn_click() {
artikelId: $('#artikelId').val();
// var artikelnummer = sessionStorage.setItem("artikelId");
document.location = index.html;
alert(artikelnummer);
}
function url() {
document.location = 'http://somewhere.com/';
}
});
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Honig GmbH</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<h1 class="my-4">Produkte
<small>Übersicht</small>
</h1>
<a class="btn btn-primary" href="product_create.html">Neues Produkt anlegen</a>
<br/>
<!-- Content -->
<div id="ArtikelContainer" class="row">
</div>
<!-- /.container -->
<br/>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Honig GmbH 2018</p>
</div>
<!-- /.container -->
</footer>
Hope that helps.

Event firing twice in kendo collapsible

I have an app the uses the Progress JSDO to load data and, using the foreach method of the jsdo, append the data to three different lists in kendo collapsible panels depending on the status of one of the fields. For some reason, the lists are being appended twice in the code and I can't figure out why. I would appreciate another set of eyes on my code to help me get to the bottom of this mystery.
Here is the controller for the view (this is all wrapped in an IIFE with some other code, but this is the relevant section.):
app.scanBarcode = {
viewModel: new ScanViewModel(),
onShow: function () {
app.JSDOSession.addCatalog(app.JSDOSettings.catalogURIs);
app.locJSDO.fill();
$("#list-button").unbind().click(function () {
app.goToScanFail();
});
app.scanBarcode.getCurrentReport();
},
onHide: function () {
var reportJSDO = app.reportJSDO,
writeOutReport = app.scanBarcode.writeOutReport;
reportJSDO.unsubscribe('afterFill', writeOutReport);
},
getCurrentReport: function () {
var reportJSDO = app.reportJSDO,
writeOutReport = app.scanBarcode.writeOutReport;
//Fill the JSDO from db and call function to display the data
reportJSDO.subscribe('afterFill', writeOutReport);
reportJSDO.fill();
},
writeOutReport: function (jsdo, success, request) {
var date = app.getDate();
jsdo.foreach(function (report) {
var reportDate = report.data.STAMP_DT,
completed = "<span class='glyphicon glyphicon-ok'></span>",
notCompleted = "",
span;
if (reportDate == date) {
if (report.data.STAMP_TM == null) {
span = notCompleted;
$("#uncompleted-list").append(
"<li class='list-group-item'>" +
span + " " +
report.data.LOCATION_ID +
' ' +
report.data.LOCATION_NAME +
"</li>"
);
} else {
span = completed;
$("#completed-list").append(
"<li class='list-group-item'>" +
span + " " +
report.data.LOCATION_ID +
' ' +
report.data.LOCATION_NAME +
"</li>"
);
}
$("#all-list").append(
"<li class='list-group-item'>" +
span + " " +
report.data.LOCATION_ID +
' ' +
report.data.LOCATION_NAME +
"</li>"
);
}
});
}
}
This is the html for my view:
<div data-role="view" data-title="Scan Location" data-reload="true" data-layout="views-layout" data-model="app.scanBarcode.viewModel" data-show="app.scanBarcode.onShow" data-hide="app.scanBarcode.onHide">
<div class="col-xs-12 col-md-6 col-md-offset-3">
<h3 class="hassubtitle">Begin Scan:</h3>
<button class="btn btn-xlg btn-primary btn-block" data-bind="click: scan">Scan</button>
<button id="list-button" class="btn btn-lg btn-default btn-block">Skip</button>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div data-role="collapsible" id="completed-collapsible">
<h2>
Completed
</h2>
<div data-role="scroller" id="completed-list"></div>
</div>
<div data-role="collapsible" id="uncompleted-collapsible">
<h2>
Uncompleted
</h2>
<div data-role="scroller" id="uncompleted-list"></div>
</div>
<div data-role="collapsible" id="all-collapsible">
<h2>
All
</h2>
<div data-role="scroller" id="all-list"></div>
</div>
</div>
I'm the only web developer at my work and I have no one to ask here, so I really appreciate you all!

Empty screen in material design app in JS

I am generating a list dynamically. Here is the html for the static version of the app
<div class="list-group">
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="http://qph.is.quoracdn.net/main-thumb-4972069-200-pfgvuffbxtqsqdduzxzvszms.jpeg" alt="icon">
</div>
<div class="row-content">
<h4 class="list-group-item-heading">bla</h4>
<p class="list-group-item-text">bla</p>
</div>
</div>
<div class="list-group-separator"></div>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="http://lorempixel.com/56/56/people/6" alt="icon">
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Tile with another avatar</h4>
<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
<div class="list-group-separator"></div>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="http://lorempixel.com/56/56/people/6" alt="icon">
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Tile with another avatar</h4>
<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
</div>
The above one works absolutely fine. But the problem is arising when I try to generate the list dynamically
Here is my code for index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/material.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div class="list-group-item">
<div class="app">
</div>
</div>
</body>
</html>
Here is my app.js
var names = ["one", "two", "thre", "four"];
var phones = ["90000 00000", "911111 000000", "90000 11111", "80000 80808"];
for(var i=0;i<5;i++){
add(names[i], phones[i]);
}
function add(name, phone){
var listItem = '<div class="row-picture">' +
'<img class="circle" src="http://"bla">' +
'</div>' +
'<div class="row-content">' +
'<h4 class="list-group-item-heading">' + name + '</h4>' +
'<p class="list-group-item-text">' + phone + '</p>' +
'</div>' +
'</div>' +
'<div class="list-group-separator"></div>'; // Use ; here instead of +
$('.app').prepend(listItem);
}
Sad part is there is no console error. And jquery is loading $('.app').append("hi") is appending fine. And when watched the debugger the for loop executes properly, with the values getting changed. Debugger has shown that append is also getting executed. Where am I going wrong?

Check this! Its working
var names = ["one", "two", "thre", "four"];
var phones = ["90000 00000", "911111 000000", "90000 11111", "80000 80808"];
for(var i=0;i<phones.length;i++){
add(names[i], phones[i]);
}
function add(name, phone){
var listItem = '<div class="row-picture">' +
'<img class="circle" src="http://"bla">' +
'</div>' +
'<div class="row-content">' +
'<h4 class="list-group-item-heading">' + name + '</h4>' +
'<p class="list-group-item-text">' + phone + '</p>' +
'</div>' +
'</div>' +
'<div class="list-group-separator"></div>'; // Use ; here instead of +
$('.app').prepend(listItem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item">
<div class="app">
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

AngularJS two templates routing trouble - javascript

Related

Deleting html elements if data is not exist when looping with for

jquery.min.js:2 Uncaught TypeError: Cannot read property 'replace' of undefined (javascript)(laravel)

JQuery foreach Loop +adding stuff

Event firing twice in kendo collapsible

Empty screen in material design app in JS

Categories

Resources