Installing Vue 3.x In LVM Stack Using Webpack and NPM - laravel
I'm having a difficult time getting Vue to work in a blade.php page I have in my laravel website.
Here is the blade page code:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<!-- Custom css -->
<link href="{{ url('sass/custom.scss.css') }}" type="text/css" rel="stylesheet">
<!-- Fav icon -->
<link rel="icon" type="image/png" href="{{ url('omnisection.png') }}">
<!-- development version, includes helpful console warnings -->
<script src="{{ mix('/js/vue.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>
<script src="{{ mix('/js/RecordRTC.js') }}"></script>
<script src="{{ mix('/js/customrecrtc.js') }}"></script>
<!-- Styles -->
<style>
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}#media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}#media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}#media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}#media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
</style>
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body class="antialiased">
<div id="app">
#{{ message }}
</div>
<script>
var test = new Vue({
el: '#app',
data: {
message: 'hi'
}
});
</script>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img class="rounded-3" src="{{ url('omnisection(new).png') }}" style="width:172px;height:108px" /></a>
<button class="navbar-toggler brotoggle" type="button" data-bs-toggle="collapse" data-bs-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">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
#foreach($pages as $page)
<li class="nav-item">
<a href="{{ url($page['url']) }}">
<button class="btn btn-lg btn-outline-secondary brobutton" type="button">{{ $page['page_name'] }}</button>
</a>
</li>
#endforeach
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search Requests" aria-label="Search">
<a href="{{ url('search') }}">
<button class="btn btn-outline-secondary brobutton" type="submit">Search</button>
</a>
</form>
</div>
</div>
</nav>
<div class="relative flex items-top justify-center bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
#if (Route::has('login'))
<div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
#auth
Dashboard
#else
Log in
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
</div>
<!-- Fluid container -->
<div class="container-fluid mt-1">
<div class="row">
<div class="col fs-1 text-center">
Your Data
</div>
<div class="col fs-1 text-center border-start">
Other's Data
</div>
</div>
<div class="row">
<div class="col">
#guest
<a href="{{ url('login') }}">
<button type="button" class="btn rounded btn-primary btn-lg start-50 translate-middle-x position-relative" alt="login button">Log in</button>
</a>
#endguest
</div>
<div class="col fs-1 border-start text-center">
#guest
?
#endguest
</div>
</div>
<div class="row">
<div class="col">
#auth
<div class="input-group mb-3">
<input type="file" class="form-control mt-2" id="inputGroupFile02" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this to upload a file">
<label class="input-group-text mt-2" for="inputGroupFile02">Upload</label>
</div>
#endauth
</div>
<div class="col border-end" id="rcrdplayer">
#auth
<button v-on:click="startrecord" type="button" class="rounded-circle button-rec btn-lg btn-secondary" id="btn-start-recording" alt="record audio button" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this button to record audio">Rec</button>
<img src="video.svg" class="img-fluid custom-img-bg rounded" id="btn-start-recording" alt="record video button" height="75" width="75" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this button to record video"/>
#endauth
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<!-- Recorder -->
#auth
<div class="row">
<div class="col">
<select class="form-select form-select-sm media-resolutions">
<option value="default">Default resolutions</option>
<option value="1920x1080">1080p</option>
<option value="1280x720">720p</option>
<option value="640x480">480p</option>
<option value="3840x2160">4K Ultra HD (3840x2160)</option>
</select>
<select class="form-select form-select-sm media-framerates" aria-label=".form-select-sm example">
<option value="default">Default framerates</option>
<option value="5">5 fps</option>
<option value="15">15 fps</option>
<option value="24">24 fps</option>
<option value="30">30 fps</option>
<option value="60">60 fps</option>
</select>
<select class="form-select form-select-sm media-bitrates" aria-label=".form-select-sm example">
<option value="default">Default bitrates</option>
<option value="8000000000">1 GB bps</option>
<option value="800000000">100 MB bps</option>
<option value="8000000">1 MB bps</option>
<option value="800000">100 KB bps</option>
<option value="8000">1 KB bps</option>
<option value="800">100 Bytes bps</option>
</select>
</div>
<div class="col border-end">
</div>
</div>
#endauth
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Here is the Webpack code:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
module.exports = {
mode: 'development'
}
mix.sass('resources/css/custom.scss','public/sass/custom.scss');
mix.js('node_modules/recordrtc/RecordRTC.js', 'public/js/RecordRTC.js');
mix.js('resources/js/customrecrtc.js', 'public/js/customrecrtc.js');
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
I've read and re-read the docs on the installation, then I found that I was in version 2.x, so I switched to version 3.x. All this to no avail. It works if I use the CDN method, and I am then able to run some vue code in the blade template. I really just wanted to have all my node modules linked to the page through NPM, otherwise I would just use the CDN method.
Update: I have added the Webpack and Blade code. Since I installed Vue 3 using
npm install vue#next
I can't find where to add Vue from my node modules. This is a new laravel project, using Laravel 8.x
https://laravel.com/docs/8.x/mix#working-with-scripts
As it says in the above link, since I'm using Webpack which compiles JS code. I found that I must import the specific node module. If you have programmed before, think of it as importing or including a file in Java, C++, Python, or what have you.
In my case I needed to realize that I not only had to import one module, but many. And then specifically use the same file I imported into to type the relevant code. I still can't type the JS into the .blade.php file, but this should work well enough.
This an example of my custom.js
import node_module1
import node module2
// code goes here
Related
RESOLVED: Laravel - Can't make "submit form" route to show up
RESOLVED!
I just needed to access "links.test/submit" instead of simply "links.test", as "submit.blade.php" was a new page.
I also learned the tutorial uses an older version of Laravel, meaning "resources/views/layouts/app.blade.php" was not created because the
php artisan make:auth
command did not work. For Laravel 7, as Gustavo Alves pointed out, I needed to use these two commands instead:
composer require laravel/ui
php artisan ui vue --auth
ORIGINAL QUESTION:
I am going through a Laravel tutorial for beginners - https://laravel-news.com/your-first-laravel-application. I came to the "Displaying the Link Submission Form" section and pasted the provided code snippet into the routes/web.php file, then created submit.blade.php template at resources/views/submit.blade.php with the provided code snippet, as per instructions.
However, the submit form is NOT showing up in my "links.test".
web.php:
?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
$links = \App\Link::all();
return view('welcome', ['links' => $links]);
});
Route::get('/submit', function () {
return view('submit');
});
submit.blade.php:
#extends('layouts.app')
#section('content')
<div class="container">
<div>
<h1>Submit a Link </h1>
<form action="/submit" method="post" >
#if ($errors->any())
<div class="alert alert-danger" role="alert">
Plese fix the following errors
</div>
#endif
{!!csrf_field()!!}
<div class="form-group{{ $errors->has('title') ? 'has-error' : ''}}">
<label for="title">Title</label>
<input type="text" class="form-control" id="title" name="title" placeholder="Title" value="{{ old('title') }}">
#if($errors->has('title'))
<div class="alert alert-danger">
{{ $errors->first('title') }}
</div>
#endif
</div>
<div class="form-group{{ $errors->has('url') ? ' has-error' : '' }}">
<label for="url">Url</label>
<input type="text" class="form-control" id="url" name="url" placeholder="URL" value="{{ old('url') }}">
#if($errors->has('url'))
<span>
<div class="alert alert-danger">
{{ $errors->first('url') }}
</div>
</span>
#endif
</div>
<div class="form-group{{ $errors->has('description') ? ' has-error' : '' }}">
<label for="description">Description</label>
<textarea class="form-control" id="description" name="description" placeholder="description">{{ old('description') }}</textarea>
#if($errors->has('description'))
<div class="alert alert-danger">
{{ $errors->first('description') }}
</div>
#endif
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
#endsection
So, what I can gather for your comment is
you need to create resources\views\layouts\app.blade.php where you will have something like this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Your App</title>
#section('head')
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
#show()
</head>
<body>
#yield('content')
#section('scripts')
<script src="{{ mix('/js/app.js') }}"></script>
#show
#endsection
</body>
</html>
Once you got this you should be able to extend and this should work as well.
new component is not displaying
m new to vue and after installing it in Laravel, I make a new component but its not showing in browser,and the browser gives warning in developers tools, in developers tools > console it shows:
app.js:37960 [Vue warn]: Failed to mount component:
template or render function not defined.
found in
---> <TaskForm>
<Root>
warn # app.js:37960
app.js:46384 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
is there any problem in code or if any solution to resolve this issue?
component:
<template>
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Task Form</div>
<div class="card-body">
<form action="./api/task" method="POST">
<div class="form-group">
<input type="text" name="title" placeholder="Task title" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Add Task" class="btn btn-info">
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component',
require('./components/ExampleComponent.vue').default);
Vue.component("task-form", require('./components/TaskForm.vue'));
const app = new Vue({
el: '#app'
});
this is app.blade.php: 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') }}</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">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<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>
</body>
</html>
Problem with dropdown action on Bootstrap v4
I have this sample page that I can't get the down down to work. I have loaded jQuery, then Bootstrap, then popper (put popper before breaks things) <!DOCTYPE html> <html> <head> <title>Bootstrap try out</title> <script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script> <link href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://netdna.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="input-group text dropright " > <input class="form-control" readonly type="text" placeholder="<category map>"> <!-- form-control links field with the span --> <div class="input-group-append" dropdown> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dd </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> </div> </body> </html> This renders the button - but the drop down doesn't open. What I have missed here ? PS: corrected page - putting the dropdown inside class "" like this it still doesn't render the list - something else is not right. <div class="container"> <div class="input-group text dropright " > <input class="form-control" readonly type="text" placeholder="<category map>"> <!-- form-control links field with the span --> <div class="input-group-append dropdown" > <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dd </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> </div>
really weird - so went to a demo site w3 schools - and there demo worked so I cust and paste the header from that to my page and commented out my 4 lines doing same stuff see replacement here - when i commented out my original sources and replaced those with the the same as the w3c schools and reloaded the page - it works <!-- these 4 lines do work --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <%-- these 4 lines dont work <link href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" /> <script src="https://netdna.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> --%> i'm not sure what nature of screwedness is going on and its too late to go figure. However with the new sources the pages start to work - very weird
Bootstrap carousel Not functional
I'm working in Laravel 5.5 which is bundled with Bootstrap and I have my main JS file running appropriately (i.e. laravel mix compiling with all the all the js files loaded with it appropriately). However, bootstrap 3.3.7's carousel is not working at all. The transitions (slide actions) don't work and the buttons dont work at all. here's my code below
/**
* 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.
*/
require('./bootstrap');
require('./animations');
window.Vue = require('vue');
// *
// * 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.
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '.content'
});
<script type="text/javascript" src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/main.css') }}" rel="stylesheet"> . .. ...
<div class="container-fluid content">
<div class="carousel slide" id="features">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#features" data-slide-to="0" class="active"></li>
<li data-target="#features" data-slide-to="1"></li>
<li data-target="#features" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/images/niceview.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Lorem Ipsum</h4>
<p class="carousel-text">Some Lorem ipsum.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="/images/rear.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Dreams</h4>
<p class="carousel-text">Lorem ipsum</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="/images/view.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Dreams</h4>
<p class="carousel-text">Lorem ipsum</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#features" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#features" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
That's my js file which compiles successfully by mix and my html file. And right now I don't get any errors in the console so I have no clue as to what is wrong.
Please help :(
Bootstrap carousal in the blade file.
add this to your filename.blade.php
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="{{ asset('public/images/1.jpg')}}" alt="" style="width:100%;">
</div>
<div class="item">
<img src="{{ asset('public/images/2.jpg')}}" alt="" style="width:100%;">
</div>
<div class="item">
<img src="{{ asset('public/images/3.jpg')}}" alt="" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
add this css file like this
<link href="{{ asset('public/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
and add js like this
<script type="text/javascript" src="{{ asset('public/js/jQuery-2.1.4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('public/js/bootstrap.min.js') }}"></script>
using this following step carousal is work.
i hope this will help you to solve your problem
MVC.NET Core Bootstrap-Modal forms with multi-parameters don't reach Post controller
I have a web app using modal forms to confirm some of the actions my users (or admin) might be allowed to do. The modal form setup is taken from Microsoft's IdentitySampleApplication project and been incorporated for my project in mostly the same way with this one difference. I am using the generic modal forms. I am trying to allow a user to have multiple user roles on an application (while their sample presumes the user will only have one role.)
I am now working out the deletion of roles for this type multi-role scenario for maintenance. I should point out that all instances of code involving only one id work fine, it is this one instance with 2 ids that fails to pass through either of the ids I need at the controller.
The deletion of a user role requires the key of the user and the role.
My controller has a bit of code like the following to accept the ids and present a modal form, which works quite nicely.
[HttpGet]
public IActionResult DeleteUserRole( string userid, string roleid ){...}
The HttpPost portion looks something like this
[HttpPost]
public IActionResult DeleteUserRole( string userid, string roleid, IFormCollection form ){...}
however, this second action never gets the ids that were passed to the modal forms get method.
In all methods that only have a single routing id, I have no issues. It is only this one method that vexes me. I call it from this link. Note the two asp-route variables and I suspect this is at the heart of my issue, but the get call is fine with this, it is the post that has no values:
<a id="deleteRoleModal" asp-action="DeleteUserRole"
asp-route-userid="#item.userId" asp-route-roleid="#item.roleId"
data-toggle="modal" data-target="#modal-action-role"
class="btn btn-sm btn-danger">
where at the base of the form I have a modal form implementation it uses looking like this:
#await Html.Partial( "_Modal", new BootstrapModel { ID = "modal-action-role", AreaLabeledId = "modal-action-role-label", Size = ModalSize.Medium } )
My modal form looks much like the samples used in the IdentitySampleProject and is shown here, it was not altered in any meaningful way yet works fine with single parameter call backs:
#model string
#using MyModels
<form asp-action="DeleteUserRole" role="form">
#Html.AntiForgeryToken()
#await Html.Partial( "_ModalHeader", new ModalHeader { Heading = "Delete User Role" } )
<div class="modal-body form-horizontal">
Are you sure you want to delete user role #Model?
</div>
#await Html.Partial( "_ModalFooter", new ModalFooter { SubmitButtonText = "Delete" } )
</form>
I am looking for a direction to go to solve the issue. I am hoping that indeed the double route ids are my issue, but I can not seem to find anyone else doing something like this in samples.
The generated management page looks mostly like this:
<!DOCTYPE html>
<html>
<head>
<title>my company</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/lib/bootswatch/spacelab/bootstrap.min.css" />
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/site.css" />
<link rel="stylesheet" href="/css/navTabs.css" />
<link rel="stylesheet" href="/css/partner.css" />
</head>
<body>
<div id="header">
<div class="slideContainer">
<div class="slide"><img src="/image/Firm-small2.jpg" alt="Offices" class="headerImage" /></div>
<div class="slide"><img src="/image/InLibrary225.jpg" alt="Library" class="headerImage"></div>
<div class="slide"><img src="/image/DSC_9999editSM.JPG" alt="Offices" class="headerImage" /></div>
<div class="slide"><img src="/image/DSC_9925edit2SM.JPG" alt="Computer Room" class="headerImage" /></div>
</div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav navbar-right ">
<li class="navtext">
<label>-- Welcome: Webmaster </label>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navtext">
<label>Your Proven Partner in Cartoon Drawing</label>
</li>
</ul>
</nav>
</div>
<div id="sidebar">
<div><img src="/image/headerLogo.gif" alt="my company Logo" class="logoImage" /></div>
<nav id="menu">
<ul class="nav navbar-inverse">
<li>Home</li>
<li>
<div id="menuGroupItem">
Partners
<a data-toggle="collapse" data-target="#partnerMenu"><i class="fa fa-chevron-down"></i></a>
</div>
<ul id="partnerMenu" class="nav collapse" role="menu" aria-labelledby="partnerMenu">
<li><i class="fa fa-caret-right"></i> Eddy A Fish</li>
<li><i class="fa fa-caret-right"></i> Tom A Hawk</li>
</ul>
</li>
<li>Services</li>
<li>News</li>
<li>Events</li>
<li>Publications</li>
<li>Firm History</li>
<li>Contact</li>
<li class="divider"></li>
<li>Manage Website</li>
<li>Logout</li>
</ul>
</nav>
<div class="affiliation">
<table>
<tr>
<td>
<img src="/image/WBE_color_rgb_UP25.jpg" alt="" class="affiliationImage" />
</td>
</tr>
</table>
</div>
<div>
<ul class="rightAlign">
<li> </li>
<li>my company</li>
<li>16 main street</li>
<li>anytown, pa 00000</li>
<li> </li>
<li>610.111.1111</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="main" class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="/Users/UserRole/a2c77901-4a74-49aa-9354-1fadc943c8c4" method="post"><input id="UserId" name="UserId" type="hidden" value="a2c77901-4a74-49aa-9354-1fadc943c8c4" /><input id="UserName" name="UserName" type="hidden" value="BioEditor" /> <h3>Add roles for user: <span class="text-success">BioEditor</span></h3>
<div>
<div class="form-group">
<table class="table table-responsive">
<thead>
<th>Role</th>
<th>Action</th>
</thead>
<tbody>
<tr>
<td><i class="fa fa-check text-success"> </i>BioEditor</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=8b12b24d-5836-46eb-a7aa-0be1818a67f5">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
<tr>
<td><i class="fa fa-check text-success"> </i>PowerEditor</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=c4f3bdf8-b880-423c-8de3-1e51329da104">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
<tr>
<td><i class="fa fa-check text-success"> </i>Administrator</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=f1aafc1e-0527-4542-8f0e-fb1afeccac46">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group">
<div class="input-group">
<select class="input-group form-control" data-val="true" data-val-required="The ApplicationRoleId field is required." id="ApplicationRoleId" name="ApplicationRoleId">
<option>Please select</option>
<option value="8b12b24d-5836-46eb-a7aa-0be1818a67f5">BioEditor</option>
<option value="c4f3bdf8-b880-423c-8de3-1e51329da104">PowerEditor</option>
<option value="f1aafc1e-0527-4542-8f0e-fb1afeccac46">Administrator</option>
<option value="fe77274d-4b16-46a6-8177-a84faf198c9b">EventEditor</option>
</select>
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-user"> </i> Add Selected Role </button>
</span>
<span class="field-validation-valid" data-valmsg-for="ApplicationRoleId" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8KeASaIZMdBDjnZy_1CdaouczJ-zwxPaQp-N5OQ5bGWfYzVfpDz7_iC0VlJb_cRDkqucT-8ENFhsNPe9Rng1Mqrm9VQbYQoSQwerxj953ql4v7dABrW6pioEySOJN7qFXaalGYePyjHoB0QiKxfuvkvh938tJG4gVnh5D1JvLyNBBKlR4d25PcoJOJZTdN_Bxg" /></form> </div>
</div>
<div aria-hidden="true" aria-labelledby="modal-action-role-label" role="dialog" tabindex="-1" id="modal-action-role" class="modal fade">
<div class="modal-dialog ">
<div class="modal-content">
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-fixed-bottom navbar-inverse ">
<ul>
<li class="navbar-link">© my company</li>
<li class="navbar-link text-muted"><a id="disclaimerLink" href="#">Disclaimer</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="/js/site.js"></script>
</body>
</html>
Thanks for any direction you might be able to provide, Kent
That was exactly a nudge in the right direction to finding the issue, thanks Ahmar. What is going on, due to the 2 ids being passed back to the controller is that the data is wrapped up in a query string rather than as a real route {controller}{action}{id}.
The modal won't pass along the query string to the final so I changed the model and wrapped up the values in the modal form for the final deletion and it all worked. Thanks for asking the right the question to get this answered.