'How to I Add a view or Component that doesn't effects with master layouts
Guys I'm trying to making a page called slider and that page include both data passing and data getting methods. I created separate sections and i preformed that task. The question is when I using database bootstrap(cloud tables) the filtering fields not showing.pls help me to fix this..THE QUESTION OCCERS WHEN Extend with master layout.
codes
that sample table
@livewireStyles
@livewire('slider')
@livewireScripts
<link rel="stylesheet" href="{{asset('css/add_to_slider.css')}}" type="text/css"/>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> -->
<link rel="stylesheet" href="{{asset('public\assets\css\animate.min.css')}}" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.datatables.net/colreorder/1.5.5/js/dataTables.colReorder.min.js">
<link rel="stylesheet" href="{{asset('css/a.css')}}" type="text/css"/>
<script src="{{asset('js/mintotable.js') }}"></script>
<script src="{{asset('js/datatable.js') }}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<div>
<table id="example" class="dataTable table table-bordered table-striped display dt-responsive nowrap dtr-inline">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
@foreach($data as $slider)
<tr>
<th>{{$slider->id}}</th>
<!-- <td>{{$slider->image}}</td> -->
<td><img src="/productimage/{{$slider->image}}" alt="{{$slider->imagename}}" width="10px" height="10px"></td>
<td>{{$slider->country}}</td>
<td>{{$slider->product_name}}</td>
<td>{{$slider->owner_name}}</td>
<td colspan="3">
<div class="buttons btns">
<a href="{{url('edit/slider/'.$slider->id)}}"class="btn btn-warning m-1"><i data-feather="edit"></i>update</a>
<a href="{{url('delete/slider/'.$slider->id)}}"class="btn btn-danger m-1" id="btn2"><i data-feather="trash">delete</i></a>
<!-- <button type="button" class="btn btn-danger ml-2" onclick="d_confirm_alert()">Delete Item</button> -->
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<!-- alert coming from backend -->
@if(session()->has('alert'))
<script>
alert('{{session()->get('alert')}}')
</script>
@endif
<!-- end of alert -->
<!-- alert of confirm of delete -->
<script>
function d_confirm_alert(){
var r = confirm("Please Confirm to Delete");
if (r == true) {
location.href = "{{url('deletefromslider',$slider->id)}}";
} else {
location.href = "slider";
}
}
</script>
<script>
$(function() {
$(document).ready(function() {
$('#example').DataTable();
});
});
</script>
slider page
@extends('admin.layouts.master')
@section('content')
@include('admin.dashboard.extendedslider')
@endsection
extendedslider
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{{asset('public\assets\css\animate.min.css')}}" type="text/css"/>
<link rel="stylesheet" href="{{asset('css/add_to_slider.css')}}" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid pageheading">
<div class="row">
<div class="col">
<h1 class="text-center">Add Product</h1>
</div>
</div>
</div>
<!-- add to slider section -->
<div class="container-fluid bagebody addtoslider">
<div class="row">
<div class="col-md-6 col-sm-12 form">
<h4>Add Slider Item</h4>
<div class="container">
<form action="{{url('addtoslider')}}" method="post" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Ex: DELL KEYBORD" name="p_name" style="text-transform:uppercase">
<span>@error('Product Name'){{$message}}@enderror</span>
</div>
<div class="form-group">
<label>Owner Name</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Ex: Life Phones(Pvt)Ltd." name="u_name" style="text-transform:uppercase">
</div>
<div class="form-group">
<label>Price</label>
<input type="text" class="form-control" id="formGroupExampleInput2" name="price">
<span>@error('price'){{$message}}@enderror</span>
</div>
<div class="form-group ">
<label>Country</label>
<select class="form-select contry_selector" id="exampleFormControlSelect1" name="country">
<option>Bahrain</option>
<option>Kuwait</option>
<option>Oman</option>
<option>Qatar</option>
<option>Saudi Arabia</option>
<option>United Arab Emirates</option>
</select>
</div>
<!-- <div class="col-md-12 col-sm-12"> -->
<div class="form-group">
<label>Product Description</label>
<textarea class="form-control decsription" id="exampleFormControlTextarea1" rows="3" name="des"></textarea>
</div>
<!-- </div> -->
<!-- <div class="col-md-12 col-sm-12"> -->
<div class="form-group">
<label>URL</label>
<input type="text" class="form-control" id="formGroupExampleInput" name="url" placeholder="Enter Product URL Here..">
<span>@error('url'){{$message}}@enderror</span>
</div>
<!-- </div> -->
<div class="col-4 col-sm-6">
<div class="form-group">
<label for="exampleFormControlFile1">Isnsert Product Images</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1" name="file">
<span>@error('file'){{$message}}@enderror</span>
</div>
</div>
<div class="col-6 sm-12 align-center" id="buttons">
<button type="submit" class="btn btn-success" >Add product</button>
<button type="reset" class="btn btn-danger">Clear All Details</button>
</div>
</from>
</div>
</div>
<!-- end of add to slider section -->
<!-- Slider items section-->
<div class="col-md-6 col-sm-12 slideritems">
<h4>Slider items</h4>
<div class="tablecontainer">
<div class="row">
<form action="{{url('filter')}}" method="get">
@csrf
<div class="col-md-4 col-sm-6 col-xs-12">
<select class="form-select" id="country_select">
<option value="1">All</option>
<option value="2">Bahrain</option>
<option value="3">Kuwait</option>
<option value="4">Oman</option>
<option value="5">Qatar</option>
<option value="6">Saudi Arabia</option>
<option value="7">United Arab Emirates</option>
</select>
</div>
<!-- <div class="col-md-4 col-sm-6 col-xs-12">
<select class="form-select">
<option selected>All</option>
<option value="1">5</option>
<option value="2">10</option>
<option value="3">15</option>
</select>
</div> -->
<div class="col-md-4 col-sm-6 col-xs-12">
<select class="form-select">
<option selected>Country</option>
<option value="1">All</option>
<option value="2">Bahrain</option>
<option value="3">Kuwait</option>
<option value="4">Oman</option>
<option value="5">Qatar</option>
<option value="6">Saudi Arabia</option>
<option value="7">United Arab Emirates</option>
</select>
</div>
<!-- search bar -->
<!-- <div class="col-md-4 col-sm-6 col-xs-12 search_bar">
<i class="fas fa-search" aria-hidden="true"></i>
<input class="form-control form-control-sm ml-3 w-75" type="search" placeholder="Search"
aria-label="Search" name="slidersearch">
</div> -->
<!-- end of search bar -->
</form>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 slideritem_table">
<table class="dataTable table table-bordered table-striped display dt-responsive nowrap dtr-inline">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Image</th>
<th scope="col">Country</th>
<th scope="col">Product Name</th>
<th scope="col">Owner Name</th>
<th scope="col">Manage</th>
</tr>
</thead>
<tbody>
@foreach($data as $slider)
<tr>
<th>{{$slider->id}}</th>
<!-- <td>{{$slider->image}}</td> -->
<td><img src="/productimage/{{$slider->image}}" alt="{{$slider->imagename}}" width="50px" height="50px"></td>
<td>{{$slider->country}}</td>
<td>{{$slider->product_name}}</td>
<td>{{$slider->owner_name}}</td>
<td colspan="3">
<div class="buttons btns">
<a href="{{url('edit/slider/'.$slider->id)}}"class="btn btn-warning m-1"><i data-feather="edit"></i></a>
<a href="{{url('delete/slider/'.$slider->id)}}"class="btn btn-danger m-1" id="btn2"><i data-feather="trash"></i></a>
<!-- <button type="button" class="btn btn-danger ml-2" onclick="d_confirm_alert()">Delete Item</button> -->
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!-- pagination -->
<div class="pagination">
{!!$data->onEachSide(1)->links()!!}
</div>
<!-- end of pagination -->
</div>
<!-- end of slider items section-->
</div>
</div>
</div>
</div>
<!-- alert coming from backend -->
@if(session()->has('alert'))
<script>
alert('{{session()->get('alert')}}')
</script>
@endif
<!-- end of alert -->
<!-- alert of confirm of delete -->
<script>
function d_confirm_alert(){
var r = confirm("Please Confirm to Delete");
if (r == true) {
location.href = "{{url('deletefromslider',$slider->id)}}";
} else {
location.href = "slider";
}
}
</script>
<!-- end of alert confirm of delete -->
<script>
let country_select=$('#country_select').val();
$("#country_select").on('change',function(){
country_select=$('#country_select').val();
// console.log(country_select);
// return country_select;
})
// data:function(d){
// d.country_select=country_select;
// return d;
// }
$.ajax({
type:'POST',
url:'/filter',
data:function(d){
d.country_select=country_select;
return d;
},)}
</script>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|