issue when redirect to livewire component - laravel

i installed livewire successfully but when i return the page and the page has
this
#livewire('counter')
it returns error
Livewire\Redirector::component(): Argument #1 ($component) must be of type Livewire\Component, App\Http\Livewire\Counter given
here is my test page
#extends('layouts.master')
#section('css')
#section('title')
empty
#stop
#endsection
#section('page-header')
<!-- breadcrumb -->
<div class="page-title">
<div class="row">
<div class="col-sm-6">
<h4 class="mb-0"> </h4>
</div>
<div class="col-sm-6">
<ol class="breadcrumb pt-0 pr-0 float-left float-sm-right ">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Page Title</li>
</ol>
</div>
</div>
</div>
<!-- breadcrumb -->
#endsection
#section('content')
<!-- row -->
<div class="row">
<div class="col-md-12 mb-30">
<div class="card card-statistics h-100">
<div class="card-body">
#livewire('counter')
</div>
</div>
</div>
</div>
<!-- row closed -->
#endsection
#section('js')
#endsection
and my livewire/counter.blade.php page
<div>
hello world
</div>
and route
Route::get('test', function () {
return view('test');
});

Related

Laravel Blade foreach combine

I have two separate divs, one where the images are loaded and the other where the data is displayed.
<div class="banner-slider-image">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide Item -->
<div class="swiper-slide">
<div class="bg" style="background-image: url(include/assets/images/main-slider/1.jpg);">
</div>
</div>
</div>
</div>
</div>
<div class="banner-slider-content">
<div class="side-text">AVANT</div>
<div class="swiper-container banner-slider">
<div class="swiper-wrapper">
#if(count($listings) > 0)
#foreach($listings as $listing)
<!-- Slide Item -->
<div class="swiper-slide">
<div class="content-outer">
<div class="content-box">
<div class="inner">
<h5>{{$listing->first_name}} {{$listing->last_name}}</h5>
<h1><span>{{$listing->name}}</span> </h1>
<div class="text">{{$listing->property_description}}.</div>
<div class="link-box">View Listing</div>
</div>
</div>
</div>
</div>
#endforeach
#endif
</div>
</div>
</div>
So the first div will also be in a foreach loop, but I dont know how I can combine the two where they show the same related data.
Use 2 foreach loops . It is the easiest and desired solution for you. or you can define two variable and concat the contents using one forloop and then display them later like
#php
$first='';
$second='';
#endphp
#if(count($listings) > 0)
#foreach($listings as $listing)
#php
$first.='first div content';
$second.='second div content';
#endphp
#endforeach
#endif
<div class="banner-slider-image">
<div class="swiper-container">
<div class="swiper-wrapper">
{!!$first!!}
</div>
</div>
</div>
<div class="banner-slider-content">
<div class="side-text">AVANT</div>
<div class="swiper-container banner-slider">
<div class="swiper-wrapper">
{!!$second!!}
</div>
</div>
</div>
<html>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
use for yield

content load dynamically inside quickView/ Popup in larave

I am trying to create an application with laravel and I am having some difficulty in understanding how to dynamically load content into a division according to the button clicked from the product icon.
This is the category page
<div class="row justify-content-center">
#foreach($ProductData as $Product)
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<div class="product product-7 text-center" title="{{$Product->product_name}}">
<figure class="product-media">
<span class="product-label label-new">New</span>
<a href="product.html">
<img src="{{ asset('images/product/thumbnail/'.$Product->photo) }}" alt="{{$Product->photo}}" class="product-image">
</a>
<div class="product-action-vertical">
<span>add to wishlist</span>
<span>Quick view</span>
<span>Compare</span>
</div><!-- End .product-action-vertical -->
<div class="product-action">
<span>add to cart</span>
</div><!-- End .product-action -->
</figure><!-- End .product-media -->
<div class="product-body">
<div class="product-cat">
Women
</div><!-- End .product-cat -->
<h3 class="product-title">{{$Product->product_name}}</h3><!-- End .product-title -->
<div class="product-price">
$ {{$Product->price}}
</div><!-- End .product-price -->
<div class="ratings-container">
<div class="ratings">
<div class="ratings-val" style="width: 20%;"></div><!-- End .ratings-val -->
</div><!-- End .ratings -->
<span class="ratings-text">(2)</span>
</div><!-- End .rating-container -->
<div class="product-nav product-nav-thumbs">
<a href="#" class="active">
<img src="{{ asset('assets/molla/assets/images/products/product-4-thumb.jpg') }}" alt="product desc">
</a>
<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-2-thumb.jpg') }}" alt="product desc">
</a>
<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-3-thumb.jpg') }}" alt="product desc">
</a>
</div><!-- End .product-nav -->
</div><!-- End .product-body -->
</div><!-- End .product -->
</div><!-- End .col-sm-6 col-lg-4 col-xl-3 -->
#endforeach
</div>
**and mypopup/quickView.html, where I want to load data dynamically is bellow: **
<div class="container quickView-container">
<div class="quickView-content">
<div class="row">
<div class="col-lg-7 col-md-6">
<div class="row">
<div class="product-left">
<a href="#one" class="carousel-dot active">
<img src="assets/molla/assets/images/popup/quickView/1.jpg">
</a>
<a href="#two" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/2.jpg">
</a>
<a href="#three" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/3.jpg">
</a>
<a href="#four" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/4.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
There are two ways you can dynamically load the modal/popup
Store the product details in data-* attribute of quick view button/anchor tag. Have a skeleton Quick View modal. On click of 'Quick View', trigger a javascript function to populate the skeleton modal with the product data fetched from data attributes.
Making AJAX call when user click on 'Quick View' button and populate the skeleton modal with the response data
Going by Approach #1 can you save you multiple network calls to the server as all the product related data (required to be shown in Quick View) is stored as data attributes
Updated
Example for Approach #1
<a class="btn btn-primary btnQuickView" data-product-name="Product Name" data-product-img="http://shop.com/product/image.jpg" data-product-price="200.00">Quick View</a>
Modal code
<!-- Quick View Modal -->
<div id="quickViewModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<h1 id="modal-product-name"></h1>
<img id="modal-product-image" src="">
<p id="modal-product-price"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Load jQuery library -->
<script type="text/javascript">
$(function(){
$('body').on('click','.btnQuickView', function(e){
e.preventDefault();
var data = $(this).data();
$('#quickViewModal #modal-product-name').html(data.productName);
$('#quickViewModal #modal-product-name').attr('src', data.productImage);
$('#quickViewModal #modal-product-name').html(data.productPrice);
$('#quickViewModal').modal();
});
});
</script>

