We Keep Coding

How can show and hide a <li> inside the panel?

I have an app that has a login page. In order to login the user has the permission to see two voice inside the panel (if user is admin). If user is not admin I’d like to not display this voices. My problem is how to hide and show its. I have the panel inside index.html.This are the voice that I'd like to display or not in order users permission.
<li id="company" display="none">
<a href="/aziende/" class="panel-close" >
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">home</i>
<i class="material-icons md-only">home</i>
</div>
<div class="item-inner">
<div class="item-title">Company</div>
</div>
</div>
</a>
</li>
<li id="users" display="none">
<a href="/users/" class="panel-close">
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">person</i>
<i class="material-icons md-only">account_circle</i>
</div>
<div class="item-inner">
<div class="item-title">Users</div>
</div>
</div>
</a>
</li>
this is app.js
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageInit: function(){
app.navbar.hide('.navbar');
if(user.checkPermission() == 'true'){
app.router.navigate('/home/');
}
}
},
},
{
name: 'home',
path: '/home/',
url: './pages/home.html',
on: {
pageInit: function(e, page) {
app.navbar.show('.navbar');
if(user.checkPermission() == 'true'){
addVoicesToNavbar();
}
}
page.router.clearPreviousHistory();
}
},
}
this method said me that Cannot set property ‘display’ of null
function addVoicesToNavbar(){
document.getElementById("company").display = "block";
document.getElementById("users").display = "block";
}

display is not a valid html attribute, it is a CSS property.
So setting display="none" on your <li> in the example doesn't do anything.
Instead in your markup you need to set an inline CSS style like this to initially hide the element:
<li id="users" style="display:none;">
And in your function change that inline CSS style like this to show it:
document.getElementById("users").style.display = "block";

Here is an example of what you could do:
function addVoicesToNavbar(){
companyElement = document.getElementById("company");
companyElement.style.display = "block";
...
}
Hope it helps!

Output data and messages directly in the view

I am currently working on ajax, jquery and javascript. I have slight problems with it.
I can use this code to send the data and they are stored in the database.
But the data will not be displayed directly after sending in the view, until I have reloaded the page.
How can I output the data directly in the view without reloading the page?
How can I output errors and success messages as flashmessage (toastr) message?
how can I rewrite this code that works? I get the error message that it is a duplicate of the selectors.
$('#todolist-create-modal').modal('hide');
$('#todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
return event.keyCode != 13;
});
Code
<script type="application/javascript">
$(document).ready(function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$('#add-todo-list').click(function(e) {
e.preventDefault();
var _token = $("input[name='_token']").val(); // get csrf field.
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
var privacy = $("select[name='privacy']").val();
var listid = $("select[name='privcy']").val();
$.ajax({
url:'{{ route('todolists.store') }}',
type: 'POST',
data: {_token:_token, title:title, description:description, privacy:privacy},
success: function (data) {
console.log(data);
if (privacy = 0) {
//go to the left side
} else {
//go to the right side
}
},
error: function(data){
console.log(data);
}
});
$('#todolist-create-modal').modal('hide');
$('#todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
return event.keyCode != 13;
});
});
});
</script>
view
<div id="content" class="dashboard padding-10">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<a data-toggle="modal" data-target=".todolist-create-modal" class="btn btn-success btn-block btn-sm margin-bottom-10">Neue Liste erstellen</a>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Öffentliche Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistpublic->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistpublic as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden">
<i class="fa fa-plus"></i> Erstellen
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-info btn-xs white hover-hidden">
<i class="fa fa-edit"></i> Bearbeiten
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-delete-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-danger btn-xs white hover-hidden">
<i class="fa fa-times"></i> Löschen
</a>
</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-public">{{ $todolistpublic->count() }}</span> <span>{{ $todolistpublic->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Private Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistprivate->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistprivate as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden"><i class="fa fa-plus"></i> Erstellen</a></li>
<li><a data-toggle="modal" data-target=".todolist-modal" class="btn btn-info btn-xs white hover-hidden"><i class="fa fa-edit"></i> Bearbeiten</a></li>
<li><i class="fa fa-times"></i> Löschen</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-private">{{ $todolistprivate->count() }}</span> <span>{{ $todolistprivate->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
#include('elements.addTodoList')
#include('elements.createTodoList')
#include('elements.addTask')
</div>
</div>
Controller
public function store(Request $request)
{
$validator = Validator::make($request->all(), [
'title' => 'required|min:5',
'description' => 'required|min:10',
'privacy' => 'required|integer'
]);
$attributeNames = array(
'title' => 'Title',
'description' => 'Description',
);
$validator->setAttributeNames($attributeNames);
//Redirect back if validation fails
if($validator->fails()) {
return response()->json(['error'=>$validator->errors()->all()]);
}
else{
$todolists = new Todolists();
$todolists->admin_id = Auth::id();
$todolists->title = $request->title;
$todolists->description = $request->description;
$todolists->privacy = $request->privacy;
$todolists->save();
return response()->json(['Your enquiry has been successfully submitted!']);
}
}
EDIT
I have revised and adapted the code. Currently I have two more problems:
The flashmessage is only output as 'empty'. Without text content. Where is the problem?
The div is also reloaded. But after it was loaded I can not send the same request again. Do I have to reset something or what is the error?
When I issue the errors in the console with console.log(data); I get the following error messages:
{error: Array(2)}
error
:
(2) ["The Title ist erforderlich.", "The Description ist erforderlich."]
<script type="application/javascript">
$(document).ready(function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$('#add-todo-list').click(function(e) {
e.preventDefault();
$('.todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
return event.keyCode != 13;
});
var _token = $("input[name='_token']").val(); // get csrf field.
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
var privacy = $("select[name='privacy']").val();
$.ajax({
url:'{{ route('todolists.store') }}',
type: 'POST',
data: {_token:_token, title:title, description:description, privacy:privacy},
success: function (response) {
if (response.error) {
_toastr((response),"top-full-width","error",false);
}
else{
$('.todolist-create-modal').modal('hide');
$("#content").load(location.href+" #content>*","");
_toastr((response),"top-full-width","success",false);
}
}
});
});
});
</script>

