Which bootstrap files need to include and how to implement the bootstrap datepicker?
<script src="~/Scripts/Common/bootstrap-datepicker.js"></script>
<link href="~/Content/datepicker.css" rel="stylesheet" />
this is the code:
<div id="yeadDropdown" class="drpDownMarginAdjust">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
It depends on which datepicker plugin you are using. Because, there are many bootstrap datepickers.
But usually to initiate datepicker you need to execute this javascript code:
$('.datepicker').datepicker();
Before executing this code add "datepicker" class to your inputs, like this:
<input type='text' class="form-control datepicker" />
Related
I installed Laravel 8 and set up a blade file.
I moved resources folders css, js, and bootstrap files to public folder and loaded from blade file.
This is master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script src="{{asset('js/app.js')}}"><script/>
<script src="{{asset('js/bootstrap.js')}}"><script/>
</head>
<body>
#yield('content')
</body>
</html>
This is welcome.blade.php
#extends('layouts.master')
#section('content')
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px">Forgot password?</div>
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<a id="btn-login" href="#" class="btn btn-success">Login </a>
<a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Don't have an account!
<a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="signupbox" style="display:none; margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign Up</div>
<div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div>
</div>
<div class="panel-body" >
<form id="signupform" class="form-horizontal" role="form">
<div id="signupalert" style="display:none" class="alert alert-danger">
<p>Error:</p>
<span></span>
</div>
<div class="form-group">
<label for="email" class="col-md-3 control-label">Email</label>
<div class="col-md-9">
<input type="text" class="form-control" name="email" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-md-3 control-label">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="firstname" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="lastname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" name="passwd" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="icode" class="col-md-3 control-label">Invitation Code</label>
<div class="col-md-9">
<input type="text" class="form-control" name="icode" placeholder="">
</div>
</div>
<div class="form-group">
<!-- Button -->
<div class="col-md-offset-3 col-md-9">
<button id="btn-signup" type="button" class="btn btn-info"><i class="icon-hand-right"></i>   Sign Up</button>
<span style="margin-left:8px;">or</span>
</div>
</div>
<div style="border-top: 1px solid #999; padding-top:20px" class="form-group">
<div class="col-md-offset-3 col-md-9">
<button id="btn-fbsignup" type="button" class="btn btn-primary"><i class="icon-facebook"></i> Sign Up with Facebook</button>
</div>
</div>
</form>
</div>
</div>
</div>
#endsection
route is default
Route::get('/', function () {
return view('welcome');
});
Console is not showing any errors and view is not showing anything.
Although the blade files are coded correctly, it is not working
when I remove asset files from , it show view .
So what wrong in asset file
Can someone explain this to me?
I properly define everything in my back end file. When I try to use
the back end variables in Thymeleaf by using selection variable
expression it is not working. It show errors in every field:
cannot resolve field name
register.html
<!doctype html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="/fragments/head"></head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid mt-5">
<div class="row">
<div th:replace="/fragments/categories"></div>
<div class="col"></div>
<div class="col-6">
<h3 class="display-4">Register</h3>
<form method="post" th:object="${user}" th:action="#{/register}" >
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
There are errors
</div>
<div class="form-group">
<label for>Username:</label>
<input type="text" class="form-control" th:field="*{username}" placeholder="Username">
<span class="error" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></span>
</div>
<div class="form-group">
<label for>Password:</label>
<input type="password" class="form-control" th:field="*{password}">
<span class="error" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></span>
</div>
<div class="form-group">
<label for>Confirm Password:</label>
<input type="password" class="form-control" th:field="*{confirmPassword}">
<span class="error" th:if="${passwordMatchProblem}">Passwords do not match</span>
</div>
<div class="form-group">
<label for>E-mail:</label>
<input type="email" class="form-control" th:field="*{email}" placeholder="E-mail" required>
<span class="error" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
</div>
<div class="form-group">
<label for>Phone number:</label>
<input type="text" class="form-control" th:field="*{phoneNumber}" placeholder="Phone number">
<span class="error" th:if="${#fields.hasErrors('phoneNumber')}" th:errors="*{phoneNumber}"></span>
</div>
<button class="btn btn-danger mb-5">Register</button>
</form>
</div>
<div class="col"></div>
</div>
</div>
<div th:replace="/fragments/footer"></div>
</body>
</html>
I get errors everywhere I use the selection expression field.
Are you adding "user" to your model in your controller?
You need to add it to your model so Thymeleaf can access it.
addAttribute method can be used like so: model.addAttribute("user", myUser);
I followed the following post but the redirection is still not effective ...
Mailchimp - Redirect to thank you page
I can't find a way to make it work. The embedded form is embedded here on my website:
And the html code is:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://travel-homes.us18.list-manage.com/subscribe/post?u=ab5689b8019de3c007fe4634b&id=84b4167b78" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Main Guest</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="required" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">E-mail <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-group[2217]">Apartment </label>
<select name="group[2217]" class="REQ_CSS" id="mce-group[2217]">
<option value=""></option>
<option value="1">Le Wilson</option>
<option value="2">Le Rebberg</option>
<option value="4">Le Bright'n Cosy|Comfy Studio - City Center</option>
<option value="8">L'Alsacien</option>
<option value="16">L'EastSide</option>
<option value="32">Le Pfeffel</option>
<option value="128">Le Bredele</option>
<option value="256">Colmar Unique Apartment</option>
</select>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ab5689b8019de3c007fe4634b_84b4167b78" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Send" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
I hope somebody can find a solution to this unsolvable issue.
I need to integrate an web based html editor in asp.net core project. I downloaded CKEditor and placed the unzipped folder in wwwroot folder.
I have referenced "ckeditor.js" in _Layout.cshtml using following script tag.
<script src="~/ckeditor/ckeditor.js" type="text/javascript">
</script>
Then, I've used following code to display the editor.
<textarea id="editor1" name="editor1">
</textarea>
<script type="text/javascript">CKEDITOR.replace('editor1');</script>
On using these lines of code in the empty About.cshtml of Home Folder, the editor was displayed. But the editor was not displayed when using the same code in another .cshtml file. The Code is given below
<div class="panel">
<div class="panel-heading border">
Create User
</div>
<div class="panel-body">
<div class="row no-margin">
<div class="col-lg-12">
<form asp-action="Edit" class="form-horizontal bordered-group" role="form">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="_id" />
<div class="form-group">
<label asp-for="Subject" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="Subject" class="form-control" />
<span asp-validation-for="Subject" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="MailFrom" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input asp-for="MailFrom" class="form-control" />
<span asp-validation-for="MailFrom" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Body" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
#* CKEDitor *#
<textarea id="editor1" name="editor1">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Update" class="btn btn-default" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">CKEDITOR.replace('editor1');</script>
Why is the editor not displayed in another cshtml file?
I've also faced the same problem while integrating CKEditor in aps.net mvc project. After trying to determine the error I found that the Layout of the page is different. You may have the same problem.
Use id attribute and use a hash on the name.
<script type="text/javascript">CKEDITOR.replace('#editor1');</script>
I have a problem with FormValidation to validate a form in multi-tab (Bootstrap theme).When I click on submit button in #tab-1, formValidation work correctly. but when I change to #tab-2 or #tab-3, field validation in #tab-1 don't work and submit form without validation.
<form id="newstext" method="post" class="form-horizontal"
data-fv-framework="bootstrap"
data-fv-message="This value is not valid"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><i class="green ace-icon fa fa-home bigger-120"></i>tab-1</li>
<li><i class="red ace-icon fa fa-folder bigger-120"></i>tab-2</li>
<li><i class="blue ace-icon fa fa-exchange bigger-120"></i>tab-3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">title *</label>
<input id="title" name="title" type="text" placeholder="" class="form-control"
data-fv-notempty="true"
data-fv-notempty-message="The title is required" />
</div>
<div class="form-group">
<label class="control-label">abstract </label>
<input id="abst" name="abst" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">name</label>
<input id="namee" name="namee" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">show</label>
<input name="show_callme" value="1" id="show_callme" type="checkbox">Ok
<input name="show_callme" value="1" id="shows" type="checkbox">Bold
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
Please see my code in Codepen
This example might be helpful: formvalidation.io/examples/bootstrap-tab
JQuery FormValidation Has solved the problem Validation
That by replacing the jquery, validation between tabs work
You can add "ignore" in validate function, this worked fine with me
$("#form").validate({
...
rules: {...},
messages: {...},
ignore: "",
...
});