datetimepicker not showing calendar just time picker - node.js

The components shows only time picker:
.form-group
label.col-xs-5.control-label test field
.col-xs-5
#fromDate.input-group.date
input.form-control(type='text')
span.input-group-addon
span.glyphicon.glyphicon-calendar
$(function () {
$('#fromDate').datetimepicker({
sideBySide: true,
locale:'en-ca'
});
})
Why calendar is not showing?

it seems like you are using eonasdan-datetimepicker
I copied your template, and it is working as it should.
Fiddle
HTML
<div class="form-group">
<label class='label col-xs-5 control-label test field'></label>
<div class="col-xs-5">
<div class='input-group date' id='myDatepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
JS Code
$('#myDatepicker').datetimepicker({
sideBySide: true,
locale: 'en-ca'
});

Related

How to display JSON object with Handlebars template

I am trying to create a react-like component with Handlebars. In this project, I have a set of project cards that are inside a carousel. The cards consist of a photo, project name, project description, and project link. The information is being pulled from an API that I create with the JSON data looking something like this
[
{
_id: '627b281c0ee7f8ee7eb08703',
name: 'Pamela',
about: "Pamela's portfolio page",
github: "pam's portfolio",
website: 'https://github.com/AlexAntoine/Devcamper-api/blob/main/models/Bootcamp.js',
tools: [ 'node js', 'Express', 'heroku', 'mongoDB', 'mongoose' ],
content: [],
__v: 0
},
{
_id: '627b284f0ee7f8ee7eb08706',
name: 'Mike',
about: "Mike's portfolio page",
github: "mike's portfolio",
website: 'https://github.com/AlexAntoine/Devcamper-api/blob/main/models/Bootcamp.js',
tools: [ 'node js', 'Express', 'heroku', 'mongoDB', 'mongoose', 'React' ],
content: [],
__v: 0
},
{
_id: '627b28b00ee7f8ee7eb08709',
name: 'Alex',
about: "Alex's portfolio page",
github: "alex's portfolio",
website: 'https://github.com/AlexAntoine/Devcamper-api/blob/main/models/Bootcamp.js',
tools: [
'node js',
'Express',
'heroku',
'mongoDB',
'mongoose',
'Angular'
],
content: [],
__v: 0
}
]
My goal is to have a new card created with the information from each object. For example, the first card would be populated with "Pamela", "Pamela's portfolio page", and "https://github.com/AlexAntoine/Devcamper-api/blob/main/models/Bootcamp.js " The starting HBS code I have for this is
{{#each this}}
{{>header}}
<section class="s1">
<div class="main-container">
<div class="greeting-wrapper">
<h1>Hello I'm Don-Alex 2</h1>
</div>
<div class="intro-wrapper" >
<div class="nav-wrapper">
<div class="dots-wrapper">
<div id="dot-1" class="browser-dots"></div>
<div id="dot-2" class="browser-dots"></div>
<div id="dot-3" class="browser-dots"></div>
</div>
<ul id="navigation">
<li>Contact</li>
</ul>
</div>
<div class="left-column">
<img id="profile-pic" src="https://images.unsplash.com/photo-1524502397800-2eeaad7c3fe5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Profile Picture">
<h5 >Personalize Theme</h5>
<div id="theme-options-wrapper">
<div data-mode="light" class="theme-dot" id="light-mode"></div>
<div data-mode="blue" class="theme-dot" id="blue-mode"></div>
<div data-mode="green" class="theme-dot" id="green-mode"></div>
<div data-mode="purple" class="theme-dot" id="purple-mode"></div>
</div>
<p id="setting-note">*Theme options will be saved for<br>your next visit</p>
</div>
<div class="right-column">
<div id="preview-shadow">
<div id="preview">
<div id="corner-tl" class="corner"></div>
<div id="corner-tr" class="corner"></div>
<h3>What I Do </h3>
<p>Aspring software developer that enjoys building new things</p>
<div id="corner-br" class="corner"></div>
<div id="corner-bl" class="corner"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="s2">
<div class="main-container">
<div class="about-wrapper">
<div class="about-me">
<h4>More about me</h4>
<p>Love watching anime and taking naps. </p>
<hr>
<h4>Top Expertise</h4>
<p>What i'm good at Download Resume </p>
<div id="skills">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
<li>Bootstrap</li>
</ul>
<ul>
<li>Node.js</li>
<li>Mongoose</li>
<li>Express</li>
<li>MongoDB</li>
<li>Heroku</li>
</ul>
</div>
</div>
<div class="social-links">
<img id="social-img" src="https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1488&q=80" alt="Github">
<h3>Find my latest projects on Github</h3>
Github
<br>
</div>
</div>
</div>
</section>
<section class="s1">
<div class="main-container s1-container">
<h3>Some of My Past Projects</h3>
<div class="post-wrapper">
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel" data-pause="hover">
<div class="carousel-inner">
<!--Add loop here. Figure out how that is going to work out. -->
<div class="carousel-item active container-fluid temp-container" data-interval="3000">
<div class="post">
<div class="card-container">
<img class="thumbnail" src="https://images.unsplash.com/photo-1514474959185-1472d4c4e0d4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1674&q=80" alt="">
<div class="post-preview">
<h6 class="post-title">{{this.name}}</h6>
<p class="post-intro">{{this.about}}</p>
1
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<section class="s2" id="one">
<div class="main-container">
<h3>Get In Touch</h3>
<form action="/" id="contact-form">
<label for="">Name</label>
<input type="text" class="input-field" name="name">
<label>Subject</label>
<input type="text" name="subject" class="input-field">
<label>Email</label>
<input type="text" name="email" class="input-field">
<label>Message</label>
<textarea class="input-field" name="message"></textarea>
{{!-- <input type="submit" name="submit-btn" value="send" id="submit-btn"> --}}
<input type="submit" value="send" id="submit-btn">
</form>
</div>
</section>
{{>footer}}
{{/each}}
The server-side code that sends the data is written like this
app.get('/home2', async(req, res)=>{
const {data:{result}}= await axios.get(`https://antoine-portfolio-api.herokuapp.com/api/v1/projects`);
const projects= result.map((projects)=>{
// console.log('line 62: ', project);
return projects;
});
res.render('home2',{
// title:'Alex home',
name: projects,
about: projects
})
})
I cannot get the program to display the project name and the description for all three of the projects listed. Any help would be appreciated. Thank you.

How to load comments without refreshing the page in nodeJs and Ajax

The actual challenge that I am facing now is how to load the comment properly. My Ajax is creating the comment but I am struggling to load the comment properly in line with other comments.
what happening now is that the comment loads but it doesn't load properly, I am struggling to load it with the right ID in the right place. when it loads, it shows my title and descriptions together and it doesn't load the date.
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1>Comment App</h1>
<form action="/programs/<%= program._id %>/createComment" method="POST" >
<div class="form-group">
<input name="name" id="username" class="form-control" placeholder="username">
</div>
<div class="form-group">
<textarea name="description" id="descriptioncomment" class="form-control" placeholder="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" id="post-comment" class="btn btn-primary" value="Submit">
</div>
</form>
<ul id="commentList" class="list-group">
</ul>
</div>
</div>
</div>
<section class="content-item" id="comments">
<div class="row" id="comment-lists" >
<div class="col-sm-10" >
<h3 id="comments-count" ><%= program.programcomments.length%> </h3>
<% program.programcomments.forEach(comments=> { %>
<div class="media" >
<div class="media-body" >
<h4 class="media-heading" id="lists" ><%= comments.name %></h4>
<p id="lists" ><%=comments.description %></p>
<ul class="list-unstyled list-inline media-detail pull-left" id="lists">
<li id="lists"><i class="fa fa-calendar" ></i><%= moment(comments.createdAt).format('llll') %></li>
</ul>
</div>
</div>
<% });%>
</div>
</div>
</section>
$('#post-comment').on('click', function(event) {
event.preventDefault();
$.ajax({
url : "/programs/<%= program._id %>/createComment",
method : 'POST',
data : {
name : $('#username').val(),
description : $('#descriptioncomment').val()
},
success : function(result ) {
$('.form-control').each(function () {
let comments = this.value;
$('#comment-lists').append($('#lists').text(comments))
document.getElementById('comments-count').innerHTML++
});
$("#username").val('');
$("textarea#descriptioncomment.form-control").val('');
}
});
})
You are using same ids for mutliple elements so first remove them and use class. Then , you can generate entire media div inside success function of ajax with the value of inputs and then append them inside your comment-lists div.
Demo Code :
$('#post-comment').on('click', function(event) {
event.preventDefault();
/*$.ajax({
url: "/programs/<%= program._id %>/createComment",
method: 'POST',
data: {
name: $('#username').val(),
description: $('#descriptioncomment').val()
},
success: function(result) {*/
//append new div .. with username & desc
$('#comment-lists').append(`<div class="media">
<div class="media-body">
<h4 class="media-heading">${$('#username').val()}</h4>
<p class="lists">${$('#descriptioncomment').val()}</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>${moment(new Date()).format('llll') }</li>
</ul>
</div>
</div>`)
$("#comments-count").text(parseInt($("#comments-count").text()) + 1) //updated total
//then emtpy
$("#username").val('');
$("textarea#descriptioncomment.form-control").val('');
/*}
});*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1>Comment App</h1>
<form action="/programs/<%= program._id %>/createComment" method="POST">
<div class="form-group">
<input name="name" id="username" class="form-control" placeholder="username">
</div>
<div class="form-group">
<textarea name="description" id="descriptioncomment" class="form-control" placeholder="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" id="post-comment" class="btn btn-primary" value="Submit">
</div>
</form>
<ul id="commentList" class="list-group">
</ul>
</div>
</div>
</div>
<section class="content-item" id="comments">
<div class="row" id="comment-lists">
<div class="col-sm-10">
<h3 id="comments-count">2</h3>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Abc</h4>
<p class="lists">Descp xyz</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>23-2-2022</li>
</ul>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading lists">Abc</h4>
<p class="lists">Descp xyz</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>23-2-2022</li>
</ul>
</div>
</div>
</div>
</div>
</section>

Semantic UI: get current dropdown search input text

I'm trying to filter some results I will get from an api using Semantic UI's dropdown search component.
The issue is that I don't know how to get the text I'm typing in the input field
The dropdown search I have:
<div class="ui fluid search selection dropdown" id="user-dropdown">
<input id="user-dropdown-input" name="country" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Search...</div>
<div class="menu" id="user-dropdown-menu">
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
</div>
</div>
How dropdown is initialized:
$(document).ready(function () {
$('.ui.dropdown').dropdown({
clearable: true,
fullTextSearch: true
});
});
What I tried:
$('#user-dropdown').on('keyup', function () {
let input = $('#user-dropdown');
console.log('Val: ' + input.dropdown().val());
// also tried: $('#user-dropdown-input').val()
// $('#user-dropdown-input').html()
// $('#user-dropdown-input').text()
});
Basically what I want is if I type "abc" to print the value "abc" into the console, but I don't know how to get that value.
what worked for me was searching the input used for search that looks like:
<input class="search" autocomplete="off" tabindex="0">
and I added a type to this input
document.getElementsByClassName('search').type = 'text';
and then got the value by class on keyup
$('.search').keyup(function() {
console.log($(this).val());
});

Searching option and value in the URL LARAVEL 5.2

Hello I need to put searching option and value in the URL. I know it's very basic but I have never implement the search function before ever always used the templates one but this time I need to use it. below is my code please help me.
Right now I am getting this in the link
list/%7Boption%7D/%7Bvalue%7D
but I want this in the link list/Hello/thisishelloworld or this may be list/option?Hello/value?thisishelloworld but I think I can get the second option using Get instead of Post method
AND YA ITS IN LARAVEL 5.2
<center>
<div class="form-group">
<label>Select your option from below</label>
<select class="form-control" id="options" name="options" style="width:100%" type="checkbox">
<option>Hello</option>
<option>World</option>
<option>it's Me</option>
</select>
</div>
<div class="col-md-4" id="value">
<div class="panel panel-warning">
<div class="panel-heading">
Enter your Search below
</div>
<form role="form" action="/list/{option}/{value}" method="post">
{{ csrf_field() }}
<div class="form-group has-success">
<input class="form-control" placeholder="Search" type="text" name="{{ value }}" id="value">
<input type="submit" class="btn btn-primary" name="submit" value="Search">
</div>
</form>
</div>
</div>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function hide() {
$("#value").hide();
$("#h").hide();
$("#search").hide();
}
function show() {
$("#value").show();
$("#h").show();
$("#search").show();
}
function initHandlers() {
$("#options").change(function() {
show();
});
}
hide();
initHandlers();
</script>
Laravel 5. 2
Step 1:
First you have to create a route.
Routes.php :
Route::get('/list', function(){
// do process
})->name('search');
HTML :
something.blade.php :
{!! Form::open('search', ['route' => 'search', 'method' => 'GET']) !!}
<div class="form-group has-success">
<input class="form-control" placeholder="Search" type="text" name="search" id="value">
<input type="submit" class="btn btn-primary" name="submit" value="Search">
</div>
</form>

Parsing nested data from select form with Angularjs

I'm trying to parse a model from a form which contain a select(ngOptions) and save it to db but the selected value is never parsed. i'm stuck here can someone help please.
here is my code:
View
<section class="container" data-ng-controller="TagsController" >
<h2><i class="fa fa-pencil-square-o"></i>Add a new Tag</h2>
<form class="form-horizontal col-md-5" data-ng-submit="create()">
<div class="form-group ">
<div class="controls">
<input type="text" class="form-control input-lg" data-ng-model="label" id="label" placeholder="Label" required>
</div>
</div>
<div class="form-group" data-ng-controller="CategoriesController" data-ng-init="find()">
<select class="form-control input-lg" ng-model="category._id" ng-options="category._id as category.label for category in categories">
<option value="">Choose a Category</option>
</select>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn">
</div>
</div>
</form>
</section>
controller
angular.module('mean.tags').controller('TagsController', ['$scope', '$routeParams', '$location', 'Global', 'Tags', function ($scope, $routeParams, $location, Global, Tags) {
$scope.global = Global;
$scope.create = function() {
var tag = new Tags({
label: this.label,
category: this.category
});
tag.$save(function(response) {
$location.path("tags/");
});
this.label = "";
this.category = "";
};
...
I found the problem so i will answer my question. The problem was due to architecture restrictions, Angularjs don't allow to nest a ng-controller inside an other one...

Resources