How to solve Route not found error in Laravel?

I am passing a route and trying to show on view page, but it's giving me route not found error, please check my code and let me know where i am mistaking.
here is my route.php file..
Route::get('amenities-view', 'PropertyController#amenitiesview');
Here are my controller.php file..
public function amenitiesview()
{
$amenities=Amenity::all();
return view('admin.amenities.amenity', compact($amenities));
}
here are my leftsidebar.blade.php file (Where i am clicking and going to amenity.blade.php file)
<li>
<a href="{{route('amenities.amenity')}}">
Amenities List
</a>
</li>
and here is my amenity.blade.php file..
#extends('layouts.adminPanel')
#section('body')
<body class="page-ecommerce-product">
#endsection
#section('admin-content')
<div class="row">
<div class="col-sm-12">
<div class="alert alert-danger" role="alert" style="display: none;">
<ul id="blogErrors">
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-action">
<button class="btn btn-close"></button>
<button class="btn btn-min"></button>
<button class="btn btn-expand"></button>
</div>
<div class="panel-title">Add Amenities</div>
<p>Code Here</p>
</div><!-- /.panel-heading -->
</div><!--/.panel-->
</div>
</div><!-- /.row -->
</div>
#endsection
You are using a route without naming it. use like below
Route::get('amenities-view', 'PropertyController#amenitiesview')->name('amenities.amenity');
Laravel Documentation about named routing.

I cannot #include the views inside Bootstrap's tab in Laravel 5.1

I cannot include the views inside Bootstrap's tab.
base.blade.php
#extends('layout.admin')
#section('content')
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active">Chat</li>
<li>Información</li>
<li>Envio mensajes</li>
<li>Capturar pantalla</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
#include('tab.funciones.chat')
</div>
<div id="menu1" class="tab-pane fade">
#include('tab.funciones.informacion')
</div>
<div id="menu2" class="tab-pane fade">
#include('tab.funciones.mensajes')
</div>
<div id="menu3" class="tab-pane fade">
#include('tab.funciones.pantalla')
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
#endsection
I have a directory called "tab" and inside I have this view and other directory with the views chat, informacion, mensajes and pantalla.
Thre route
Route::get('/fun', function(){
return view('tab.base');
});
Which is the problem?
Try this
Make sure you add libraries on admin
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
and jquery, bootstrap as well before html closing
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
here is rest
#extends('layout.admin')
#section('content')
<div class="container">
<div class="col-md-6">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">Chat</li>
<li> Información</li>
<li>Envio mensajes</li>
<li>Capturar pantalla</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
#include('tab.funciones.chat')
</div>
<div class="tab-pane fade" id="menu1">
#include('tab.funciones.informacion')
</div>
<div class="tab-pane fade" id="menu3">
#include('tab.funciones.mensajes')
</div>
<div class="tab-pane fade" id="menu4">
#include('tab.funciones.pantalla')
</div>
</div>
</div>
</div>
</div>
</div>
#stop

twitter bootstrap 3 columns stacking

I have my markup setup to show a 3 column twitter bootstrap layout, but instead the divs are stacking. This should be real simple and I cannot figure out why the columns are not being columns.
<div class="container-fluid">
<div class="row">
<div class="header">
<div class=".col-xs-6 .col-sm-4">
<a href="{{ URL::route('home') }}">
<div class="header_group">
<img src="../../images/me.png">
<span><h1 class="header_text">Logo</h1></span>
</div><!--header group -->
</a>
</div>
<div class=".col-xs-6 .col-sm-4">
middle
</div>
<div class=".col-xs-6 .col-sm-4">
#include('layout.navigation')
</div>
</div><!-- main header -->
</div><!-- row -->
</div><!-- container -->
Take out the dots before the class names
<div class="container">
<div class="row">
<div class="header">
<div class="col-xs-6 col-sm-4">
Column1
</div>
<div class="col-xs-6 col-sm-4">
Column 2
</div>
<div class="col-xs-6 col-sm-4">
Column3
</div>
</div><!-- header -->
</div><!-- row -->
</div><!-- container -->
Here is the jsfiddle link

Resources