I would like to let the modal keep open if there are errors,but the modal will not auto open when there are errors
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="//unpkg.com/alpinejs" defer></script>
<script src="{{ url('/js/jquery.min.js') }}"></script>
<script src="js/bootstrap.min.js"></script>
#if($errors->any())
<script type="text/javascript">
$(document).ready(function(){
$('#modal-title').modal('show');
});
</script>
#endif
modal
<form action="/employee" class="action" method="POST">
#csrf
<div class="fixed z-10 inset-0 overflow-y-scroll" aria-labelledby="modal-title" id="modal-title" role="dialog" aria-modal="true"
x-show="open">
try this
<script type="text/javascript">
#if (count($errors) > 0)
$('#modal-title').modal('show');
#endif
</script>
Related
Summernote dropdown doesn't work with Bootstrap 5, please help with the below code. The error says Bootstrap doesn't allow more than one instance per element. Bound instance: bs.tooltip.
<html lang="en"><head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-12 mt-3">
<div id="summernote"></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#summernote').summernote(
{height:300,
}
);
$('.dropdown-toggle').dropdown();
});
</script>
</body></html>
Codepen link https://codepen.io/murli-vm/pen/XWpLqpp
I have a blade file thanks.blade.php where I put two sessions grand_total and order_id. When I refresh the page session still exists.
I want when I refresh the page the session should be destroyed. I have written the session forget code at the end. Is it correct? I think it's not correct then how to write it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Thanks</title>
<link href="{{ url('css/front_css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/prettyPhoto.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/price-range.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/animate.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/main.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/responsive.css') }}" rel="stylesheet">
<!--[if lt IE 9]>
<script src="{{ url('js/front_js/html5shiv.js') }}"></script>
<script src="{{ url('js/front_js/respond.min.js') }}"></script>
<![endif]-->
<!-- favicon -->
<link rel="icon" type="image/png" sizes="192x192" href="{{ asset('images/ico/android-icon-192x192.png')}}">
</head>
<!--/head-->
<body>
<!-- Header Part -->
#include('layouts.front_layout.front_header')
<div class="jumbotron text-center">
<h1 class="display-3">Thank You!</h1>
<p class="lead"><strong>Your Order Is Successfully Place</strong></p>
<p class="lead">Your Order number is {{Session::get('order_id')}} and grand total is PK. {{Session::get('grand_total')}}</p>
<hr>
<p>
<strong>Please check your email</strong> for further instruction. Having trouble? Contact us
</p>
<p class="lead">
<a class="btn btn-primary btn-sm" href="{{url('/')}}" role="button">Continue to homepage</a>
</p>
</div>
<!--/Footer-->
#include('layouts.front_layout.front_footer')
<script src="{{ url('js/front_js/jquery.js') }}"></script>
<script src="{{ url('js/front_js/bootstrap.min.js') }}"></script>
<script src="{{ url('js/front_js/main.js') }}"></script>
</body>
</html>
<php Session::forget('grand_total'); Session::forget('order_id'); ?>
You have to use following code below
#php
Illuminate\Support\Facades\Session::forget('grand_total');
Illuminate\Support\Facades\Session::forget('order_id');
#endphp
It is working fine for me. I have just now used in my project.
I'm trying to use the package bootstrap-datetimepicker. I had already followed the installation tutorial. But I couldn't accomplish to get it to work. I imported the files required into app\publicfolder as well.
My Folder Structure
public folder structure
My blade file
<html>
<head>
<title>Laravel Bootstrap Datepicker</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- JS AND CSS -->
<script type="text/javascript" src="{{ URL::asset('js/jquery-3.3.1.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/moment.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap-datetimepicker.js')}}"></script>
<link href="{{ asset('css/bootstrap.css')}}" rel="stylesheet">
<link href="{{ asset('css/bootstrap-datetimepicker.css')}}" rel="stylesheet">
</head>
<body>
<!-- DATATIME PICKER CODE -->
<img src="{{asset('goku.jpg')}}" alt="Mountain View">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control " />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
</body>
</html>
My Result
The result I'm getting is this, an import with a fail icon. And nothing showing up while clicking.
Hi after I click on a page:
Websites
i get an error saying:
View [layoults.pages] not found.
Route:
Route::get('pages', 'BuilderController#websites');
ControlleR:
function websites()
{
$websites = Website::all();
return view('layoults/pages', ['websites' => $websites]);
$webid= $websites->id;
}
pages.blade.php:
#extends('layouts.master') #section('title', 'Website Builder') #section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<div class=flex-container>
<div class="flex-item templates">
#foreach ($websites as $website)
<a class="content-link" href="{{ asset($website->name )}}">
</a> #endforeach
</div>
</div>
</body>
<link href="{{asset('css/bootstrap-colorpicker.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/bootstrap-formhelpers.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset ('//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css')}}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{!! asset('js/bootstrap-colorpicker.min.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/bootstrap-formhelpers.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
<script type="text/javascript" src="{!! asset('js/bootstrap-filestyle.min.js') !!}">
</script>
</html>
#endsection #show
So could someone please tell me what is going on? as far as I can see, everything seems correct.
typo in your code try following lines in your controller
function websites()
{
$websites = Website::all();
return view('layouts/pages', ['websites' => $websites]);
}
I have a fresh installed laravel project with all the components updated.
All I did is tried to add app.js in my welcome.blade.php file, after adding the following I get this error
[Vue warn]: Cannot find element: #app
I followed this thread, but it's not relevant as my script is at the bottom of the page.
https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work
Here's my file
<!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">
<title>{{$project}} | {{ $title }}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet" type="text/css"/>
<style>
...
</style>
</head>
<body class="sticky-nav">
<div id="nav">
<div class="display-sm">
<header class="top-header">
<span class="menu-icon">☰</span>
</header>
</div>
<div class="custom-container">
<div id="logo" class="float-left">
<img alt="xyz" src="/images/xyz.png"/><span> xyz</span>
</div>
<div id="btn-project" class="float-right">
<a title="project" href="#" class="btn btn-project">Project</a>
</div>
</div>
</div>
<div class="sub-container">
<h1 id="header-title">{{ $header_title }}</h1>
<h2 id="meta-data"><i class="fa fa"></i>{{$location}} <span id="category"> <i></i>{{$category}} </span></h2>
<div class="clear"></div>
</div>
<script src="/js/app.js"></script>
<script>
var wrap = $(".sticky-nav");
wrap.on("scroll", function (e) {
if (this.scrollTop > 147) {
wrap.find('#nav').addClass("fix-nav");
} else {
wrap.find('#nav').removeClass("fix-nav");
}
});
</script>
</body>
</html>
Error says it all. Vue can't find #app element, so you need to add it:
<div id='app'></div>
https://v2.vuejs.org/v2/guide/
Sometime everything seems got , but we are still getting same error then you have to copy this code and paste in app. blade.
<head>
<!-- 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">
.
.
.
.
.
.
</div>
</body>
Verify that your main design file app.blade.php contains a div with the app id just after the <body> tag just like this:
<body>
<div id="app">
.
.
.
</div>
</body>