I am a newbie developer and started to use Laravel to code.
My problem is that, I can't make this content changeable with the menu click.
I am really confused about how to use Ajax in this condition.
My routes.php:
Route::get('articles',array('as'=>'articles','uses'=>'articles#index'));
Route::get('author/(:any)', array('as'=>'article','uses'=>'articles#view'));
Route::get('abouts',array('as'=>'abouts','uses'=>'abouts#index'));
My default.blade.php(shortly included with the scripts)
<!DOCTYPE html>
<head>
<title>{{$title}}</title>
{{ HTML::script('js/jquery.min.js') }}
{{ HTML::script('js/ajax.js') }}
.......
</head>
<body>
........
<div id="wrapper">
<div id="page">
{{ $content }}
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-content">
<ul id="menu">
<li class="current">ANASAYFA</li>
<li>HAKKIMIZDA</li>
.......
<script type="text/javascript">var BASE = "<?php echo URL::base(); ?>";</script>
</body>
</html>
My views are inside div/#content.
My ajax.js :
$(document).ready(function() {
$('#sidebar-content ul li a').click(function(e) {
// prevent the links default action
// from firing
e.preventDefault();
// attempt to GET the new content
$.get(BASE +'#content', function(data) {
$('#content').html(data);
console.log(data);
});
})
});
My articles controller:
<?php
class Articles_Controller extends Base_Controller {
public $restful = true;
public $layout = 'layouts.default';
public function get_index(){
$this->layout->title = "Anasayfa";
$this->layout->content = View::make('articles.index')
->with('articles',Article::order_by('id')->get());
}
public function get_view($id){
$this->layout->title = "Hizmetlerimiz";
$this->layout->content = View::make('articles.view')
->with('article',Article::find($id));
}
}
You want to replace the content of <div id="page">.
I think you should write $('#page').html(data);
Related
I am displaying my events in calender. It will display it properly. But I want that when I click on that event it will redirect on particular event_detail page.
I am beginner in laravel so woll you please help me???
This Is my controller file
<?php
namespace App\Http\Controllers\Admin;
use Carbon;
use Calendar;
use App\Event;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class CalendarController extends Controller
{
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('auth');
}
/*
*Display All The Events In Calendar
*
*/
public function calendar()
{
$event = [];
$allEvent = Event::all();
if($allEvent->count())
{
foreach ($allEvent as $key => $eventList)
{
$event[] = Calendar::event(
$eventList->name,
true,
new \DateTime($eventList->event_date),
new \DateTime($eventList->evet_date)
);
}
}
$showInCalendar = Calendar::addEvents($event);
return view('admin.calendar.event_calendar', compact('showInCalendar', 'allEvent'));
}
}
This is muy blade file
#extends('admin.layout.default')
#section('css')
<link href="{{ url('assets/plugins/calendar/dist/fullcalendar.css') }}" rel="stylesheet" />
#endsection
#section('content')
<div class="row page-titles">
<div class="col-md-5 col-8 align-self-center">
<h3 class="text-themecolor">Calendar</h3>
<ol class="breadcrumb">
<li class="breadcrumb-item">Dashboard</li>
<li class="breadcrumb-item active">Calendar</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card card-outline-info">
<div class="card-body">
<div class="container">
<div class="row justify-content-center">
<div id="calendar">
{!! $showInCalendar->calendar() !!}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('jsPostApp')
{!! $showInCalendar->script() !!}
<script src="{{ url('assets/plugins/calendar/jquery-ui.min.js') }}"></script>
<script src="{{ url('assets/plugins/moment/moment.js') }}"></script>
<script src="{{ url('assets/plugins/calendar/dist/fullcalendar.min.js') }}"></script>
<script type="text/javascript">
</script>
#endsection
I dont know how to handle that hyperlink to open that particular event's detils page.
It's very easy to achieve that behavior.
You will need to set the property url in your event objects. Once you have it, you can use the callback eventClick to redirect the user. By default, eventClick will always redirect to link inside url.
If you want to display it in a different tab, or a popup, take a look at the section Cancelling Default Behavior in the eventClick link I posted here.
Owk I got the solution
public function calendar()
{
$event = [];
$allEvent = Event::all();
if($allEvent->count())
{
foreach ($allEvent as $key => $eventList)
{
$event[] = Calendar::event(
$eventList->name,
true,
new \DateTime($eventList->event_date),
new \DateTime($eventList->event_date),
null,
[
'url' => 'event/' .$eventList->id,
]
);
}
}
I am creating a web app having dashboard using laravel and vue.
When I pass data from controller to vue file data is received properly but when I set it to vue variable the value is not set in the variable. All data is received and its displayed in the console but when I set it to the vue variable, the variable doesn't update its value.
This is my Controller class:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class UsersController extends Controller
{
//
public function index()
{
$users=User::all();
return response()->json($users);
}
}
This is myTeam.vue for receiving and displaying the data:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Example Component</div>
<h1>
This request list
Hello,{{this.items}}
</h1>
<ul class="list-group">
<li class="list-group-item" v-for="t in items">{{items}}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
//items: []
items:[],
}
},
created() {
var self=this;
axios.get('/allusers').then((response) => self.items=response.data) .catch((error)=>console.log(error));
axios.get('/allusers') .then(response => console.log(response.data));
console.log('Component mounted.'+this.items)
},
}
</script>
Now when I run it the console prints the array properly means data is received but when I set it to items variable the data is not set.
My Output is this:
This is the output image file
Please check it and thanks in advance ...
This is never print items array because it's execute before the ajax response is filled.
console.log('Component mounted.'+this.items)
That's why your console is always blank. You can search about blocking and non blocking programming.
your code have small bug. Update your code and try this:
<h1>
This request list
Hello,{{items}}
</h1>
<ul class="list-group">
<li class="list-group-item" v-for="t in items">{{t}}</li>
</ul>
...
<script>
export default {
data(){
return {
items:[],
}
},
mounted: function () {
this.getList();
}
methods: {
let _this = this;
axios.get('/allusers')
.then((response) => _this.items = response.data)
.catch((error)=>console.log(error));
},
}
</script>
This can help you. Good luck.
I'm new to laravel and I got stuck.
My problem is I want 2 sections (navigation, content) that has dynamic data
Here's some code
Main Blade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
</head>
<body>
<div class="navigation">
#yield('menu')
</div>
<div class="content">
#yield('content')
</div>
</body>
</html>
portfolio blade
#extends('main')
#section('content')
#foreach($data as $portfolio)
<img src='{{ URL::asset("images/$portfolio->picture.jpg") }}'/>
#endforeach
#stop
and my navigation blade
#extends('main')
#section('menu')
#foreach($menuknoppen as $menuknop)
<a href='{{ URL::to("$menuknop->menu_url") }}'>{{$menuknop->menutitle}}</a>
#endforeach
#stop
the portfolio blade has a controller, but also the menu blade has a controller
Edit1:
the problem is the navigation isn't showing even if I add static text
Edit2:
My controllers
my portfolio controller
/**
* Show the profile for the given user.
*
* #param int $id
* #return Response
*/
public function index(){
//here comes a whole list with what i've done
$results = DB::table('projects')->get();
//return $results;
$data = array();
foreach ($results as $key => $result) {
$data[] = $result;
}
return view('portfolio.portfolio')->with('data', $data);
}
public function getProject($portfolio_url){
//this gets the project thats clicked
$results = DB::select('select * from projects where portfolio_url = ?', array($portfolio_url));
return view('portfolio.single')->with('data', $results['0']);
}
}
my navigation controller
class menuController extends Controller {
/**
* Show the profile for the given user.
*
* #param int $id
* #return Response
*/
// public function __construct($table){
// $results = DB::table($table)->get();
// return view('menu')->with('menuknoppen', $results);
// }
public function index(){
$results = DB::table('navigation')->get();
return view('menu')->with('menuknoppen', $results);
}
}
Your main blade should be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
</head>
<body>
<div class="navigation">
#include('menu');
</div>
<div class="content">
#yield('content')
</div>
</body>
</html>
Your portfolio should be:
#extends('main')
#section('content')
#foreach($data as $portfolio)
<img src='{{ URL::asset("images/$portfolio->picture.jpg") }}'/>
#endforeach
#stop
Navigation field should be:
//Don't use extends here
#foreach($menuknoppen as $menuknop)
<a href='{{ URL::to("$menuknop->menu_url") }}'>{{$menuknop->menutitle}}</a>
#endforeach
Pass multiple data
public function index()
{
$data = //data code;
$results = // results code
return view(portfolio.portfolio, compact('data', 'results'));
}
You have mixed the concept of #yield , #include and #extend
#yield provides a place for you to replace, so when you call #extend in other view you can reuse the template in view which you extend and replace the part with #yield
#include means this part of code is always replaced by the view it defined
So when you are designing a webpage, you need to make sure what is "always called" (use #include) and what could be replaced (use #yield)
As an assisting explanation to aldrin27 working code, I hope this make your mind clearer on the blade template, it rocks! :D
Hello and thanks for the help! I'm new to laravel and i'm trying to learn it through a tutorial that i found in youtube! http://www.youtube.com/watch?v=lceNwQf-ufY
Everything has been worked correctly until now!
I'm trying to make a list of all the rows of my table authors
My Controller authors.php
<?php
class Authors extends BaseController{
public function get_index(){
return View::make('authors.index')
->with('title', 'Authors Title')
->with('authors', Author::all());
}
}
My Model author.php
<?php
class Author extends Eloquent{
protected $table = 'authors';
}
My View index.blade.php
#extends('authors.layout')
#section('content')
<h2>Authors Page</h2>
<h3>Welcome to the authors page</h3>
<ul>
#foreach($authors as $author)
<li>{{ $author->name }}</li>
#endforeach
</ul>
#stop
And my layout layout.blade.php
<!DOCTYPE html>
<html>
<head>
<title>{{ $title }}</title>
</head>
<body>
#yield('content')
</body>
</html>
Routes.php
<?php
Route::get('/', function()
{
return View::make('hello');
});
Route::get('users', function()
{
return View::make('users');
});
Route::get('authors', array('uses'=>'authors#index'));
You should change in your routes.php
Route::get('authors', array('uses'=>'authors#index'));
to
Route::get('authors', array('uses'=>'Authors#get_index'));
Using Authors#get_index the first part is the name of controller (in your case it's Authors and the second part is the name of method - in your case it's get_index and not index.
I'm trying to use ajax to find the next page on my pagination. However it keeps bringing in the whole body. I've taken a print screen to show the problem.
I'm not an expert on ajax show would appreciate some help as to how I can rectify this issue?
My code is below:
public function viewall()
{
$data["projects"] = $projects = Auth::user()->projects()->paginate(3);
if(Request::ajax())
{
$html = View::make('projects.viewall', $data)->render();
return Response::json(array('html' => $html));
}
return View::make('projects.viewall')->with('projects', $projects);
}
Js/js.js
$(".pagination a").click(function()
{
var myurl = $(this).attr('href');
$.ajax(
{
url: myurl,
type: "get",
datatype: "html",
beforeSend: function()
{
$('#ajax-loading').show();
}
})
.done(function(data)
{
$('#ajax-loading').hide();
$("#projects").empty().html(data.html);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('No response from server');
});
return false;
});
viewall.blade.php
#extends("layout")
#section("content")
<div class="container">
<h4>Your Projects</h4>
<div id="ajax-loading" class="alert alert-warning" style="display: none;">
<strong>Loading...</strong>
</div>
#if (Auth::check())
#if (count($projects) > 0)
#foreach ($projects as $project)
<div class="one-third column" id="projects">
{{ $project->project_name }}
{{ $project->project_brief }}
{{ date("d-m-Y", strtotime($project->start_day)) }}
</div>
#endforeach
#else
<h5 class="errorslist">You have no projects click <a class="errorslist" href="/project/create">here to create a project</a></h5>
#endif
#endif
<div class="sixteen columns">
{{ $projects->links() }}
</div>
</div>
#stop
This line:
$("#projects").empty().html(data.html);
will fill the #project up with your returned html which you created here:
$html = View::make('projects.viewall', $data)->render();
So,you just need to change projects.viewall with only 'partial view' that you want to load.
Probably you don't need to extends your main layout.
But you render a view here:
$html = View::make('projects.viewall', $data)->render();
so html is created by Laravel and then you insert it as html into the #projects domElement.
I experienced this kind of problem, just run
dd( json_decode( json_encode( Products::paginate(5) ), true) );
and can get a hint :)
I have read a solution about this here:
http://www.tagipuru.xyz/2016/05/17/displaying-data-using-laravel-pagination-in-the-html-table-without-page-reload/