I had been using laravel-jsvalidation with mix, but now am trying to upgrade to vite. The problem is that vite only packages modules, and laravel-jsvalidation is not one.
For example, in order for laravel-jsvalidation to work, you must include the following items in the blade.
<script src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
{!! JsValidator::formRequest('App\Http\Requests\NewPatientQuickRequest') !!}
The first line (jsvalidation.js) depends on jQuery by using $.extend( $.fn, ...). The second line depends on the jsvalidation.js script and renders into something like <script> jQuery(document).ready(function(){ $.validate... })</script>.
So, the problem is that if jsvalidation.js is loaded as a module (i.e. with <scriot type="module"), the JsValidator is out of scope, and I get Uncaught TypeError: Cannot read properties of undefined (reading 'apply')
I even tried sidestepping the whole vite process by including the scripts directly. Doesn't work.
<script src="/js/jquery-3.6.3.min.js"></script>
<script src="/js/jquery-ui-1.13.2/jquery-ui.js"></script>
<script type="module" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
{!! JsValidator::formRequest('App\Http\Requests\NewPatientQuickRequest') !!}
Has anyone got this working?
Related
I'm using the timezone-picker and I have a problem adding the following libraries:
moment-timezone.min.js
timezone-picker.min.js
I'm adding the libraries like the following:
<script type="text/javascript" src="{{ asset('js/timezonepicker/moment-timezone/builds/moment-timezone.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/timezonepicker/timezone-picker/dist/timezone-picker.min.js') }}">
I ensured that these files were defined correctly and could be accessed by the web page.
I have the following errors in my source code. Please help me to solve them.
Uncaught TypeError: i is undefined
[moment-timezone.min.js:1:207](moment-timezone/builds/moment-timezone.min.js)
Uncaught TypeError: e is undefined
value timezone-picker.min.js:17
n timezone-picker.min.js:17
[timezone-picker.min.js:17:1166](timezone-picker/dist/timezone-picker.min.js)
I also added jquery to my laravel app.js and it's imported at the beginning of the page.
I'm using Laravel 5.4 and recently started to use mdbootstrap (pro).
While everything works in Chrome or Firefox, Internet Explorer 11 makes problems.
I can't get the JavaScript part working. Here is how I implemented it (jquery is imported by bootstrap.js):
master.blade.php (bottom)
<script src="{{ URL::asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/mdbootstrap/mdb.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/mdbootstrap/addons-pro/stepper.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/mdbootstrap/addons/datatables.min.js') }}"></script>
<script>
$(function () {
$('.stepper').mdbStepper();
$('.mdb-select').materialSelect();
});
</script>
Here are some examples for errors that are thrown:
On every page:
SCRIPT438: The object doesn't support the property or method "materialSelect".
SCRIPT1014: invalid character
On a page that uses the stepper:
The Object doesn't support the property or method "easeOutQuad".
Well you get the point. It seems that IE doesn't recognize the imported functions.
On the landing page:
"WOW" is undefined.
I finally made it by transpiling it with babel on my own.
This is followed by two other errors but for those I will create a new question.
First off, I have to precise that I'm quite new to Laravel and that I have a lot to learn.
In one of my controller I need to call a Javascript function. To do so, I simply
echo "<script>triggerPixel();</script>";
I'm just unsure about where to store my Javascript file containing that function.
From what I got for the moment is that I should use elixir to add a file with something like this in the gulpfile.js :
mix.scripts('myscript.js');
Is this the right way to do it or should I simply add a file in resources/assets/javascripts ?
I'm a bit lost and some explanation would be welcome.
Thanks !
Put your actual .js file inside public/js folder
and then, put all your js reference in one file, for example footer.blade.php inside the resources/views folder.
Inside footer.blade.php :
<script src="{{ URL::asset('js/jquery-3.2.1.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/custom.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/app.js') }}"></script>
and then just call the footer inside one of your blade view using: #include ('footer')
I am using laravel 5.4 and Yajra Datatable but i cannot make it work .. I am having a problem with this "Uncaught TypeError: $(...).DataTable is not a function"
here is my code
<script src="https://datatables.yajrabox.com/js/jquery.min.js"></script>
$(function() {
$('#users-tbl').DataTable({
processing: true,
serverSide: true,
ajax: 'http://localhost/bostonbakers/public/employee/table',
columns: [
{data:'id'},
{data:'email'},
{data:'password'}
]
});
});
<script src="{{ asset('js/app.js') }}"></script>
What should i do?
I think this error occours because of Order of scripts. It is important when they are dependent on libraries or other scripts.
Any jQuery related code needs to be included after jQuery.js... that means plugins and any code you write that uses jQuery. Similarly any code you write that uses a plugin must have the plugin loaded before your code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="/js/jquery.dataTables.js"></script>
Also make sure you have only include jQuery once in a page...not once per plugin as some occasionally do
I'm using a many-to-many field in my django model, exposing it on the admin interface and trying to use a filter_horizontal widget. Now, I've added some custom html to my change_form.html so simply adding a filter_horizontal = ('teams', 'players', ) is not helping.
I googled around, and found out that the widget requires some default js, so I went ahead and included the following in my change_form.html
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectBox.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectFilter2.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
I see the following error in my browser's console right now:
Uncaught ReferenceError: interpolate is not definedinit #
SelectFilter2.js:47 (anonymous function) # (index):1275
Digging into the SelectFilter2.js, I found that it requires a file addevent.js. I'm guessing this is where the interpolate function would've been defined since all other imports are satisfied. But I cannot find any such file in my project, and google did not help out on this. Can anyone help me here? What am I missing?
So for whatever it's worth, the horizontal filter didn't work, and this did the job for me easily so I went ahead with this:
raw_id_fields = ('teams', 'players', )
Also, please don't forget to include the following in your custom template for this widget to work:
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>