In my blade view, i have code like below:
<template v-if="section4">
<div class="progress-item mt-3">
<div class="progress-item-top text-align-center">
<span>TITLE</span>
#if($routeName === 'planner.home.show')
<div>
編集
<button class="btn btn-fill no_print" onclick="window.print();">印刷</button>
</div>
#endif
</div>
<div>
#include('planner.Meeting.mtr4')
</div>
</div>
</template>
It works fine in Chrome, but when i test in IE, it show nothing.
I tried to remove condition v-if in template tag and it worked!
So i think that IE has problem with template v-if="condition".
Any idea? Thank you!
Yes, IE11 doesn't support this tag <template>（from HTML5）, you should just change it to <div> tag and it will work the same way.
Related
I have an alert component that I hide using AlpineJS but I want it to be visible again after Livewire re-renders.
Showing the alert using Livewire component
#if(Session::has('success'))
<x-success-alert :message="Session::get('success')" />
#endif
AlpineJS component
<div x-data="{show: true}">
<div x-show="show">
<span>{{ $message }}</span>
<button #click="show = false">×</button>
</div>
</div>
The solution is to force Livewire to add that element in the dom again by adding wire:key to a random value.
<div wire:key="{{ rand() }}">
<div x-data="{show: true}">
<div x-show="show">
<span>{{ $message }}</span>
<button #click="show = false">×</button>
</div>
</div>
</div>
With that way, Livewire will destroy the old dom element and add the new one which re-init the Alpine component.
Just in case this helps anyone else, I have found that if an alpine component within a Livewire component is removed from the dom, it is not loaded correctly if reinstated *if the x-data directive is applied to the outermost element.
So, for example, just wrap the <x-success-alert> component in an additional div:
<div>
<div x-data="{show: true}">
<div x-show="show">
<span>{{ $message }}</span>
<button #click="show = false">×</button>
</div>
</div>
</div>
I've been trying multiple solutions but none of them worked out for me. Maybe because I am using
newest version of Laravel. So this place is my last hope.
All of these code snippets are inside one blade file.
#section('stylesheets')
<script src="https://cdn.tiny.cloud/1/[my-api-key]/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea',
menubar: false,
});
</script>
#endsection
And inside the content section I have this very simple code, later I will add other features,
but I am not moving on until this works out.
#section('content')
<div class="container">
<div class="card-body">
<form method="post">
#csrf
<div class="form-group row">
<label for="body" class="col-md-4 col-form-label text-md-right">Text</label>
<textarea name="body" id="body" class="form-control"></textarea>
</div>
</form>
</div>
</div>
#endsection
I have opened account on their website, and I have api key. But it doesn't work.
Also if you know some rich text editor other than Tinymce, that works fine with laravel 8, please share it.
The scripts are referring to wrong section, I moved everything inside content, and voila, it worked.
I need to include two blade files navbar & sidebar (located in views/layouts/partials) in another blade template named admin.blade.php (located in views/layouts). So in admin.blade.php. I wrote
<div class="page-body">
#include('partials.sidebar')
<div class="page-content-wrapper">
<div class="page-content-wrapper-inner">
<div class="content-viewport">
#include('partials.content')
</div>
</div>
</div>
</div>
it gives me this error:
Facade\Ignition\Exceptions\ViewExceptionView [partials.navbar] not
found.
Can you help me? thanks in advance.
You should put layouts as part of the path, so your template code should be like below:
div class="page-body">
#include('layouts.partials.sidebar')
<div class="page-content-wrapper">
<div class="page-content-wrapper-inner">
<div class="content-viewport">
#include('layouts.partials.content')
</div>
</div>
</div>
</div>
In classic bootstrap, this construction is easy:
<div class="panel panel-danger">
<div class="panel-heading">
Some HTML including a drop-down.
</div>
<div class="panel-body">
Panel body, lots of HTML here
</div>
<div class="panel-footer">
<button class="btn btn-default">Click me</button>
</div>
</div>
In the react-bootstrap implementation, there seems to be no way of including further html in the panel header or footer?
Try this
<Panel
header="Some HTML including a drop-down."
footer={<Button> Click me</Button>}
bsStyle="danger"
>
Panel body, lots of HTML here
</Panel>
You can use other props from bootstrap-react document
As per the react-bootstrap panel documentation:
<Panel>
<Panel.Heading>Panel heading</Panel.Heading>
<Panel.Body>Panel content</Panel.Body>
<Panel.Footer>Panel footer</Panel.Footer>
</Panel>
I'm using Laravel 5.0 and paginate along with the render() function in my view. Rather than go back to the top of the screen after I select the next page I want it to jump to #msgs.
Here is some of my code:
<h1 class="centered" id="msgs">Announcements</h1>
#foreach($messages->getCollection()->all() as $message)
<div class="row">
<div class="row">
<div class="col-sm-9">
<h3>{{$message->title}}</h3>
</div>
<div class="col-sm-3">
<h4>From: {{$message->author_name}}</h4>
</div>
</div>
<div class="row">
<p>{{$message->text}}</p>
</div>
</div>
<hr class="featurette-divider">
#endforeach
<div class="centered">
{!! $messages->render() !!}
</div>
I'm still getting a grasp on the flow of things in laravel so I'm not really sure what to do. I tried to use append->('#msgs') but realized that its appending an array in the parameters, not appending a path to the url. I there a simple way to achieve this without overriding anything?
You might want to use fragment() method:
{!! $messages->fragment('msgs')->render() !!}
Here is the link to the documentation: Pagination - Laravel