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.
Related
I have a VUE page where I try to render a badge. It shows the text but only white. I tried also with bootstrap badges with the same results.
This is the code of the page:
<!DOCTYPE html>
<html>
<head>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
</head>
<body role="document">
<div class="panel-body">
<div id="start">
<h2>b-badge: <b-badge variant="primary">b-badge</b-badge> {{foo}} </h2>
class: <span class="badge">span</span>
</div><!-- start -->
</div>
<script src="/js/vue/start.js"></script>
</body>
</html>
This is the javascript with VUE code loaded from start.js before.
var start = new Vue({
el: '#start'
,
data: {
foo: "bar"
}
});
VUE loads because I spot the result of the foo variable in the page. But the badge will only show white text no matter what class I try to load. Both with bootstrap and bootstrap-vue.
This is what is rendered:
If I select the text I can see there is a white text where the badge should be.
I tried many other VUE code and everything works fine including a navbar. I also tried to import the Badger but I can't manage to do that. I only get that error:
"import declarations may only appear at top level of a module"
My guess is as I am using CDN loaded VUE I don't need to do the import. Also I searched if I have to load the Badge javascript or CSS from another link at the header but I can't find it anywhere.
Any hints ? Thank you very much.
The issue it with the version of Bootstrap you're importing.
The following line
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.css" />
will import the latest version of Bootstrap, which is Bootstrap 5, released a couple of weeks ago.
While BootstrapVue is currently built for Bootstrap 4.5.3.
So if you change the import to specifically import version 4.5.3, it should work correctly.
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.css" />
new Vue({
el: "#start",
data() {
return {
foo: "bar"
}
}
})
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
<div id="start">
<h2>b-badge:
<b-badge variant="primary">b-badge</b-badge> {{ foo }} </h2>
class: <span class="badge">span</span>
</div>
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 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
Time ago we purchased this template and we have used it in an angularJS application without any problem.
Now for another project we have switch to Angular 2 and we want use the same theme but we got this weird behaviour: sometimes works as expected but most of the times isn't working.
We have inspected the code using the firefox console and this is the result when is working:
And this is the output console when is not working:
For an (mine) unknown reason sometimes materialize.min.js is not listening for events.
Unfortunately due to copyright issue I can't post the materialize.min.js source code but I can post mine:
index.html
<html>
<head>
<base href="/">
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/layouts/style-fullscreen.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!--materialize js-->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<header-navbar></header-navbar>
<div id="main">
<!-- START WRAPPER -->
<div class="wrapper">
<navbar></navbar>
<section id="content">
<div class="container">
<router-outlet></router-outlet>
</div>
</section>
</div>
</div>
`
})
export class AppComponent { }
EDIT
Even if I use a local copy of jQuery is not working properly.
Provided your materialize.min.js relies on jQuery, I would suspect the reason it works sometimes and not others is that your CDN link is not always loading correctly. I might suggest downloading a copy of jQuery and loading it from a local source that you control.
Edit: When you say "not working" when loaded from a local source, do you mean it is still working sometimes but not consistently? Or do you mean not working at all?
My cordova app is not worthy any more.
It shows up angular expressions on application run.
shows white screen at times at launch
I think it might be issue of JS dependencies.
I posting my JS dependencies order
<!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js" type="text/javascript"></script>
<script src="lib/angular/angular.js" type="text/javascript"></script>
<script src="lib/onsen/js/onsenui.js" type="text/javascript"></script>
<script src="lib/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD5sCjiaGLF8i8zul_W4GBsnMBY9mZTdB4&libraries=places"></script>
<!-- Cordova reference -->
<script src="cordova.js"></script>
<script src="scripts/index.js" type="text/javascript"></script>
<script type="text/javascript" src="bower_components/ngCordova/dist/ng-cordova.js"></script>
<!-- CSS dependencies -->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
<!-- <link rel="stylesheet" type="text/css" href="lib/pace.theme.css"> -->
<!-- CSP support mode (required for Windows Universal apps) -->
<link rel="stylesheet" href="lib/angular/angular-csp.css" />
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="animate.css" />
screenshot of issue
Is this because of wrong order of the dependencies or internet problems or anything I'm missing or I could do to work it perfectly
This might be a little late, but this can be solved by doing 2 things. 1.) Increase the time the splash screen is shown via the config.xml file to about 5000 ms. 2.) In the ons.ready() function, add: navigator.splashscreen.hide();
This shows the splashscreen, hiding the white screen as your libraries load, and then hides it when the app is ready. This solved my problem.