Q: How can I output the data directly in the view without reloading the page?
One way with jQuery was loading partial content, this will request again the page, get the contents of #content div and replace the HTML, fast and without reload the page:
$("#content").load("/url-of-page > #content > *");
Q: How can I output errors and success messages as flashmessage (toastr) message?
Just write the message on a HTML element:
success: function(data){
$(".alert-danger").addClass("hidden");
$(".alert-success").html(data.msg).removeClass("hidden");
},
error: function(data){
$(".alert-success").addClass("hidden");
$(".alert-danger").html(data.error).removeClass("hidden");
}

Displaying data on different card view

I am displaying weather data for each city on a card on button click
JSP page
<c:forEach var="list" items="${listHist}">
<div class="w3-container">
<ul class="w3-ul w3-card-4">
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-right">×</span>
<img src="resources/assets/images/a1.png" class="w3-bar-item w3-circle w3-hide-small" style="width:85px">
<div class="w3-bar-item">
<span><font size="6">Name : ${list.name}</font></span><br>
<span>
<ul><li class="card-text">Ticket Number : ${list.ticketNo}
<li class="card-text">From : ${list.fromCity}
<li class="card-text">To : ${list.toCity}
<li class="card-text">Date : ${list.travelDate}
<li class="card-text">Travel Class : ${list.travelClass}
<li class="card-text">Gender : ${list.gender}
<li class="card-text">Passenger type : ${list.ptype}
<li class="card-text">Price : ${list.price}
<p id="weatherdata"></p>
</li>
</ul>
</span>
<font color="white"><button type="button" class="btn btn-danger" onclick="currWeather("${list.toCity}");myFunction();" style="margin-left: 0px ">Weather</button></font>
</div>
</div>
</c:forEach>
My script: I have used jquery weather script where yahoo api has been used to fetch weather data for that city
function currWeather(city){
var city =city;
$(document).ready(function() {
$.simpleWeather({
location: city+', IN',
woeid: '',
unit: 'c',
success: function(weather) {
$("p").slideToggle();
/* $("div") */
document.getElementById("weatherdata").innerHTML=weather.code+" "+weather.temp+ " "+weather.units.temp+" "+weather.currently;
},
error: function(error) {
document.getElementById("weatherdata").innerHTML=error;
}
});
});
}
Problem: The data from the function is always displayed on the first card, even if the button on other cards are pressed. I want to display the weather data individually on each card after clicking on the button.

try using an index or a name <p id="weatherdata_#{loop.count}"></p> or even <p id="weatherdata_${list.name}"></p>
Use that unique id in the script

