Develop Reference

How to use laravel-jsvalidation with vite

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?

Implement mdbootstrap with laravel project to make it work in IE11

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.

Yajra employee:140 Uncaught TypeError: $(...).DataTable is not a function

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

Django admin many to many horizontal filter not working

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>

Uncaught TypeError: undefined is not a function initslider-1.js:1 (anonymous function) AmazingSlider

I have gone through the other posts also. But I didn't get any solution finally I have my own question.
I am trying to add Jquery image slider into my project, I am using Codeigniter Platform as I am running this slider stand alone it is working fine. But not in CI it throws error Uncaught TypeError: undefined is not a function initslider-1.js:1
(anonymous function). Anybody will suggest me any help.
see following are the js files which I am including.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="sliderengine/jquery.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>
Click here to see the ref.

try removing one of the jQuery script-tags.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script src="sliderengine/jquery.js"></script> -->
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>

Why are you using two jQuery at the same page. try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>