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.
Related
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 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
I have the following laravel layout template:
<html lang="en">
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ URL::asset('css/libs.css') }}" rel="stylesheet">
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">
#yield('styles')
#yield('scripts.header')
</head>
<body>
<div id="app">
<div class="main-container">
<div class="ad ad-leaderboard hidden-xs">
<script>
function onSubmit(token) {
$("#register-form").submit();
}
</script>
</div>
#include('layouts.partials.header')
<div id="main">
#yield('content')
</div>
#include('layouts.partials.footer')
</div>
</div>
<!-- Jquery, Bootstrap, Moment, DatetimePicker, Sweetalert, Select2 -->
<script src="{{ URL::asset('js/libs.js')}}"></script>
<!-- Custom -->
<script src="{{ URL::asset('js/app.js')}}"></script>
#yield('scripts.footer')
</body>
</html>
In <script src="{{ URL::asset('js/app.js')}}"></script> I have the following to set up Vue:
const app = new Vue({
el: '#app'
});
Now I have some google add scripts I want to include within my content but I get
[Vue warn]: Error compiling template: error in console.
I only use Vue components on a few pages so should I move the vue declaration above out of app.js and move to the dedicated pages or is there a better alternative to organize this so that I can keep the declaration in the main layout page without having to keep repeating it on separate pages yet still have the ability to inline javascript?
This is because of the <script> tag inside your #app div.
<script>
function onSubmit(token) {
$("#register-form").submit();
}
</script>
You should move this to the end of the document with the other JS.
EDIT
Alternatively, you might look at something like this to allow you to add scripts to Vue components.
https://github.com/TheDynomike/vue-script-component
Then you could create a Vue component for each ad script, which you could drop into the page where you need it.
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?
I am trying to define my page specific Javascript in my blade file by defining a separate section for it in the file. I can add the same jQuery code in the app.js file and it works without issue, but when I put it in the blade file I get an error of
Uncaught ReferenceError: $ is not defined
Layout file - app.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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<!-- Nav Stuff -->
</nav>
<!-- End Navigation -->
<!-- Body -->
<div class="content-wrapper">
<div class="container-fluid">
#yield('content')
</div>
<footer class="sticky-footer">
<!-- footer stuff -->
</footer>
</div>
#yield('script')
</body>
</html>
Content Page - page1.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<!-- Page Stuff -->
</div>
#endsection
#section('script')
<script>
$(document).ready(function()
{
alert('hello world');
});
</script>
#endsection
I would prefer not to put all of my Javascript in the single app.js file, I would like to be able to use this section fine. Straight Javascript works fine here, but the jQuery does not.
edit:
Here is the app.js file that includes the jQuery library.
require('jquery');
require('./bootstrap');
require('jquery-easing');
// Administration Controller - Add System Type -> This code works just fine.
var numSysDataRows = 5;
$('#add-customer-information').click(function()
{
$('#system-customer-information').append('<div class="form-group"><label for="col'+numSysDataRows+'">System Data:</label><input type="text" name="col[]" id="col'+numSysDataRows+'" class="form-control" /></div>');
numSysDataRows++;
});
If I look at the source code and check the app.js file from the web server, I do see that jQuery is loaded into the app.js file.
Laravel loads jQuery by default, so it will be there unless you removed it from your complied app.js (running an npm commands to compile from your assets). The issue is that you are deferring this script. jQuery is being loaded after the page JavaScript is run.
Try removing the defer command.
If that doesn't work, see if jQuery is in your app.js file. If not, use a cdn or copy it to your public folder.
You don't need to remove "defer" from <script src="{{ asset('js/app.js') }}" defer></script>.
Paste jquery script tags below app.js then,
install npm
remove vue template in resouces/js/app.js
type "npm run dev" and hit enter
repeat #3 2 times
Then no Uncaught ReferenceError: $ is not defined will appear
NPM
Yes, I added jquery script tags
Jquery script tags
Remember that in the case that you are using the jquery CDN, you can try to put it in your head tag, I had that same problem and I have been able to solve it this way
I don't see you add file bootstrap and jquery. Have you added jQuery and Bootstrap file yet?
If not you can see in here : jquery Bootstap