I have problem because im using angular with laravel.I added this in routes.php
Blade::setContentTags('<%', '%>'); // for variables and all things Blade
Blade::setEscapedContentTags('<%%', '%%>'); // for escaped data
But its not working because im getting an error when i display data from angular.
Any suggestion how can i fix this?
For example if i say:
{{'test'}} it works but if i say {{response.test}} where response is from angular i get an error because laravel thinks that is his.
Blade will ignore anything preceded by the # character. Try that.
first confing laravel blade and angular js
<script type="text/javascript">
var app = angular.module('myApp', [])
.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('<%=');
$interpolateProvider.endSymbol('%>');
});
</script>
write your angular code like this
<%= cs.Category_name %>
Related
Am totally lost here. I've made multiple applications with Livewire + AlpineJS + Laravel before, but for some reason I cannot get the #click functionality working for functions in this app.
I reduced the code to almost nothing and cannot see the issue. Have looked at other apps where I have #click working.
<div x-data="showAppSettings()">
<div #click="whatever(123)">Click here</div>
<script type="text/javascript">
window.showAppSettings = () => {
return {
showNav: false,
whatever(id)
{
}
};
}
</script>
Upon clicking the click me and triggering the function, I get the error ReferenceError: whatever is not defined.
Works just fine if I do something like #click="alert('hey')"
What am I missing?
The issue was related to including <script src="{{ asset('js/app.js') }}" defer></script>
That file was not even in use. But either way, the error was being triggered by app.js which I realized made no sense since the code was inline.
Upon removing that line, everything works as intended.
It's needed the defer attribute to load fine the alpine script:
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
I use Laravel 5.4 and React 15.5.4, code is writing in ES6.
I'd like replace Vue and use React and I did it. But I often will use small components for example 2 in different places of blade template. I don't want use one app component.
I'd like use something like:
<span class="react">
<TestComponent property={true} />
</span>
I can't do it automatically. Now I use
<span data-component="TestComponent" data-props="{property:true}" />
and in app.js
_.each(document.querySelectorAll('[data-react]'), element => {
let props ={};
Array.prototype.slice.call(element.attributes)
.forEach(item => {
props[item.name] = item.value;
if(item.name !== 'data-react'){
element.removeAttribute(item.name);
}
});
ReactDOM.render(React.createElement(reactComponents[element.getAttribute('data-react')],props),element);
});
It works but I need to use add all properties to one react component property and then use for example this.props.out.propery
I also would like set normal component tag in my blade component
I've try to use in app.js
_.each(document.querySelectorAll('.react'), item => {
ReactDOM.render(item.children,item);
});
Someone have any idea to solve this problem?
EDIT
I changed my solution to:
<span data-react="LoginForm" input="{{json(request()->old())}}" error="{{session('error')}}" errors="{{json($errors->getMessages())}}" />
or
<LoginForm data-react="LoginForm" input="{{json(request()->old())}}" error="{{session('error')}}" errors="{{json($errors->getMessages())}}" />
in blade and in resources/assets/js/app.js
var reactComponents = {
LoginForm: require('./components/login').default,
};
_.each(document.querySelectorAll('[data-react]'), element => {
let props ={};
Array.prototype.slice.call(element.attributes)
.forEach(item => {
props[item.name] = item.value;
});
ReactDOM.render(React.createElement(reactComponents[element.getAttribute('data-react')],props),element);
});
It works fine. This is not super clear solution but I have impression that the reasonable.
I can set components name in html code and add props almost same like in JSX.
As far as I know, you can not mix JSX components directly with Blade templates. The only server side rendering available today for React is NodeJS.
What you could do to improve your architecture is add specific HTML tags with certain ids and render the react components in them. So inside Blade you could do something like:
<div id="componentA"></div>
This will act as a place holder in your Blade template for that react component. Then you render your componentA from your app.js like this:
React.render(<ComponentA prop1='valueX'/>, document.getElementById("componentA"))
Remember that in this case the world of react and world of Blade run at different times.
You could use document.getElementsByTagName('LoginForm') getting all the instances and later iterate its attributes. It's clear code but not generic, because it will work just for LoginForm components.
If you want to render any tag name, then maybe it's better to use some attribute as you used with data-react.
getElementsByTagName isn't super supported by old browsers so maybe could a good idea to use jQuery as fallback $('LoginForm')
Im learning laravel. I wanna ask a stupid question. Hope be helped from all of you.
When a controller return a view, I can send value blade template.
return view('home', ['message' => 'this is home page']);
I can get that from home.blade.php as:
<h1>{{$message}}</h1>
I can even send that value to javascript by the way below:
var message = "{{$message}}";
Yeah, that it!
But how can i send that value to separate javascript file.
/resources/views/home.blade.html:
<script src="/js/home.js"></script>
how can i get that value to /public/js/home.js if i dont use the way below?
<script>var message = {{$message}}</script>
<script src="/js/home.js"></script>
Thank for reading!
You can make a script tag contain all your dynamic values, and make your file
/js/home.js
use it
like this
<script>
var appSettings = {message :"{{$message}}"};
</script>
<script src="/js/home.js"></script>
so inside home.js
you can access this value
alert(appSettings.message);
I'm using Laravel 5.1. I am trying to use a Blade directive (#extend) with my custom Blade directive.
Blade::directive('base', function() use ($theme) {
return "#extends($theme)"
});
However, the above code only literally displays the contents (#extends($theme))
Contrary to a comment I made earlier, I think this is possible (but untested) using the blade compiler.
Blade::directive('base', function() use ($theme) {
return Blade::compileString("#extends({$theme})");
});
I am creating documentation for my blade based components in a laravel project and would like to display syntax highlighted blade code snippets as part of the documentation a la something like this:
I have installed graham-campbell/markdown package and I try use it inside a .blade.php file as follows:
(Do not mind the escape character)
However, the output I get is as follows:
You can wrap the Blade in a #verbatim directive and use Highlight JS with a style you like
<p>You can use the laravel code template like this</p>
#markdown
```php
#verbatim
#include('components.inputs.text', [
'name' => 'input_name',
'label' => 'testing',
])
#endverbatim
```
#endmarkdown
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/a11y-dark.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
Result
Hope this helps