I have a default blade file that yields other contents this is where im calling the link to style sheet and javascript i downloaded bootstrap 3.3.5 and created a link to it here is my default blade
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap335/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug- ins/1.10.7/integration/bootstrap/3/dataTables.bo‌​otstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
#yield('content')
</div>
</body>
</html>
The bootstrap is working properly in my views except one. i don't know the problem because it works fine on the others and it is extends the default blade file
Related
I want to implement a date picker in one of my text input page. I have a page call panel.blade.php and app.blade.php which is the layout page. Since Laravel comes with bootstrap and jquery installed, I did the usual import to include the necessary files to make it work.Below is the code.
app.blade.php:
<head>
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
.
.
.
.
.
.
<script>
$('.date').datepicker({
format: 'mm-dd-yyyy'
});
</script>
panel.blade.php:
<tr>
<td>454542</td>
<td><input class="date form-control" type="text"></td>
<td>Chair</td>
<td>Received</td>
<td>xxxx</td>
</tr>
The problem is when I click on the textbox, it's supposed to pop out the date picker UI but nothing came out. I spent some time trying to figure out what went wrong but to no avail. Anyone can point out what went wrong?
Appreciate it.
The problem is that you are assuming that Laravel includes Bootstrap and jquery, but I don't see it in a fresh install. (Are you using a template maybe?)
Put this lines in your head:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
And it should works perfectly ;)
EDIT:
Try putting the jquery import before the bootstrap datepicker import:
app.blade.php
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
EDIT2:
To change the format you can also try to add a property to the input field:
<input class="date form-control" data-date-format="mm/dd/yyyy">
Hope it works flawlessly!
I have done literally everything to make it work but it is not working yet
I loaded from cdn just as it is in the preview documentation
<!-- add to document <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.css"
rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-
plugin-image-preview.css" rel="stylesheet">
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-image-
preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
To enhance into a filepond element I have
<script>
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create( inputElement );
</script>
and lastly
<input type="file">
It just shows up as a file and not with image preview. What am I missing?
The plugins have not been registered with FilePond.
This should work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FilePond Plugin Image Preview Demo</title>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
</head>
<body>
<input type="file"/>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
// Register the plugin with FilePond
FilePond.registerPlugin(FilePondPluginImagePreview);
// Get a reference to the file input element
const inputElement = document.querySelector('input[type="file"]');
// Create the FilePond instance
const pond = FilePond.create(inputElement);
</script>
</body>
</html>
Live demo here: https://pqina.github.io/filepond-plugin-image-preview/
I'm looking at the docs and I see how this is confusing, will improve them as soon as I have some time.
I know about existance of layout dialect for Thymeleaf (https://github.com/ultraq/thymeleaf-layout-dialect), but before jumping into said dialect dating pre thymeleaf 3, I wanted to explore newer fragment expressions (introduced in TL3).
So as per docs - I can define base.html that will work almost the same way that the layout dialect allows fragments to be managed.
base.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="base(title, links, content)">
<title th:replace="${title}"></title>
<link rel="stylesheet" type="text/css" media="all" href="/css/main.css" />
<th:block th:replace="${links}"></th:block>
</head>
<body>
<header th:replace="~{header :: header}"></header>
<div th:replace="${content}"></div>
<footer th:replace="~{footer::footer}"></footer>
</body>
</html>
...but then when I use this in my home.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::base(~{::title}, ~{::link}, ~{::content})">
<title th:text="#{home.title}"></title>
<link rel="stylesheet" th:href="test">
<link rel="stylesheet" th:href="test1">
<link rel="stylesheet" th:href="test2">
</head>
<body>
<div th:fragment="content">
<span>TEST CONTENT</span>
</div>
</body>
</html>
...it acts like home.html only evaluates itself and arguments it passes to base.html because this is product:
<!DOCTYPE html>
<html>
<head>
<title>My home page</title>
<link rel="stylesheet" type="text/css" media="all" href="/css/main.css" />
<link rel="stylesheet" href="test"><link rel="stylesheet" href="test1"><link rel="stylesheet" href="test2">
</head>
<body>
<div>
<span>TEST CONTENT</span>
</div>
</body>
</html>
As you can see, title is evaluated in home.html and passed to base.html, same goes for 3 links I provided in home.html. Also content gets passed and placed in proper place. What is missing? Everything that is not argument of base.html fragment. Thymeleaf ignores evaluating my header and footer and just removes them.
Let me just note that If I were to place header/footer in home.html inside content they will be evaluated like they should - from header.html with selector header: "~{header :: header}".
Am I missing something crucial as to how this whole thing is supposed to work? What's the point of being able to define fragments that will work as layout if they can't evaluate themselves and need everything passed from "child file (caller)"?
It seems to me you mixed fragments and replacements together. The head replacement works well because you declared it correctly. But why did you declare a th:replace attribute in base.html like
<header th:replace="~{header :: header}"></header>? It is not within a fragment, not a parameter, therefore it must be replaced from somewhere.
As far as I understand you expect fragments in base.html and replacements in home.html. Then make both the header and footer fragments and declare corresponding th:replace tags in home.html.
<div th:replace="${content}"></div>
This also doesn't work because it is not within a th:fragment tag.
The bottom line: fix the hierarchy of tags and the logic of replacement.
Like Xaltotun pointed out - I needed to fix my stuff.
I've placed base(args...) in header so my passed fragments werent visible in body, thus everything failed.
Let me just add some code:
Layout.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="layout(content, title, meta)">
<head>
<title th:text="${title}">Default Title</title>
<link rel="stylesheet" type="text/css" media="all" href="/css/style.css" />
<th:block th:replace="${meta}" />
</head>
<body>
<div class="viewport">
<header class="website-header">
...
</header>
<div th:replace="${content}"></div>
<th:block th:replace="staticContentTemplate :: testFragment" />
<footer class="website-footer">
...
</footer>
</div>
</body>
</html>
Home.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="layout::layout(~{::content}, #{home.title}, ~{::meta})">
<head>
<th:block th:fragment="meta">
<link rel="stylesheet" th:href="test">
</th:block>
</head>
<body>
<div th:fragment="content">
<span>TEST CONTENT</span>
</div>
</body>
</html>
Result is as expected:
Home.html provides title, content and meta.
Layout.html gives everything else, and also copies additional template from different source staticContentTemplate :: testFragment
Tip for others: notice that I placed args in layout in this order - content since its always present, title that can be optional and meta that might not be needed - this allows us to call layout with just content: layout(~{::content}) (shorter = better).
I am probably missing something very simple but, when I link my style sheet I get:
<link media="all" type="text/css" rel="stylesheet" href="http://laravel.dev:8000/public/css/masterCss.css">
showing on the webpage rather then linking to my css file.
My Html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Nub Life</title>
{{ Html::style('/public/css/masterCss.css') }}
</head>
<body>
#yield('content')
</body>
</html>
Why is this happening and how can I fix it?
the stylesheet href url, should not contain the word public. this is how you can generate url for your css asset files
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/masterCss.css') }}">
Suppose you have a .css file in your public/your_project_name/css/style.css
Simply write
<link href="{{ URL::asset('your_project_name/css/style.css') }}" rel="stylesheet">
I want to use Agile Uploader to resize images before upload on my server.
But when I try to upload image on server it does nothing... I mean that there is no image in POST data. I've checked POST and there is no items at all. What am I doing wrong?
Here is my code:
<html>
<head>
<script type="text/javascript" src="/static/js/jquery1.6.4.min.js"></script>
<script src="/static/js/jquery.flash.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/static/css/unrelated.css" />
<script src="/static/js/agile-uploader-3.0.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/static/css/agile-uploader.css" />
</head>
<body>
<form action="/test" method="post" id="singularDemo" enctype="multipart/form-data">
<div id="single"></div>
</form>
Submit
<script type="text/javascript">
$('#single').agileUploaderSingle({
formId:'singularDemo',
progressBarColor:'#3b5998',
flashVars:{
firebug:true,
form_action:'/test',
}
});
</script>
</body>
</html>
Most code part taken from their demo.
Thanks in advance!
you have to edit the process.php file, where you'll define the remote upload folder!
and then modify the form_action in: "form_action: process.php"