i created a new simple components for using into liveWire and i'm trying to use this component from a single route, in below simple implementation increment and decrement not working for me
route:
Route::get('/login',LoginComponent::class);
LoginComponent::class:
class LoginComponent extends Component
{
public $count = 10;
public function render()
{
return view('livewire.auth.login')->layout('livewire.auth.app');
}
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
}
app.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
...
#livewireStyles
</head>
<body>
<div class="page-content">
<div class="content-wrapper">
#yield('content')
</div>
</div>
#livewireScripts
</body>
</html>
and then login.blade.php:
<div>
#section('content')
<div class="page-content">
<div class="content-wrapper">
<div class="content d-flex justify-content-center align-items-center">
<div style="text-align: center">
<button wire:click="increment"> + </button>
<button wire:click="decrement"> - </button>
<h1>{{ $count }}</h1>
</div>
</div>
</div>
</div>
#endsection
</div>
I would recommend to use proper rendering methods.
return view('livewire.auth.login')
->extends('livewire.auth.app')
->section('content');
And remove #section('content') from the login.blade.php
Check the docs on Rendering Components
I have tried the older #yield/#section Laravel style as described in the Livewire documentation and had no problem.
Your app.blade.php seems ok.
But your LoginController render method have to use extends():
public function render()
{
return view('livewire.auth.login')->extends('livewire.auth.app');
}
And you should remove #section from your login.blade.php component.
Related
I am creating a simple upload files web application using laravel in the backend and I am trying to print the response that is sent from the server -which is supposed to be informed about the uploaded file- in the console, but it shows me an empty string.
here is my controller:
<?php
namespace App\Http\Controllers;
use Carbon\Carbon;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Storage;
class UploadsController extends Controller
{
public function getUpload(){
return view('upload');
}
public function postUpload(request $request){
// //
$result = print_r($request,true);
$time = Carbon::now();
if ($request->hasFile('file')) {
$file = $request->file('file');
$extension = $file->getClientOriginalExtension();
$fileName = $file->getClientOriginalName();
//$upload_success = $file->storeAs('public',$file->getClientOriginalName());
$upload_success=Storage::disk('local')->put($fileName, fopen($file, 'r+'));
if ($upload_success) {
return response()->json(['request'=>$request->getContent()], 200);
}
else {
return response()->json('error', 400);
}
}
return response()->json('no file to upload', 400);
}
}
and my view where I am printing the response:
<html>
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>upload</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="/js/xhr2.js"></script>
<script type="text/javascript">
$(function(){
$('#upload').on("click",function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#file").upload("/upload",function(data){
$('#spin').css('display','none');
$('#msg').css('display','block');
console.log(data);
},function(prog,val){
$('#prog').html(val+"%");
$('#prog').width(''+val+'%');
if(val == 100){
$("#prog").html('Completed');
$('#spin').css('display','block');
}
});
});
});
</script>
</head>
<body>
<div class="container">
<div style="margin-top:5px"><input type="file" id="file" name="file" ></div>
<div style="margin-top:5px;margin-bottom: 5px">
<input type="button" id="upload" value="upload" class="btn btn-success btn-lg">
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100" id="prog"></div>
</div>
<div id="spin" style="display:none">
<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>
</div>
<div class="alert alert-success" style="display: none" id="msg" style="text-align: center">
<strong>Success!</strong>You have uploaded the file successfully
</div>
</div>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
and here is a sample of what I get:
I would know if I am doing it wrong, and if not, why it is empty,
Thanks.
You're not using a form element.
Wrap your inputs in a basic html form:
<form method="POST" action="#">
#csrf
...
</form>
Then use jquery to post the form to the laravel route.
I got a headache with the ajax return result. Can everybody show me what's wrong with my code?
I have a main layout named "home.php", some important codes in this file as belows:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="<?=base_url();?>favicon.ico">
<title>IT Ebooks - Knowledge Sharing<?php if(isset($title_page)) echo " | ".$title_page ?></title>
<link href="<?=base_url();?>css/bootstrap.min.css" rel="stylesheet">
<link href="<?=base_url();?>css/font-awesome.min.css" rel="stylesheet">
<link href="<?=base_url();?>css/custom.css" rel="stylesheet">
</head>
<body>
<div id="main-content" class="col-md-9"><!--I will load the content here based on my controller & action-->
<?php
if($this->router->fetch_class()=="ListBy"){
$this->load->view("listby");
}
elseif($this->router->fetch_class()=="Home"){
$this->load->view("index");
}
elseif($this->router->fetch_class()=="User"){
if($this->router->fetch_method()=="Signup")
$this->load->view('signup.php');
}
?>
</div>
<script src="<?=base_url();?>js/jquery-3.1.1.min.js"></script>
<script src="<?=base_url();?>js/bootstrap.min.js"></script>
<script src="<?=base_url();?>js/bootbox.js"></script>
<script src="<?=base_url();?>js/listby.js"></script><!--this file do ajax function-->
</body>
</html>
My Home controller:
<?php
class Home extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->view('home.php');
}
public function index(){
//Do nothing
}
} //class
?>
My index.php file:
<section id="latest"><!--Latest upload-->
<div class="row">
<div class="col-md-8">
<p class="text-center text-primary header">Latest Uploads</p>
</div>
<div class="col-md-4">
<div class="form-inline">
<label>Books per page : </label>
<select class="form-control" id="PageSize" name="PageSize">
<option value="12" selected>12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
</div>
</div>
<div class="col-md-12" id="ajax-content">Ajax content loaded</div>
</div>
</section>
My ajax function file "listby.js":
$(document).ready(function(){
$.ajax({
type:"POST",
url:"AjaxProcessing1/loadByCategory",
data:"PageNo="+1+"&PageSize="+12,
dataType: "text",
success: function(response){
alert(response);//I used alert to show the problem
//$('#ajax-content').html(response);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
})
My AjaxProcessing1 controller file:
<?php
class AjaxProcessing1 extends CI_Controller {
public function loadByCategory(){
$PageNo = $this->input->post('PageNo');
$PageSize = $this->input->post('PageSize');
$this->load->model('model_book');
$data['books'] = $this->model_book->get_latest_book($PageSize,$PageNo);
$this->load->view('ajax_result1',$data);
}
} //class
?>
My ajax_result1 page:
<?php
if(isset($books)){
?>
<div class="row">
<?php foreach($books as $book): ?>
<div class="col-md-3 col-sm-6">
<a href="<?=base_url();?>/ListBy/detail/<?=$book->id?>/<?=$book->slug?>">
<img class="anhsach" src="<?=base_url();?>img/cover/<?=$book->image;?>" alt="<?=$book->slug;?>"/>
</a>
</div>
<?php endforeach; ?>
</div>
<?php
}
?>
So, until here. Everything's OK when I'm in home page, the ajax function return the ajax_result1 as expected
[Pic1 - Load as expected][1]
But, when I'm in ListBy controller, the return of the ajax function is the main layout?
My ListBy Controller:
<?php
class ListBy extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->model('model_book');
}
public function index(){
//Nothing to do here
}
public function ListByCategory($category_id){
$data['title_page'] = "List by category";
$data['num_books'] = $this->model_book->number_of_books_bycategory($category_id);
$data['category_id'] = $category_id;
$this->load->view('home.php',$data);
}
} //class
?>
My listby.php file:
<?php
echo "<h3 class='text-center text-success'>".$num_books." book(s) found</h3>"
?>
<section id="cate">
<div class="row">
<div class="col-md-8">
<p class="text-center text-primary header">Select your books view per page</p>
</div>
<div class="col-md-4">
<div class="form-inline">
<label>Books per page : </label>
<select class="form-control" id="PageSize" name="PageSize">
<option value="12" selected>12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
</div>
</div>
<div class="col-md-12" id="ajax-content">Ajax content loaded</div>
</div>
</section>
<input type="hidden" id="total_record" value="<?=$num_books?>"/>
<input type="text" id="category_id" value="<?=$category_id?>"/>
<div class="row text-center">
<ul class="pagination">
</ul>
</div>
And the result I got when I'm in this controller (return the main layout):
[Not as expected][2]
So, what's going on with my code. Thanks so much for any help or suggestion in advanced.
[1]: https://i.stack.imgur.com/PeADW.png
[2]: https://i.stack.imgur.com/PAiO1.png
My project link in case you need: http://www.mediafire.com/file/ed1e31od1fk5vkg/itebooks-23Oct16.zip
Home extends CI_Controller { public function __construct() { parent::__construct(); //$this->load->view('home.php');
// THE PROBLEM is : you can't load the main/home layout in Home controller construct function }
I'm unable to work out why i'm getting the 404, if i turn
BundleTable.EnableOptimizations = false;
then everything works OK, but set it to
BundleTable.EnableOptimizations = true;
then I get
Failed to load resource: the server responded with a status of 404
(Not Found)
I cannot work this out and it only happens for css, js bundle works ok any help appreciated.
I'm Using VS2015 and Umbraco 7.2.1
using System.Web.Optimization;
namespace Web.UI
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-datepicker.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/font-awesome.min.css",
"~/Content/PagedList.css",
"~/Content/bootstrap-datepicker.css",
"~/Content/site.css"));
BundleTable.EnableOptimizations = true;
}
}
}
using System.Web.Optimization;
using Umbraco.Core;
namespace Web.UI
{
public class ApplicationEvents : ApplicationEventHandler
{
protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
<add key="umbracoReservedPaths" value="~/umbraco,~/install/,~/bundles/" />
#inherits UmbracoTemplatePage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<meta name="description" content="#ViewBag.Description" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10" style="text-align: center">
<img src="../../Images/Sitelogo.png" alt="Logo" width="300" />
</div>
</div>
<div class="row">
<div id="custom-bootstrap-menu1" class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa fa-home"> </i></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
</div>
</div>
</div>
</div>
</div>
<div class="container bottomPadding">
#RenderBody()
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<footer role="navigation">
<p>#Umbraco.RenderMacro("CopyrightDate")</p>
</footer>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
#RenderSection("datepicker",false)
</body>
</html>
Namespace
<add namespace="System.Web.Optimization"/>
added to web.config in Views Folder
Found answer to my problem, the following link explains http://letswritecode.net/articles/using-the-umbraco-client-dependency-framework-to-bundle-and-minify/
I have blade template namely default.blade.php in app/layout/ folder
<!doctype html>
<html>
<head>
#include('includes.head')
</head>
<body>
<div class="container">
<header class="row">
#include('includes.header')
</header>
<div id="main" class="row">
#yield('content')
</div>
<footer class="row">
#include('includes.footer')
</footer>
</div>
</body>
</html>
Folder structure:
app/views/layout/default.blade.php
app/views/includes/footer.blade.php
app/views/includes/head.blade.php
app/views/includes/header.blade.php
My controller namely blade.php
<?php
class Blade extends BaseController
{
public function layout()
{
return View::make('layout.default');
}
}
?>
Routes.php
Route::get('blade','Blade#layout');
I am pointing my controller in browser like:
http://localhost/laravel/public/blade
It is showing error:
Call to undefined method Illuminate\Support\Facades\Blade::getAfterFilters()
How can i fix it. Please help me.
You can't name your Controller BLADE, Blade is a facade for the Template engine in Laravel, rename your Controller, to something else then Blade.
you can find all Laravel internal Facades in your config\app.php at the key aliases
I am having trouble rendering a view in my controller. I am currently running Laravel 4 and below is my code. (BTW, I am still learning Laravel particularly the latest version that has not been released yet. I find it a bad idea to learn from the older versions because there seems to be a lot of changes for the current one.)
controllers/PluginsController.php
class PluginsController extends BaseController {
public function index()
{
return View::make('plugins.index')->with(array('title'=>"The Index Page"));
}
views/plugins/index.blade.php
#layout('templates.master')
#section('header')
<h1>The Header</h1>
#endsection
#section('content')
testing the index.blade.php
#endsection
#section('footer')
<div style="background:blue;">
<h1>My Footer Goes Here</h1>
</div>
#endsection
views/templates/master.blade.php
<!doctype>
<html>
<head>
<meta charset="UTF-8" />
#yield('meta_info')
<title>{{$title}}</title>
#yield('scripts')
</head>
<body>
<div id="header">
#yield('header')
</div>
<div id="wrapper">
#yield('content')
</div>
<div id="footer">
#yield('footer')
</div>
</body>
</html>
you must use #extends instead of #layout, and #stop instead of #endsection
Using #extends instead of #layout solved my problem.