JSP Page:
<c:forEach var="list" items="${listHist}">
<div class="w3-container">
<ul class="w3-ul w3-card-4">
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-right">×</span>
<img src="resources/assets/images/a1.png" class="w3-bar-item w3-circle w3-hide-small" style="width:85px">
<div class="w3-bar-item">
<span><font size="6">Name : ${list.name}</font></span><br>
<span>
<ul><li class="card-text">Ticket Number : ${list.ticketNo}
<li class="card-text">From : ${list.fromCity}
<li class="card-text">To : ${list.toCity}
<li class="card-text">Date : ${list.travelDate}
<li class="card-text">Travel Class : ${list.travelClass}
<li class="card-text">Gender : ${list.gender}
<li class="card-text">Passenger type : ${list.ptype}
<li class="card-text">Price : ${list.price}
<p id="weatherdata_${list.ticketNo}"></p>
</li>
</ul>
</span>
<font color="white"><button type="button" class="btn btn-danger" onclick="currWeather("${list.toCity}",${list.ticketNo});" style="margin-left: 0px ">Weather</button></font>
</div>
</div>
</c:forEach>
My Script:
function currWeather(city,ticketNo){
console.log(ticketNo);
console.log(city);
var city =city;
$(document).ready(function() {
$.simpleWeather({
location: city+', IN',
woeid: '',
unit: 'c',
success: function(weather) {
$("#weatherdata_"+ticketNo).slideToggle();
/* $("div") */
document.getElementById("weatherdata_"+ticketNo).innerHTML=weather.code+" "+weather.temp+ " "+weather.units.temp+" "+weather.currently;
},
error: function(error) {
document.getElementById("weatherdata_"+ticketNo).innerHTML=error;
}
});
});
}

Issues rendering handlebars to HTML

