I am using UI Bootstrap in my project : UI Bootstrap
Problem : I cannot handle javascript <script> tags with blade templating. Getting internal server error (500)
Here's my Views path :
Views
includes
layouts
pages
Here's my includes/head.blade.php file :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<meta name="author" content="Scotch">
<title>Title</title>
{{ HTML::style('../public/css/bootstrap.min.css') }}
{{ HTML::script('//public/js/jquery-1.11.1.js')}}
Here's my layouts/home.blade.php file :
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
#include('includes.head')
{{ HTML::script('//public/js/ui.bootstrap.min.js') }}
{{ HTML::script('//public/js/angular.min.js')}}
{{ HTML::script('//public/js/example.js')}}
</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>
Here's my pages/home.blade.php file :
#extends('layouts.home')
#section('content')
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
#stop
Here's my public/js/example.js file :
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Here's my ui.bootstrap.min.js injection :
Now here's the problem :
I think in pages/home.blade.php file, i am having problem codes between <script></script> tags.
Check this out :
And here's the error i get (Sorry, the default language is Turkish)
As like i said, my purpose is using both UI Bootstrap and laravel blade templating.
Thanks in advance !
It's a little unclear if this is your only issue, but both Angular and Blade templates use the same tokens for denoting the begin / end of interpolated areas, i.e. {{ and }}. If you want to use them together, you will need to change one of them to something else, otherwise your angular code will be interpreted by Blade on the server and cause a 500 server error.
In Blade this looks like:
Blade::setContentTags('<%', '%>');
Blade::setEscapedContentTags('<%%', '%%>');
In Angular, it would look like this:
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
Related
I'm creating to get the user real-time location on a button click using laravel, pusher, and vue.js. All are working fine but I also insert auth Id and don't know how I use this in laravel using vue.js.
Please tell me how I save user auth id using vue.js.
ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<button class="btn btn-success" #click="updateLocation">Update Position</button>
<div class="card-body">
<div id="realtimemap" style="height: 412px; width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{
map:null,
marker:null,
center:{lat: 10, lng: 10},
data:null,
lineCoordinates:[]
}
},
methods:{
mapInit(){
this.map = new google.maps.Map(document.getElementById('realtimemap'),{
center: this.center,
zoom: 8
});
this.marker = new google.maps.Marker({
map: this.map,
position: this.center,
animation:"bounce",
});
},
updateMap(){
let newPosition = {lat:this.data.lat,lng:this.data.long};
this.map.setCenter(newPosition);
this.marker.setPosition(newPosition);
this.lineCoordinates.push(new google.maps.LatLng(newPosition.lat,newPosition.lng));
var lineCoordinatesPath = new google.maps.Polyline({
path: this.lineCoordinates,
geodesic: true,
map: this.map,
strokeColor: '#FF000',
strokeOpacity: 1.0,
strokeWeight: 2
});
},
updateLocation(){
let randomNumber=Math.random();
let position={
lat:10+randomNumber,
long:10+randomNumber
};
axios.post('/api/map',position).then(response=>{
console.log(response);
})
}
},
mounted() {
console.log('Component mounted.');
this.mapInit();
},
created(){
Echo.channel('location')
.listen('SendLocation', (e) => {
this.data=e.location;
this.updateMap();
console.log(e);
});
}
}
</script>
welcome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<div class="flex-center position-ref full-height">
<!--#if (Route::has('login'))
<div class="top-right links">
#if (Auth::check())
Home
#else
Login
Register
#endif
</div>
#endif-->
<div class="content">
<div class="title m-b-md" id="app">
<example-component></example-component>
</div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfRzdTIIRmsW1VaQiOzZCuRngBKqw3QUU&callback=initMap" type="text/javascript"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
the error message I get
Please help me.
Thanks in advance.
add this on your updateLocation().
let position={
lat:10+randomNumber,
long:10+randomNumber,
user_id:id_user
};
On your ExampleComponent.vue you need to define a new prop:
export default{
props: {
userId: {
type: string,
required: true,
}
}
}
On When you call the component you need to pass this prop:
<div class="content">
<div class="title m-b-md" id="app">
<example-component
:user-id="{{ Auth::user()->id }}"
></example-component>
</div>
</div>
on your updateLocation() function:
const position = {
lat: 10 + randomNumber,
long: 10 + randomNumber,
user_id: id_user
};
resources that may help you understand this solution:
Props VueJS
In my controller in have a method
public function collage(Request $request, Collage $collage){
return view('collage' , [
'collage_id' => $request->route('id'),
'src' => 'http://mysite.ru/images/collages/'.$collage->find($request->route('id'))->collage_path
]);
}
and in collage.blade.php meta
<meta property="og:url" content="{{$src}}" />
<meta property="og:image" content="{{$src}}" />
<link rel="image_src" href="{{$src}}" />
Also i use vue-social-sharing ( https://github.com/nicolasbeauvais/vue-social-sharing )
<template>
<div class="container">
<div v-if="collageSrc" class="col-md-12 collage">
<img class="img-responsive" :src="this.collageSrc"/>
<social-sharing :url="url"
title="test"
description="test"
quote="Vue is a progressive framework for building user interfaces."
hashtags="#test"
twitter-user="test"
inline-template>
<div>
<network network="facebook">
<i name="fa fa-facebook"></i> Facebook
</network>
<network network="telegram">
<i class="fa fa-telegram"></i> Telegram
</network>
</div>
</social-sharing>
</div>
<div class="col-md-12 collage" v-else>
<h1>you image is preparing...</h1>
</div>
</div>
</template>
<script>
export default {
name: 'collage',
props:['id'],
data: function(){
return {
collageWaiter: this.getCollageSrc(),
collageSrc: '',
url : '',
}
},
methods:{
getCollageSrc(){
const self = this;
axios.get('/api/generate?id='+this.id)
.then(function(result){
self.collageSrc = result.data;
self.url = "http://compgen.ru/collage/" + self.id;
});
}
}
}
</script>
I don't understand how to include my image to tag
<meta property="og:image" content="{{$src}}" />
for image to ensure that the picture is also transferred to the social network
I am new to AngularJS and i need your help. I have created a JSON file which consists of a list of items inside another list. I want to access the items in the second list but I don't know how. I have searched all day in the Internet but I hardly found anything useful. Please help me. Below is my code:
categoryItems.json
[
{
"$id":"1",
"name":"Business",
"cat":[
{
"cname":"CyberSecurity",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
},
{
"cname":"Google Cloud Platform for Systems Operations",
"img":"img3_2.jpg",
"cat_kurs":"6-course specialization",
"txt":"University of California"
},
{
"cname":"Data Security",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
}
]
},
{
"$id":"2",
"name":"Foreign Language",
"cat":[
{
"cname":"Data Security",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
},
{
"cname":"Google Cloud",
"img":"img3_2.jpg",
"cat_kurs":"3-course specialization",
"txt":"University of California"
}
]
}
]
script.js
var myItemsApp = angular.module('myItemsApp', []);
myItemsApp.factory('itemsFactory', ['$http', function($http){
var itemsFactory ={
itemDetails: function() {
return $http(
{
url: "categoryItems.json",
method: "GET",
})
.then(function (response) {
return response.data;
angular.forEach(data.itemDetails, function(item) {
});
});
}
};
return itemsFactory;
}]);
myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
var promise = itemsFactory.itemDetails();
promise.then(function (data) {
$scope.itemDetails = data;
console.log(data);
});
$scope.select = function(item) {
$scope.selected = item;
};
$scope.selected = {};
}]);
index.html
<!DOCTYPE html>
<html ng-app="myItemsApp">
<head>
<meta charset="utf-8" />
<title>Test</title>
<!-- <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/>
<script src="js/angular.min.js"></script>
<script src="js/angular.js"></script>
<script src="script.js"></script>
<style>
span.el{
background-color:#85929E;
font-size: xx-small;
font-color: #FDFEFE;
width: 60px;
}
span.txt{
font-size:xx-small;
}
div.cat{
background-color:#F2F3F4 ;
}
</style>
</head>
<body>
<div ng-controller="ItemsController">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<ul class="list-group">
<a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">{{item.name}}</a>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default" style="width: 70%">
<div class="panel-heading">{{selected.name}}</div>
<div class="panel-body">
<div ng-repeat="subcat in item.cat ">
{{subcat.cname}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Please HELP ME.
Looks like you need todo another ng-repeat on the sub categories.
<div class="col-md-8" ng-show="selected.name.length">
<div class="panel panel-default" style="width: 70%">
<div class="panel-heading">{{selected.name}}</div>
<div class="panel-body">
<div ng-repeat="subcat in itemDetails | filter:{name:selected.name}">
<div ng-repeat="cat in subcat.cat">
{{cat.cname}}
</div>
</div>
</div>
</div>
Have a look at this example ive mocked up for you
You need to deserialize the response using angular.fromJson
more reference: https://docs.angularjs.org/api/ng/function/angular.fromJson
I'm learning laravel 5.2 and trying to make a cms project by following a video tutorial. I have created the files as follows-
app/View/Composers/InjectPages.php
namespace App\View\Composers;
use App\Page;
use Illuminate\View\View;
class InjectPages
{
protected $pages;
public function __construct(Page $pages)
{
$this->pages = $pages;
}
public function compose(View $view)
{
$pages = $this->pages->all()->toHierarchy();
$view->with('pages', $pages);
}
}
app/Providers/AppServiceProvider.php
public function boot()
{
$this->app['view']->composer('layouts.frontend', Composers\InjectPages::class);
}
resources/views/welcome.blade.php
#extends('layouts.frontend')
#section('title', 'Welcome')
#section('heading', 'This is a heading')
#section('content')
<h1>Hello World</h1>
#endsection
public/themes/views/layouts/frontend.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#yield('title') — Tuts24.com</title>
<link rel="stylesheet" type="text/css" href="{{ theme('css/frontend.css') }}">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">
<img src="{{ theme('images/logo.png') }}" alt="Tuts24.com">
</a>
</div>
<ul class="nav navbar-nav">
#include('partials.navigation')
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
#yield('content')
</div>
</div>
</div>
</body>
</html>
public/themes/views/partials/navigation.blade.php
#foreach($pages as $page)
<li class="{{ Request::is($page->uri_wildcard) ? 'active' : '' }} {{ count($page->children) ? ($page->isChild() ? 'dropdown-submenu' : 'dropdown') : '' }}">
<a href="{{ url($page->uri) }}">
{{ $page->title }}
#if(count($page->children))
<span class="caret {{ $page->child() ? 'right' : '' }}"></span>
#endif
</a>
#if(count($page->children))
<ul class="dropdown-menu">
#include('partials.navigation', ['pages' => $page->children])
</ul>
#endif
</li>
#endforeach
But always getting the following error.
ErrorException in Container.php line 734:
Class App\Providers\Composers\InjectPages does not exist (View: /path/to/project/resources/views/welcome.blade.php)
I'm not sure, is these informations are sufficient to find out the error for you. If needed more information please let me know.
Looking forward to your response. Thanks.
Updates-
After several tries as answer it seems to me the following file is also related to this error. That's why I'm adding this code also and sharing a dropbox link of my learning project.
app/View/ThemeViewFinder.php
<?php
namespace App\View;
use Illuminate\View\FileViewFinder;
class ThemeViewFinder extends FileViewFinder
{
protected $activeTheme;
protected $basePath;
public function setBasePath($path)
{
$this->basePath = $path;
}
public function setActiveTheme($theme)
{
$this->activeTheme = $theme;
array_unshift($this->paths, $this->basePath.'/'.$theme.'/views');
}
}
Dropbox link
https://www.dropbox.com/sh/v8n1qvix20hywmo/AABVcs8DqvEhI89lw98mbxbya?dl=0
Try this:
composer('layouts.frontend', '\App\View\Composers\InjectPages::class');
Also, try to run composer dumpauto command.
Check it out
composer('layouts.frontend', '\App\View\Composers\InjectPages');
or
composer('layouts.frontend', \App\View\Composers\InjectPages::class);
Try by adding below code into composer.json
composer.json
"autoload": {
"classmap": [
"database"
],
"psr-4": {
"App\\": "app/"
},
"files":[
"app/View/Composers/InjectPages.php"
]
},
Do : composer dump-autoload
in : app/Providers/AppServiceProvider.php
public function boot()
{
view()->composer(
'layouts.frontend', 'App\View\Composers\InjectPages'
);
}
When i uploaded a file with the name "äüö.txt" the file on the ftp-server gets the name "-956.txt". This only happens when the name of the file contains special characters. How can I solve this problem?
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<script src="jquery-1.10.2.min.js"></script>
<script src="custom.fineuploader-4.0.3.js" type="text/javascript"></script>
<script type="text/template" id="qq-template-manual-noedit">
<div class="qq-uploader-selector qq-uploader">
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span>Drop files here to upload</span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list">
<li>
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div>
</script>
<script type="text/javascript">
$(document).ready(function () {
var manualuploader = $("#fine-uploader-fileUploadEmailCampaigns").fineUploader({
autoUpload: false,
multiple: false,
template: "qq-template-manual-noedit",
editFilename: {
enabled: false
},
request: {
endpoint: 'endpoint.php'
},
});
$('#triggerUpload').click(function () {
manualuploader.fineUploader('uploadStoredFiles');
});
})
</script>
<title>Unbenanntes Dokument</title>
<link href="custom.fineuploader-4.0.3.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="fine-uploader-fileUploadEmailCampaigns">
</div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">Upload</div>
</body>
</html>
PHP-Code:
<?php
// Include the upload handler class
require_once "handler.php";
$uploader = new UploadHandler();
// Specify the list of valid extensions, ex. array("jpeg", "xml", "bmp")
$uploader->allowedExtensions = array(); // all files types allowed by default
// Specify max file size in bytes.
$uploader->sizeLimit = 10 * 1024 * 1024; // default is 10 MiB
// Specify the input name set in the javascript.
$uploader->inputName = "qqfile"; // matches Fine Uploader's default inputName value bydefault
// If you want to use the chunking/resume feature, specify the folder to temporarily save parts.
$uploader->chunksFolder = "chunks";
$method = $_SERVER["REQUEST_METHOD"];
if ($method == "POST") {
header("Content-Type: text/plain");
// Call handleUpload() with the name of the folder, relative to PHP's getcwd()
$result = $uploader->handleUpload("files");
// To return a name used for uploaded file you can use the following line.
$result["uploadName"] = $uploader->getUploadName();
echo json_encode($result);
}
else {
header("HTTP/1.0 405 Method Not Allowed");
}
?>
My guess is that the locale ($LANG) you are using to write out the file does not match the locale of your OS. For example, to properly create a file with non-english characters in the name in my development environment (OS X, Java 7, IntelliJ) I need to be sure that the LANG environment variable associated with my JVM is "en_US.UTF-8", which matches the $LANG variable set in OS X.