I can not find a solution how to include blade template using button click.
For example lets say I have a main view:
<div id="HEREGOESMYTEMPLATES">
</div>
<div class="row">
<button onclick="addTemplate()">ADD TEMPLATE</button>
</div>
Then script, which should include template
<script type="app/js">
function addTemplate()
{
//Get template and include into div with id HEREGOESMYTEMPLATE
}
</script>
And then the template itself (lets say partial.blade.php):
<div>Include me to main blade file</div>
Is there any possible way by including it without creating every tag in JS and then appending to the div?
Thank you.
UPDATE.
As blade template is not supposed to do such work as it is rendered in backend, I used VueJS to this, which I believe is the best solution in this situation.
Related
In Vue3, inline-templates were depreciated and now slots are used. Is it possible to have 2-way binding of variables for Vuejs components written in blade templates?
I want to have 2-way binding for Vue components that's written inline with blade templates. Although I know I can pass data like <example-component name="Hello World"> It is a ton of work to add props everywhere.
Vue recommends using slots as a inline-template replacement since it got removed in v3, however, that documentation makes no sense. I've got the components displayed using the code below. It's a dead simple text field + paragraph to display the name.
home.blade.php (Removed unnecessary HTML for brevity)
<div>
<h1>Dashboard</h1>
<example-component>
<div class="container">
<input v-model="name" placeholder="Change Name"/>
<p> Name is #{{ name }} </p>
</div>
</example-component>
</div>
example-component.vue
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
name: 'hi',
}
}
}
</script>
Unfortunately, this does not work, the name doesn't start as 'hi' and doesn't update when changing the textfield. When I try something like <slot :name=name></slot>. Which I believe would pass the name into the slots section, the component gets rendered for a second before disappearing.
Is having 2-way binding with vue variables in blade templates even possible? Any help is appreciated.
Vue: 3.0.5
Laravel: 8.29.0
Is there a reason you're storing the data in the child component? The reactivity design works by passing props down and emitting events up, even though (unfortunately) the reactivity is not maintained when passing a variable up to the parent component. Seems a little counter intuitive, but I might be missing something in what you're trying to create.
It will, however, work if you put the data into the app instead of the component.
// app
const app = Vue.createApp({
data() {
return {
name: 'hi',
}
}
})
// component
app.component('example-component', {
template: `
<div>
<slot></slot>
</div>`,
})
app.mount("#app");
<script src="https://unpkg.com/vue#3.0.5/dist/vue.global.prod.js"></script>
<div id="app">
<h1>Dashboard</h1>
<example-component>
<div class="container">
<input v-model="name" placeholder="Change Name"/>
<p> Name is #{{ name }} </p>
</div>
</example-component>
</div>
<!--
I am fairly new to Vue and currently am working on the first project with it.
I have encountered this problem which I cannot seem to find a solution for, I have "AuthPage.vue" component which has a slot for the message and default slot for content, once I put custom componen in my login.blade.php it should be prefilled in that slot but it says that custom element does not exist. If I replace slot inside .vue file with custom element it seems to be working perfectly. I am not sure what I am doing wrong.
AuthPage.vue
<template>
<div>
<div class="page-brand-info"></div>
<div class="page-login-main">
<img class="brand-img" src="/assets/global/images/logo.jpg">
<h3 class="font-size-24 text-center"><slot name="title"></slot></h3>
<slot name="message"></slot>
<slot></slot>
<footer class="page-copyright">
<p>© {{ moment().year() }}. All RIGHT RESERVED.</p>
</footer>
</div>
</div>
</template>
<script>
import LoginForm from './LoginForm.vue';
import ResetPasswordForm from './ResetPasswordForm.vue';
export default {
components: { LoginForm, ResetPasswordForm }
}
</script>
login.blade.php
#extends('backoffice.layout.auth')
#section('content')
<auth-page>
<template v-slot:title>Sign In</template>
<login-form></login-form>
</auth-page>
#endsection
Thank you for your help!
Eddie
You'll need to register the LoginForm component globally in order for it to be passed into the AuthPage component as a slot (when passed in directly from a view). This is because, outside the scope of your component, Vue doesn't know what <login-form> is.
Since you're using laravel, in your resources/js/app.js file add the following:
import LoginForm from './path/to/LoginForm.vue';
Vue.component('login-form', LoginForm);
I'm trying to yield a section inside another section. But this does not work as expected, I see blank output.
#section('3show')
This is a text string
#stop
#section('page-content')
<div id="content">
<article>
#yield('3show')
</article>
</div>
<!--#content-->
#stop
Any ideas to yield section inside another section ?
Ok, this is what I tried and I can confirm that this works, at least for Laravel 5+ (I have L5.2). This is how I suggest you to use your blade templates.
Lets start saying that to yield a section into another section you have to define your included section before container section definition. So, with that clear, I solved this situation like this:
I got a main blade (main.blade.php) template which has something like:
<section class="content">
<!-- Your Page Content Here -->
#yield('main-content')
</section><!-- /.content -->
I got a second blade (common.blade.php) template which has that common stuff you may want to show across many pages and where main-content section is defined. This one looks like:
#section('main-content')
<div class="container">
#yield('extra-content')
</div>
#endsection
Finally I got a 3rd template (test.blade.php) which extend the main template and include the common stuff I want to show, but be careful because the order matters. This one looks like:
#extends('main')
#section('extra-content')
<div>
<span> This is a test! </span>
</div>
#endsection
#include('common')
In your controller or your route (wherever you return your view), you should return the 3rd template.
In my projects i create some partials in order to have cleaner code and i give them as an example a name : 3show.blade.php. In order to use them in a section i just include them.
I think this will do what you want.
#section('content')
#include('3show.blade.php')
#endsection
I had the same issue.
You can't use the #extends option in this case, you need to use #include .
So lets say you have:
the root layout (layouts/app.blade.php)
an extra layout (layouts/extra.blade.php)
the actual view that you are calling (someview.blade.php)
The solution is to use add/inherit the root layout (1) to the top line of your view (3):
#extends('layouts.app')
Next, add/inherit the extra layout (2) to the second line of your view, BUT use #include not #extends:
#include('layouts.extra')
...and remember to wrap the content of your extra layout in an #section name, for example #section('extra')
Finally you can call your extra layout content from your view:
<p>Look below, you will see my extra content...</p>
#yield('extra')
So in summary, your someview.blade.php view would look like:
#extends('layouts.app')
#include('layouts.extra')
#section('content')
<p>Look below, you will see my extra content...</p>
#yield('extra')
#endsection
solution 1:
you can use #show instead of #stop at the end of section
then laravel will render your #yield parts ...
like this :
#section('page-content')
<div id="content">
<article>
#yield('3show')
</article>
</div>
#show # not #stop
#section('3show')
This is a text string
#stop
this way render you view and show result
so if you cll your section for twice then result will be shoed twice
solution 2:
insert call section before yiel it
like this :
**first call section :**
#section('3show')
This is a text string
#stop
**then define your section : 3show**
#section('page-content')
<div id="content">
<article>
#yield('3show')
</article>
</div>
#stop **not #show**
assume you have two files:
-article_base.blade.php -> the default data in every article.
-article_index.blade.php -> the customized file.
article_base.blade.php
#extends('layout')
#section('page-content')
<div id="content">
<article>
....
#yield('3show')
....
</article>
</div>
<!--#content-->
#stop
article_index.blade.php
#extends('article_base')
#section('3show')
This is a text string
#endsection
I hope this works
You have to both #include and #yield the child template in your main template to be able to add the child template at a specific place inside the main template (not just before or after the main template - this is done by adding #parent in the child template - but in between):
main.blade.php
#include('child')
<div>
...
#yield('child')
</div>
child.blade.php
#section('child')
<div>
...
</div>
#endsection
first of all i have a phtml page like this :
<div>
...
</div>
<form>
...
</form>
what i wanna do is display this phtml just like this shema and not inside html and body nodes
is there any possibility to do this ?
For now, I have the following structure of the web page:
<div id="container">
<div id="navigator"></div>
<div id="content"></div>
</div>
Literally, the div with id "navigator" is for navigating use. I can choose such as "home", "login", "register", etc. I want to use ajax to refresh the whole div with id "content".
So what should I do?
1) Apparently, I need to have these separate divs. But in what form? Should I use ui:composition or else?
2) What should be the ajax part? Can you give me an example?