I have all of these files in my website header:
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="crossorigin="anonymous"></script>
<script src="http://localhost:8080/Javascript/bootstrap.bundle.js" type="javascript/text"></script>
<link rel="stylesheet" href="http://localhost:8080/Css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js" type="javascript/text"></script>
Then I have the following in my body:
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<!-- Form code begins -->
<form method="post">
<div class="form-group"> <!-- Date input -->
<label class="control-label" for="date">Date</label>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Submit button -->
<button class="btn btn-primary " name="submit" type="submit">Submit</button>
</div>
</form>
<!-- Form code ends -->
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#date").datepicker();
});
</script>
I want it to look like this: https://formden.com/blog/date-picker.
But instead it looks like this:
What do I do? I have been trying for hours. I have tried different ordering of the files. When I try to do datetimepicker(). I get an error. I just do not know what to do please help.
It looks like you are Using JqueryUI as well as BootstrapDatepicker. Since bootstrapDatepicker and JqueryUI both has got the same function name for their datepicker to be initialized hence there is an ambiguity.
Now your markup has got jqueryUI js loaded first so it is ideally using the jqueryUI datepicker function and expecting the CSS of jqueryUI which can be found here.
If you want to use the bootstrap datepicker then you might need to remove the jqueryUI.js or generate the jqueryUI js which is excluding the datepicker functionality.
Related
I am in the process of adding real-time messaging functionality to a Laravel 6.x site. The messaging seems to be working, but as soon as I include <div id="app"> just after the main menu, some of the existing forms stop working. E.g., this form:
<div class="modal-body">
<div class="form-controls">
<div class="row">
<div class="col-lg-4">
<form id="form-status{{$task->id}}" action="{{ url('xxx') }}" method="POST" style="display: none;">
#csrf
<label for="status{{$task->id}}">Status: </label>
<select class="form-control" id="status{{$task->id}}" name="status">
<option value="0" selected="selected">Not started</option>
<option value="10">Started</option>
<option value="20">Finished</option>
</select>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" onclick="event.preventDefault();document.getElementById('{{'form-status'.$task->id}}').submit();"> Update
</a>
</div>
The post action is still executed, but I get a 419 "page expired" error, so I assume the csrf value is not sent with the post data anymore.
Does anyone know why this may be happening? For now, I've moved the APP id to a small section of the website with no pre-existing forms, but in future I would like to have more Vue components on the page, so I will have to fix it at some stage.
I am using Bootstrap 3, so I removed Bootstrap 4 in Laravel using npm, and I import it using a script tag. The HTML header includes:
<link href="http://myurl/css/bootstrap.min.css" rel="stylesheet">
<link href="http://myurl/css/reset.css" rel="stylesheet">
<link href="http://myurl/css/dashboard.css" rel="stylesheet">
<link href="http://myurl/css/sticky-footer-navbar.css" rel="stylesheet">
<link href="http://myurl/css/bootstrap-datepicker.css" rel="stylesheet">
<!-- Script imported for laravel echo and vue -->
<script src="http://myurl/js/app.js" defer></script>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" defer></script>
<script src="http://myurl/js/bootstrap.min.js" defer></script>
<script src="http://myurl/js/bootstrap-datepicker.js" defer></script>
Thanks,
Hendrik.
EDIT:
The html sent to the client is as follows:
<div class="modal-body">
<div class="form-controls">
<div class="row">
<div class="col-lg-4">
<form id="form-status94" action="myurl/projects/35/nodes/68/tasks/94/status" method="POST" style="display: none;">
<input type="hidden" name="_token" value="7ynFCghH2yNGpaO5Pfpd45EMYGIQHdXdNjYooNtJ">
<label for="status94">Status: </label>
<select class="form-control" id="status94" name="status">
<option value="0" selected="selected">Not started</option>
<option value="10">Started</option>
<option value="20">Finished</option>
</select>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" onclick="event.preventDefault();document.getElementById('form-status94').submit();">Update
</a>
</div>
Your curly braces conflict with Vue.js. There's a Blade & JavaScript Frameworks section in Laravel's documentation, saying:
Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you may use the # symbol to inform the Blade rendering engine an expression should remain untouched. For example:
<h1>Laravel</h1>
Hello, #{{ name }}.
In this example, the # symbol will be removed by Blade; however, {{ name }} expression will remain untouched by the Blade engine, allowing it to instead be rendered by your JavaScript framework.
My jquery code doesnot work in bootstrap. i have some columns and i want to put submission form within specific column but when i use form tag my jquery wont work.
<body>
<form>
<div class="row" id="row1">
<div class="col-sm-6" id="col-1">
<button id="btn">hide me</button>
</div>
<div class="col-sm-6" id="col-2">
</div>
</div>
<div class="row">
<div class="col-sm-6" id="col-3">
</div>
<div class="col-sm-6" id="col-4">
</div>
</div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("#row1").slideUp("slow");
});
});
</script>
You need to use preventDefault() as shown below:
$(document).ready(function(){
$("#btn").click(function(e){
e.preventDefault();
$("#row1").slideUp("slow");
});
});
When you are putting the form tag and there is a button tag inside it, the default action is to submit the form. So you need to prevent that first using preventDefault().
Please let me know if it solved the issue or not.
I need to show datepickers on page load, not by clicking on input or icon.
http://eonasdan.github.io/bootstrap-datetimepicker/
It's this plugin. I can't find any example for this, is this possible ?
Yes, it is possible, you have to use the inline option. You can use the doc's example:
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true
});
});
</script>
</div>
I'm sure since you provided the link with the actual answer, you found that the code from that page, what I copied below didn't work.
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true
});
});
</script>
</div>
Your problem is the actual libraries. I tried using all the latest jquery, moment, and bootstrap libraries, which was giving me an error. So I tried the libraries that was used on the site, which works.
Here's the example:
https://jsfiddle.net/hx2xyufw/1/
I am using the following source to create some good looking forms on my site.
If you look at the live demo, and go to the form titled "yoko" you will see that once you fill out the input box, it is supposed to stay open, and you are supposed to be able to see the text you input.
When I use this source, it opens when I click in the text box, but the form collapses even when it has been filled out, which it is not supposed to do.
On the demo when you click in the text box and fill it out, the class name of that span element goes from "input input--minoru" to "input input--minoru input--filled". When I use the css, and javascript files from the source the forms open up correctly when I click and type in them, but they do not stay open, and the class title does not changed to "input input--minoru input--filled".
In my header.php I all the css files in the following order:
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/normalize.css" >
<link type="text/css" rel="stylesheet" href="css/component.css" >
<link type="text/css" rel="stylesheet" href="css/style2.css" >
In my index.php I have the following piece of code:
<section class="test">
<div class="container">
<div class="row">
<span class="input input--minoru">
<input class="input__field input__field--yoko" type="text" id="input-1" />
<label class="input__label input__label--yoko" for="input-1">
<span class="input__label-content input__label-content--yoko">First Name</span>
</label>
</span>
</div>
<div class="row">
<span class="input input--yoko">
<input class="input__field input__field--yoko" type="text" id="input-1" />
<label class="input__label input__label--yoko" for="input-1">
<span class="input__label-content input__label-content--yoko">Last Name</span>
</label>
</span>
</div>
</div>
</section>
and at the very end of index.php I call the javascript files in this order:
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/script.js"></script>
The styles are all applying, so I know the css is at least styling correctly, but it is not doing the correct ::before and ::after functionality correctly.
JSFiddle of what I am talking about
If you type in something into a form, and then leave the input area the box collapses again. When it should stay up.
I did not include the .js files, but classie.js comes with the source, and they are ordered as mentioned above in my index.php
On my concept design the jQuery controlling things like the calendar to appear when the input(s) at the top right are clicked on work fine, however now I'm trying to integrate this into an existing design, all these Javascript elements are not working, although I am using the same code amongst other things which already existed within old design.
I considered it to be simply a compatibility issue of the sidebar calendar, removed it entirely and still nothing. Within the console it defines "Cannot read property 'datetimepicker' of null" for example.
Live URL of the concept (all working elements): http://bit.ly/1m23oXT
Live URL of the non working site: http://bit.ly/1gxgXfx
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo HTTP_HOST; ?>Styles/jquery.datetimepicker.css" />
<script src="<?php echo HTTP_HOST; ?>Scripts/jquery.idTabs.min.js"></script>
.
<div class="header-reservations">
<div id="usual2" class="usual">
<ul>
<li>ROOM BOOKINGS</li>
<li>SPA BOOKINGS</li>
</ul>
<div id="tabs2">
<form>
<input type="text" class="header-form-input" id="datetimepicker" placeholder="21st January" />
<select class="header-form-dropdown">
<option>1 Night</option>
<option>2 Nights</option>
</select>
<select class="header-form-dropdown">
<option>1 Adult</option>
<option>2 Adults</option>
</select>
<input type="submit" class="header-form-submit blue-btns" value="BOOK" />
</form>
<span class="clearboth"></span>
</div>
<div id="tabs3">
<div class="header-tab-spa">
<h3>To Make A Spa Booking, Contact Us Here</h3>
</div>
<span class="clearboth"></span>
</div>
</div>
</div>
.
<!-- Required JS Files -->
<script type="text/javascript">
$(document).ready(function() {
$("#usual2 ul").idTabs("tabs2");
}
</script>
<script src="<?php echo HTTP_HOST; ?>Scripts/jquery.datetimepicker.js"></script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker();
$('#datetimepicker2').datetimepicker();
</script>
A parenthesis is missing at the end of
$(document).ready(function() {
$("#usual2 ul").idTabs("tabs2");
}
But such a syntax error should be found using the console, not Stack Overflow. Read about the console.