I am encountering problems when trying to include the jQuery date/time picker in my appointment booking system. I have followed the Laravel convention as best I could and seem to still have no luck.
File path for css file: public/css/file_is_here
File path for js: public/js/files_are_here
A snippet of the code I tried to reference the files is below:
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/css/jquery.datetimepicker.min.css') }}"/>
<script type="text/javascript" src="{{ URL::asset('/js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('/js/jquery.datetimepicker.full.min.js') }}"></script>
<script>jQuery('#datetimepicker').datetimepicker({
step: 30
});</script>
The input field is also shown:
<div class="col-md-6">
<input id="datetimepicker" type="text" class="form-control">
</div>
Any help appreciated.
**Discovered weird bug whenever the page loads in the calendar will display for a second before disappearing. Could this be due to some other js, jquery or css loading in? **
Assets are typically kept in packages. If you are in public/css and public/js then you can treat "public" like a webroot.
src="/js/jquery.js"
<script src="{{ asset('public/plugins/datetime/jquery.datetimepicker.full.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('public/plugins/datetime/jquery.datetimepicker.css') }}" />
it's work with me
Related
When I use defer on app.js, there is a js plugin not working properly.
If I remove defer, although the plugin works, but there is a warning to ask me to use defer, and I don't know what to do.
// resource/js/app.js
require('./bootstrap');
import Alpine from 'alpinejs';
import mask from '#alpinejs/mask'
Alpine.plugin(mask);
window.Alpine = Alpine;
Alpine.start();
// webpack.mix.js
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
require('autoprefixer'),
]);
This is the test.blade.php
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<livewire:styles />
<livewire:scripts />
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<input x-mask="99/99/9999" placeholder="MM/DD/YYYY">
</body>
</html>
If I use <script src="{{ asset('js/app.js') }}" defer></script>, then the x-mask plugin will not working.
If I remove defer and use <script src="{{ asset('js/app.js') }}" ></script>, the x-mask works, but there is a warning Alpine Warning: Unable to initialize. Trying to load Alpine before is available. Did you forget to adddeferin Alpine's tag? on the chrome browser console.
What should I do? Any suggestion? Thank you!
Thanks to #Dauros, it works after I put an x-data directive to a parent element. (I also put the defer to the app.js)
<div x-data="{ date: '' }">
<input x-mask="99/99/9999" placeholder="MM/DD/YYYY" x-model="date">
</div>
<script src="{{ asset('js/app.js') }}" defer></script>
It doesn't mention on the alpineJS x-mask plugin page.
And I finally understand what the document said about the x-data in the Start Here and x-data.
Everything in Alpine starts with the x-data directive.
Everything in Alpine starts with an x-data directive. Inside of x-data, in plain JavaScript, you declare an object of data that Alpine will track.
Hello everyone i am quite lost right now, in my other react projects onClick is working just fine but now with my new app laravel with react i cannot do an Onclick this is crazy i dont know where the problem is because i have no error in the console...
EDIT
I finally found the problem, i imported twice a js file in my layout
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="stylesheet" href="{{ asset('css/bootstrap.css')}}">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>
<body>
#if (Auth::user())
#include('inc.navbar')
#endif
<main class="py-4">
#yield('content')
</main>
<script type="text/javascript" src="js/app.js"></script>
can you try please to add to the button tag ( type="button" ) , if its not working try to remove the taskform component to check if there is error in the component
I also just faced this problem when using laravel 8 mix react 17, the solution is to downgrade to react 16.
I'm trying to use a javascript autocomplete function.
I'm loading the following files at the top of the HTML file.
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
However, I'm still getting this error: App.js:25 Uncaught TypeError: $(...).autocomplete is not a function. It's looking in my javascript file for the application.
I've actually tried to add the autocomplete script to that javascript file, but it's not solving the problem.
I'm new to Javascript so this could be a dumb question, but I legitimately have no idea how to solve it.
Here is the top of my template in loading the files:
{% extends 'layouts/base.html' %}
{% load static from static %}
<link
href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" >
</script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Static is loading my jquery file.
I'm using Pixel Admin template, which is not a current version of now I think, to implement a jinja2 web application that using an old version of the select2 dependency version 3.5.1. It is working fine except when viewing it on iso device, that virtual keyboard is always showing on touch select2.
I know that this bug has already been fixed in select2 latest version 4.0.6, so I want to change it to this version.
layout.html
<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie pxajs">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Application</title>
<script src="{{ url_for('static',filename='js/jquery-1.11.1.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/pixel-admin.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/rtl.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/themes.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/pages.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/widgets.min.css') }}">
<script src="{{ url_for('static',filename='javascripts/dynamic_con.js') }}"></script>
<!-- Remove select2 old version -->
<!-- <script src="{{ url_for('static',filename='js/select2.js') }}"></script> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="{{ url_for('static',filename='js/bootstrap-datepicker.js') }}"></script>
<script src="{{ url_for('static',filename='javascripts/toolbar.js') }}"></script>
<script>var init = [];</script>
{% block content %}
{% endblock %}
<script src="{{ url_for('static',filename='javascripts/pixel-admin.min.js') }}"></script>
<script type="text/javascript">
init.push(function () {
})
window.PixelAdmin.start(init);
</script>
</body>
</html>
Centre.html
{% extends "layout.html" %}
{% block content %}
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
{% endblock %}
when open the URL route http://127.0.0.1:5000/Centre, the select2 does not open at all ios devices but working fine on desktop view. Unless I remove main js file of pixel admin <script src="{{ url_for('static',filename='javascripts/pixel-admin.min.js') }}"></script>, the select2 is working fine, but other functionalities of theme will be missing as well as the main js script was removed. Therefore, this is not a solution I am looking for.
My question is how can replace select2 of version 3.5.1 in template pixel admin with select2 version 4.0.6 to make it working well on an ios device? Thanks.
Added:
I just found that in file pixel-admin.min.js which come along with themes consists of many other plugins including select2. I saw it contains an exact script of select2 script inside it. That might be a reason that I could not override it with a newer version of select2 because as said if I comment out file pixel-admin.min.js, it worked but other plugins and function inside that js file will be gone as well, I don't that. Therefore how can I overcome this trade-off? Please kindly help, I need that so badly, Thanks.
Just find the corresponding code inside pixel-admin.min.js and comment it.
Then, include Select2 version 4.0.6 in your html, as you would normally do it:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
and
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
Better try with Select2 version 4.0.5 because 4.0.6 is rc.
Have a look at the Select2 release page.
To disable Select2 in PixelAdmin and based on the file you posted, lines 1473-1475
if (window.Select2 !== undefined) {
return;
}
Change to
return;
if (window.Select2 !== undefined) {
return;
}
Which version of PixelAdmin are you using?
On a previous question i explained that i wanted to store images (at least file name) in a Symfony entity.
I followed the answers and installed ComurImageBundle in my project, by following the tutorial in the Readme.
It seems to work well since it display the button to choose the image, and the image's slot. But the button does nothing. The console print me an error :
TypeError: $(...).fileupload is not a function
It append on the $('#image_upload_file').fileupload({... line in the comur.imageLibrary.js file.
I know that the import order are tricky. I did mine like this:
<head>
...
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
{% include "ComurImageBundle:Form:croppable_image_modal.html.twig" %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
{my form with the button}
...
Hope that someone has already faces this issue ...
Thank you for your answers.
I saw your comment in the other post and choose to answer you here, If you are using twig forms and blocks so
1/ You have to call the Comur image under "body block" like this
{% block body -%}
{% include "ComurImageBundle:Form:croppable_image_modal.html.twig" with {'include_jquery': false, 'include_bootstrap': false} %}
(your form)
....
{% endblock %}
2/ For Js files calling, you have to call them under "javascript block" , and don't forget the route web call, like this :
{% block javascripts %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
<script>var routeweb = "{{ app.request.getSchemeAndHttpHost() }}{{ app.request.getBaseURL() }}";</script>
{% endblock %}
3/ And for to be shure that the image will be uploaded, try to access your form under web directly, means access to
localhost/your_project/web/your_route/new
althought this
localhost/your_project/web/app_dev/your_route/new