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.
Related
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?
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.
Here I have included the javascripts but I got mime type is not valid:
<script type="text/javascript" src="{{ asset('/dashboard/js/components.js') }}"></script>
<script type="text/javascript" src="{{ asset('/dashboard/js/custom.js') }}"></script>
<script type="text/javascript" src="{{ asset('/dashboard/vendors/slimscroll/js/jquery.slimscroll.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/dashboard/vendors/raphael/js/raphael-min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/dashboard/vendors/d3/js/d3.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/dashboard/vendors/c3/js/c3.min.js') }}"></script>
And I am getting the error below:
The script from “http://localhost/Project/public/dashboard/vendors/flotchart/js/jquery.flot.pie.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.[Learn More] home
Loading failed for the <script> with source “http://localhost/Project/public/dashboard/vendors/flotchart/js/jquery.flot.pie.js”. home:2091:1
The script from “http://localhost/Project/public/dashboard/vendors/flot.tooltip/js/jquery.flot.tooltip.min.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.[Learn More]
What is the problem? Please help.
What worked for me: After a half day research i tried just to edit the JS file. Just put a new line (ENTER) after the first (commented) line and saved it.
It was jquery minified file with a comment on the beginning.
In Firefox "Inspector / Network" the .js was displayed as 404 and MIME (text/html).
The strange thing was that the other .js files in the same directory were OK.
Hope that helps.
I faced the same problem for Node js application. Your scripts path starting with
/dashboard/js/components.js
so basically you have to use
const app = express()
const publicDirectoryPath = path.join(__dirname, '../public/')
app.use(express.static(publicDirectoryPath))
This is for Node.js users:
Use 404 middleware or any other last
app.use(function(req,res,next){
res.send('page does not exist')
})
If you use this before
app.use(express.static(path.join(__dirname,'static')))
It will throw the same error.
I've got a fully functional site. It works in every browser, except IE.
Here is my
<script src="build/JSXTransformer.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/md5.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/functions.js"></script>
<script type="text/jsx" src="components/newsfeed.js"></script>
<script type="text/jsx" src="components/services.js"></script>
<script type="text/jsx" src="components/footer.js"></script>
<script type="text/jsx" src="components/app.js"></script>
On Chrome/Firefox I get the site running, on IE11 I can see, that the app.js was downloaded twice. And apparently not started.
There was nothing in IE11 console, but later found out, that I was missing some security update from http://www.microsoft.com/en-us/download/confirmation.aspx?id=44431 .
After installing that I can see IE complaining about Newsfeed not defined.
It is caused by
React.render(
<NewsFeed tagFilter={tagFilter}/>,
document.getElementById('newsFeed')
);
being translated into (visible in IE console)
React.render(
React.createElement(NewsFeed, {tagFilter: tagFilter}),
document.getElementById('newsFeed')
);
And the browser than complains about missing ;
Any clues what might be wrong? It works in web browsers. Only IE does this.
I'm having some issues with prettyPhoto on one of my clients website. Here is the link for reference: http://www.browardmicrofilm.com/pages/kodak-vizit-essential.html
I've used prettyPhoto on multiple other websites without issue. However for some reason, this website just doesn't want to perform the script properly. Instead of opening an image in the lightbox clone, it simply opens it in a new page. Perhaps it has something to do with the hosting but either way, wanted to see what professionals like you think!
I'm using Firefox 26 (Mac version) and I used Firebug to determine the error:
TypeError: $ is not a function
$(document).ready(function(){
I've tried numerous solutions, including one that made me change "$" to "window.jQuery and then for some reason the next line in the code creates the same error.
Here's the my code for those of you that wish to skip the entire page source code:
In my header:
<link href="../prettyPhoto.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
The final script just before the closing body tag:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_rounded',
});
});
</script>
I know my links are good, which is why I'm not including them.
Vanilla jquery needs to be declared before any library built on top of it
<!--first, jquery-->
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<!--then the rest-->
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Error below is saying that jQuery is not loaded.
TypeError: $ is not a function
$(document).ready(function(){
Check your resources, my guess is that your paths are case sensitive and libraries are not being properly loaded.
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
Check your resources.
Make sure that jQuery is loaded before the plugin is loaded.
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Ultimately I abandoned the prettyPhoto javascript and went with an alternative. Lightbox 2.0:
http://lokeshdhakar.com/projects/lightbox2/
It works just as I'd like and no problems.