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
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.
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>
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());
});
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>
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...