When I render my handlebars template in html, it looks like it's essentially skipping filling in the "handle bars" portion. I'm essentially printing messages with a title and content, and I'm using a "!each" helper to display all of my messages. I originally thought it was because it was because it was escaping the html around it, so I tried using a triple handle bar {{{ on each part however using the each helper with the triple stash gave me an error. Am I possibly using the handlebars incorrectly?
the typescript I used to render the HTML and my handlebars template is below:
public static refreshData(data: any) {
$("#indexMain").html(Handlebars.templates['main.hbs'](data));
//helper function for upvote button
Handlebars.registerHelper('getUButton', function (id) {
id = Handlebars.escapeExpression(id);
return new Handlebars.SafeString(
"<button type='button' class='btn btn-default up-button' id='u" + id + "'>Upvote</button>"
);
});
//helper function for downvote button
Handlebars.registerHelper("getDButton", function (id) {
id = Handlebars.escapeExpression(id);
return new Handlebars.SafeString(
"<button type='button' class='btn btn-default down-button' id='d" + id + "'>DownVote</button>"
);
});
// Grab the template script
var theTemplateScript = $("#main-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
//get messages from server and add them to the context
// This is the default context, which is passed to the template
var context = {
messages: data
}
console.log("context:")
console.log(context);
// Pass data to the template
var theCompiledHtml = theTemplate(context);
console.log(theCompiledHtml);
// Add the compiled html to the page
$("#messages-placeholder").html(theTemplate(context));
//add all click handlers
//get all buttons with id starting with u and set the click listerer
$(".up-button").click((event) => {
var id = $(event.target).attr("id").substring(1);
main.upvote(id)
});
//get all buttons with id starting with d and set the click listerer
$(".down-button").click((event) => {
var id = $(event.target).attr("id").substring(1);
main.downvote(id)
});
}
<script id="main-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Current Messages</h3>
</div>
<div class="panel-body">
<div class="list-group" id="message-list">
<!-- for each message, create a post for it with title, content, upvote count, and upvote button -->
{{#each messages}}
<li class="list-group-item">
<span class="badge">Vote Count: {{likeCount}}</span>
<h4 class="list-group-item-heading">{{title}}</h4>
<p class="list-group-item-text">{{content}}</p>
<div class="btn-group btn-group-xs" role="group" aria-label="upvote">
{{getUButton id}}
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="downvote">
{{getDButton id}}
</div>
</li>
{{/each}}
</div>
</div>
</div>
</script>
<div id="messages-placeholder"></div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Post New Message</h3>
</div>
<div class="input-group">
<span class="input-group-addon">Title</span>
<input id="newTitle" type="text" class="form-control" placeholder="Title" aria-describedby="newTitle">
</div>
<div class="input-group">
<span class="input-group-addon">Message</span>
<input id="newMessage" type="text" class="form-control" placeholder="Message" aria-describedby="newMessage">
</div>
<div class="btn-group" role="group" aria-label="create">
<button type="button" class="btn btn-default" id="postNewMessage">Post Message</button>
</div>
<span class="label label-danger" id="incompleteAcc"></span>
</div>

Okay, then it is likely the data provided to your template is not in the correct form. Here's a working snippet (with non-essentials stripped out). The data passed to your refreshData template must be an array. Make sure it isn't an object containing an array.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
</head>
<body>
<script>
let refreshData = (data) => {
// Grab the template script
var theTemplateScript = $("#main-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
//get messages from server and add them to the context
// This is the default context, which is passed to the template
var context = {
messages: data
};
console.log("context:", context);
// Add the compiled html to the page
$("#messages-placeholder").html(theTemplate(context));
}
$(() => {
var data = [
{ likeCount: 3, title: 'My Title', content: 'Some content'},
{ likeCount: 0, title: 'My 2nd Title', content: 'Some other content'}
];
refreshData(data);
})
</script>
<script id="main-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Current Messages</h3>
</div>
<div class="panel-body">
<div class="list-group" id="message-list">
<!-- for each message, create a post for it with title, content, upvote count, and upvote button -->
{{#each messages}}
<li class="list-group-item">
<span class="badge">Vote Count: {{likeCount}}</span>
<h4 class="list-group-item-heading">{{title}}</h4>
<p class="list-group-item-text">{{content}}</p>
</li>
{{/each}}
</div>
</div>
</div>
</script>
<div id="messages-placeholder"></div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Post New Message</h3>
</div>
<div class="input-group">
<span class="input-group-addon">Title</span>
<input id="newTitle" type="text" class="form-control" placeholder="Title" aria-describedby="newTitle">
</div>
<div class="input-group">
<span class="input-group-addon">Message</span>
<input id="newMessage" type="text" class="form-control" placeholder="Message" aria-describedby="newMessage">
</div>
<div class="btn-group" role="group" aria-label="create">
<button type="button" class="btn btn-default" id="postNewMessage">Post Message</button>
</div>
<span class="label label-danger" id="incompleteAcc"></span>
</div>
</body>
</html>
When I am faced with issues like this, I eliminate different things until I either get clarity or something I removed fixes the problem. Now I have isolated where the problem lies. In your situation, the issue is likely the data being passed so verify that. Then try stripping out your helpers to see if they are causing issues.

Why is extending an extended view not working in ember.js?

I am trying to create a modal view and have a base class that all modals need and then extending it for more specific functionality.
PlanSource.Modal = Ember.View.extend({
isShowing: false,
hide: function() {
this.set("isShowing", false);
},
close: function() {
this.set("isShowing", false);
},
show: function() {
this.set("isShowing", true);
}
});
PlanSource.AddJobModal = PlanSource.Modal.extend({
templateName: "modals/add_job",
createJob: function() {
var container = $("#new-job-name"),
name = container.val();
if (!name || name == "") return;
var job = PlanSource.Job.createRecord({
"name": name
});
job.save();
container.val("");
this.send("hide");
}
});
I render it with
{{view PlanSource.AddJobModal}}
And have the view template
<a class="button button-green" {{action show target=view}}>+ Add Job</a>
{{#if view.isShowing}}
<div class="modal-wrapper">
<div class="overlay"></div>
<div class="dialog box box-border">
<div class="header">
<p class="title">Enter a job name.</p>
</div>
<div class="body">
<p>Enter a name for your new job.</p>
<input type="text" id="new-job-name" placeholder="Job name">
</div>
<div class="footer">
<div class="buttons">
<a class="button button-blue" {{action createJob target=view}} >Create</a>
<a class="button" {{action close target=view}}>No</a>
</div>
</div>
</div>
</div>
{{/if}}
The problem is that when I click the button on the modal dialog, it gives me an "action createJob" can not be found. Am I extending the objects incorrectly because it works if I put the createJob in the base Modal class.
Fixed
There was an issue somewhere else in my code. The name got copied and so it was redefining it and making the method not exist.