So, I am facing some problem on loading vuejs component on my blade engine. when I added vuejs component it either load the vuejs 'bootstrap' or load the public/js/app.js depending what is commented out. this is the app.blade.php code
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Global Shopping Mall</title>
<!-- Scripts -->
<!-- <script src="{{ mix('js/app.js') }}" ></script> -->
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="/src/jquery.exzoom.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="/src/jquery.exzoom.js"></script>
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet" defer >
<style>
body{
background-color: white;
}
.custom_navbar{
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-sm navbar-light bg-white shadow-sm" style="height: 60px;">
<img src="{{asset('images/gsm.jpg')}}" alt="GSM Logo" class width="150px" height="65px">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('SignUp') }}</a>
</li>
#endif
#if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#endif
#if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login as Guest') }}</a>
</li>
#endif
#else
<li class="nav-item">
<a class="nav-link" href="/home"><strong>Home<strong></a>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{"Hi, "}}{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/user_profile">
User Profile
</a>
<!-- <a class="dropdown-item" href="/product_details">
Product Details
</a> -->
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#if(Auth::check())
#include('layouts.gsm_nav')
#endif
<main>
#yield('content')
</main>
#extends('layouts.footer')
</div>
<style>
.custom_nav{
padding-right: 50px
}
/* .v-application--wrap {
min-height: 0;
} */
</style>
<script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
if I comment this line
script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script>
then its load my blade style without vuejs element but if not then its load only vuejs not public script
heres my vuejs app.js code and bootstrap.js code
app.js
require('./bootstrap');
window.Vue = require('vue');
// Main Screens Components
Vue.component('user-list', require('./components/UserList.vue').default);
Vue.component('main-screen', require('./components/Main.vue').default);
// Streaming Components
Vue.component("broadcaster", require("./components/Broadcaster.vue").default);
Vue.component("viewer", require("./components/Viewer.vue").default);
// Vue.component('video-chat', require('./components/VideoChat.vue').default);
Vue.prototype.$userId = document.querySelector("meta[name='user-id']").getAttribute('content');
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
});
Echo.private('chat')
.listen('MessageSent', (e) => {
this.messages.push({
message: e.message.message
});
});
bootstrap.js
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
});
this is the element code
<div class="app">
<v-app>
<main-screen user-name="{{ Auth::user()->name }}"></main-screen>
<meta name="user-id" content="{{ Auth::user()->id }}">
<meta name="user-name" content="{{ Auth::user()->name }}">
<meta name="csrf-token" content="{{ csrf_token() }}">
<button class="open-button" type="button" onclick="openForm()"></button>
</v-app>
</div>
Want this style with vuejs element
Red mark is the element
i am stuck.
the issue I can see your code is you're putting your blade code inside <div id="app"> </div> but the thing is whenever you include <script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script> it will remove your any html/blade code and put vue.js code inside that div.
So you've to do something like below:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Global Shopping Mall</title>
<!-- Scripts -->
<!-- <script src="{{ mix('js/app.js') }}" ></script> -->
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="/src/jquery.exzoom.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="/src/jquery.exzoom.js"></script>
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet" defer >
<style>
body{
background-color: white;
}
.custom_navbar{
height: 100px;
}
</style>
</head>
<body>
<div>
<-- put your blade/html content here -->
<div id="app"></div>
<-- Create a div with id of app to render vue.js content, like above -->
</div>
<style>
.custom_nav{
padding-right: 50px
}
/* .v-application--wrap {
min-height: 0;
} */
</style>
<script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
Do let me know if you need any other help in same scenario.
Related
i am trying to find out why when i use a moblile device or resize the screen to small, when you press the toggle button the links come but no background color??
I am using bootstrap, any idea on how to fix this?
If you would like to see for yourself visit https://www.makeyourweb.co.uk/
The code in my head is:
<head>
<script data-ad-client="ca-pub-1761720526329589" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Required meta tags -->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="lib/typed.js" type="text/javascript"></script>
<script src="assets/demos.js"></script>
<link href="assets/demos.css" rel="stylesheet"/>
<link href="assets/css/contan.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-175922448-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-175922448-1');
</script>
<meta name="description" content="We offer innovate and agile website solutions to local businesses to allow them to have a professional web presence. We offer flexible and bespoke solutions!">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./assests/css/linearicons.css" />
<link rel="shortcut icon" href="./assets\img\icons\favicon.ico" />
<link rel="stylesheet" href="./assets/css/animate.css" />
<link rel="canonical" href="https://makeyourweb.co.uk/">
<link rel="stylesheet" href="./assets/css/price.css">
<link rel="stylesheet" href="./assets/css/totop.css">
<link rel="stylesheet" href="./assets/css/linearicons.css" />
<link rel="stylesheet" href="./assets/css/magnific-popup.css" />
<link rel="stylesheet" href="./assets/css/jquery-ui.css" />
<link rel="stylesheet" href="./assets/css/nice-select.css" />
<link rel="stylesheet" href="./assets/css/main.css" />
<link href="./assets/img/icons/MetroUI_OS_Apple.png" rel="apple-touch-icon" />
<link href="asset/demos.css" rel="stylesheet"/>
<link href="lib/typed.js" rel="javascript">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
var typed3 = new Typed('#typed3', {
strings: ['standard websites', 'premium websites', 'email accounts'],
typeSpeed: 45,
backSpeed: 75,
smartBackspace: true, // this is a default
loop: true
});
</script>
<title>Make Your Web | Get a website today | No hidden costs</title>
</head>
and my nav bar code is
<!-- navbar -->
<?php //include('database/connection.php')?>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-theam text-white">
<div class="container">
<a class="navbar-brand m-0 p-0" href="/">
<img src="./assets/img/logos/logo.png" alt="picture" class="img-fluid" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav text-uppercase ">
<li class="nav-item">
<a class="nav-link active" href="/">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://makeyourweb.co.uk#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://makeyourweb.co.uk#services">Services</a>
</li>
<li class="nav-item pl-3">
<a class=" btn btn-outline-warning" href="/quote">Get a quote</a>
</li>
</ul>
</div>
</div>
</nav>
if you can help out that would be great thanks!
Why not try giving it background color in your css
.navbar-collapse {
background: #444;
}
Have you tried something like that?
div.navbar-collapse{
background: "your color";
}
You can add an !important to crush the predefined bootstap styles if needed...
div.navbar-collapse{
background: "your color" !important;
}
Please am new in using Laravel + Vue. I have registered a component but it is failing to display content in my blade template. Please i need assistance on how to properly do that in Laravel and Vue?
Code below
layout.app
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>
welcome.blade.php
#extends('layouts.app')
#section('content')
<div>Vue Js Todo App</div>
<articles></articles>
#endsection
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import Vue from 'vue';
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('articles', require('./components/Articles.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
Content in my Articles.Vue
<template>
<div>
<form>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>
</div>
</form>
</div>
</template>
Please i need assistance..Its not working for me.
Looks like everything is done correctly! Did you build your changes after making the changes?
If not, please do that using npm run prod, this will compile the javascript and scss assets in public app.css and app.js file. which you already include in your blade layout file.
If it still not working, please share your webpack.mix.js file.
I have a laravel project in which I want to use jQuery UI for smooth transitions and effects. I added the jquery-ui.js to the public/js folder. The same as my current jQuery file which works as intended.
I imported the javascript file in my blade template like so:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/animate.css') }}" rel="stylesheet">
<link href="{{ asset('css/jquery-ui.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
<script type="text/javascript" src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/main.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>
When I try to call the toggle function on a button click I get the following error:
app.js:14040 Uncaught TypeError: jQuery.easing[this.easing] is not a function
While regular jQuery works fine, jQuery UI does not.
Main.js
$(document).ready(function() {
$('#slide-next').on('click', function() {
$('.register-form-user').toggle("slide", { direction: "left" }, 1000);
});
});
All my paths are correct. When downloading the jQuery UI file I made sure I selected all the available options including easing.
What is causing this error?
Bootstrap.js
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
jQuery is already included in your app.js bundle from the boostrap.js file. The last call to app.js in your html overrides the previous instance of jquery, making it load after jQuery UI. jQuery must be loaded before jquery-ui.
Change this
<script type="text/javascript" src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/main.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
To this
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/main.js') }}"></script>
and remove the deferred script tag from your <head> section
I have this situation where I want to pass data to a Bootstrap 4 modal. I have a list of records with their own links to edit and delete. Since I want to load a modal confirmation to delete a specific record, I need to pass several parameters, such as the ID for the destroy route.
I have tried the solution of this Laracasts forum. However, first of all, the script does not work, since the console.log does not output anything.
Note: I am using the app.js, so probably it has to do with the issue, but I haven't found a hint to solve this.
Here is my accounts.blade.php:
#extends('layouts.app')
#section('title','Accounts list')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="card">
<div class="card-header">
My accounts
</div>
<div class="card-body">
<h5 class="card-title">Accounts list</h5>
<h4>Create a new account</h4>
<hr>
<ul>
#forelse ($user->accounts as $account)
<li>
{{ $account->name }} || Edit |
<button type="button" class="btn btn-outline-danger delete-company"
data-toggle="modal"
data-target="#exampleModal"
data-id="{{$account->id}}"
data-url="{{ route('accounts.destroy',['id'=>$account->id]) }}"
data-name="{{$account->name}}"
>
Delete
</button>
{{--Delete </li>--}}
{{--read this reference: https://medium.freecodecamp.org/custom-confirm-box-with-bootstrap-4-377aa67723c2--}}
<hr>
</li>
#empty
<li class="card-text text-danger">You do not have an account yet.</li>
#endforelse
</ul>
</div>
</div>
</div>
</div>
</div>
{{--MODAL delete confirmation modal--}}
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Are you sure to delete the <span id="accountname"></span> account?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Everything will be removed.
</div>
<div class="modal-footer">
{{--https://stackoverflow.com/a/33688683/1883256--}}
<form id="deleteform" action="" method="POST">
#csrf
#method('DELETE')
{{--
{{ csrf_field() }}
{{ method_field('DELETE') }}
--}}
<button type="submit" class="btn btn-outline-danger btn-sm">Yes, delete</button>
</form>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
#endsection
#section('js')
{{--Ver: https://laracasts.com/discuss/channels/laravel/how-to-pass-value-to-bootstrap-modal-window?page=1#reply=508543 --}}
<script>/*NOTHING HERE IS WORKING! WHY???*/
$(document).ready(function () {
console.log('testing'); // NOT WORKING!
// For A Delete Record Popup
$('.delete-company').click(function () {
console.log('clicked!'); //NOT WORKING!!!
var id = $(this).attr('data-id');
var name = $(this).attr('data-name');
var url = $(this).attr('data-url');
$("#accountname").append(name);
$("#deleteForm", 'input').val(id);
$("#deleteForm").attr("action", url);
});
});
</script>
#endsection
layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }} - #yield('title')</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
{{--Favicon--}}
<link rel="shortcut icon" href="{{ asset('img/favicon_io/favicon-16x16.png') }}">
</head>
<body>
<div id="app">
#include('layouts.partials._nav')
<div class="container">
<main class="py-3">
{{--Flash messages--}}
#include('layouts.partials.flashMessages._messages_x')
#include('layouts.partials.flashMessages._messages')
#yield('content')
</main>
</div>
</div>
</body>
</html>
As for the layouts app.blade.php
I have tried both <script src="{{ asset('js/app.js') }}" defer></script> and <script src="{{ asset('js/app.js') }}"></script> without the defer and it does not work.
Why isn't this script working at all??? Is the app.jscausing the trouble? How do I make it work?
If only I could see the console.log() working, that'd be nice!
Do one thing with proper way try this
layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }} - #yield('title')</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
{{--Favicon--}}
<link rel="shortcut icon" href="{{ asset('img/favicon_io/favicon-16x16.png') }}">
</head>
<body>
<div id="app">
#include('layouts.partials._nav')
<div class="container">
<main class="py-3">
{{--Flash messages--}}
#include('layouts.partials.flashMessages._messages_x')
#include('layouts.partials.flashMessages._messages')
#yield('content')
</main>
</div>
</div>
#stack('scripts')
</body>
</html>
accounts.blade.php
#extends('layouts.app')
#section('title','Accounts list')
#section('content')
//your content
#endsection
#push('scripts')
<script>
console.log('hello');
</script>
#endpush
You can read about Stack
I am working on incorporating a react front end with my flask website and am having trouble getting the react component to show up. I am able to use webpack to build and load in my modules without issue, but perhaps don't fully understand how to get the react side running.
Here is the html that holds the div (note, I use flask to simply extend my layout html):
{% extends 'layout.html' %}
{% block content %}
<body id = "aboutPage" data-spy="scroll" data-target = ".navbar" data-offset="60">
<div id = "date-root"> </div>
</body>
{% endblock content %}
The layout html:
<!DOCTYPE html>
<html style="padding:0px;" >
<head >
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="robots" content="noindex,follow" />
<!-- React required tags, change to production later -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Lodash for webpack -->
<script src="https://unpkg.com/lodash#4.16.6"></script>
<!-- Bootstrap CSS and JQuery -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
{% if title %}
<title>{{ title }}</title>
{% else %}
<title>Sneak Em</title>
{% endif %}
</head>
<body background = "{{ url_for('static', filename = 'shoes-dark-green.jpg') }}">
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel navbar-fixed-top" style="background-color: #000000; border-radius:0; margin-bottom:0; border:0; position:fixed; top: 0; width: 100%; z-index:999;">
<div class="container">
<a class="navbar-brand mr-4" href="{{ url_for('shop') }}">Sneak Em</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
<a class="nav-item nav-link" href="{{ url_for('calendar') }}">Schedule</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav right" style = "text-align: center;">
{% if not current_user.is_authenticated %}
<a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
<a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>
{% else %}
<a class="nav-item nav-link" href="{{ url_for('profile') }}">
{% if current_user.first_name is not none %}
{{current_user.first_name}}
{% else %}
Profile
{% endif %}
</a>
<a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<main role="main" class="container" style = "width: 100%; height:auto; z-index:-999; margin-top:0px;">
<div class="row" style = "width: 100%;">
<div class="col-md-8" style = "width: 100%; flex: none; max-width: none;">
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
{{ message }}
</div>
{% endfor %}
</div>
</div>
</main>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Here is my entry point js file, index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import MyDayPicker from './daypicker';
ReactDOM.render(
<MyDayPicker />,
document.getElementById("date-root")
);
const element = <h1>Schedule</h1>;
console.log(element);
Lastly, here is the daypicker.js file which holds the react component and its code:
import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
export default class MyDayPicker extends React.Component {
constructor(props) {
super(props);
this.handleDayClick = this.handleDayClick.bind(this);
this.state = {
selectedDay: null,
};
}
handleDayClick(day, { selected }) {
this.setState({
selectedDay: selected ? undefined : day,
});
}
render() {
return (
<div>
<DayPicker
selectedDays={this.state.selectedDay}
onDayClick={this.handleDayClick}
/>
<p>
{this.state.selectedDay
? this.state.selectedDay.toLocaleDateString()
: 'Please select a day'}
</p>
</div>
);
}
}
Please help me figure out what I am missing! Thanks guys.
I'm not using flask so maybe I'm wrong... but it seems to me that you missed react script in *.html file. Please add:
<script src="<path to your react script - index.js" ></script>
You can check diagnose the problem by starting to see whether a native react component is loaded or not, like Router, if the problem didn't went away, if not, check the inspection console to see the error.