In my Laravel 5.7 application I use laravel-jsvalidation plugin( https://github.com/proengsoft/laravel-jsvalidation/wiki/Basic-Usage )
and it worked ok,
I needed to including textarea input as tinyMCE editor and to use i with validation and I implemented it with 2 textarea inputs :
<div class="form-row mb-3 {{ in_array('description', $errorFieldsArray) ? 'validation_error' : '' }}">
<label class="col-xs-12 col-sm-4 col-form-label">Description</label>
<div class="col-xs-12 col-sm-8">
<span style="display: inline;">
{{ Form::textarea('description', isset($vote->description) ? $vote->description : '', [ "class"=>"form-control editable_field textarea_input ", "rows"=>"0", "cols"=> 120, "id"=>"description", "autocomplete"=>"off", "style"=>"width:0; height:0" ] ) }}
</span>
{{ Form::textarea('description_container', isset($vote->description) ? $vote->description : '', [ "class"=>"form-control editable_field textarea_input ", "rows"=>"5", "cols"=> 120, "id"=>"description_container", "autocomplete"=>"off" ] ) }}
</div>
</div>
where 1st textarea is for form submitting, as entered content is copied into it from 2nd textarea, which is used as
tinyMCE editor.
In tinyMCE definition I added rows:
setup: function (editor) {
editor.on('change', function () {
var current_context= tinymce.get(by_selector_container).getContent()
$('#' + by_selector).html( current_context );
});
},
where by_selector_container and by_selector are names of these textarea inputs. It works, but the only problem that on page I can see 1st textarea input,
despite I try to hide it setting wight/height in 0 in style of my code above, but anyway I still see small textarea input : https://imgur.com/a/43FRFJU
I tried in declaration of the 1st textarea input to set
"style"=>"display:none"
Than textarea input was hidden but validation does not work at all.
How to hide it this small textarea input with validation working?
Thanks!
You can try style:
visibility: hidden ;
Related
I have a select2 blade component that I'm using inside of a bootstrap modal. Everything is working as expected, except when the modal form is submitted, the styling of the select 2 is lost, and a new empty option (must be the placeholder) is shown as an option, but only in the selects where I'm doing a yes/no option where the value is either 1 or 0 (See code below).
The styling is messed up on all, but the extra placeholder option only shows up on some.
Here's the normal way it should look, and does look when you first open the modal after a page refresh:
After submitting the modal it looks like this (notice the extra placeholder option):
Here's the code for my select2 component:
#props(['id', 'usePlaceholder' => null])
<div wire:ignore style="width:100%;" id="select2-{{ $id }}">
<select {{ $attributes }} id="{{ $id }}" name="{{ $id }}[]" class="form-select select2" data-width="100%" data-select2-id="{{ $id }}">
#if ($usePlaceholder)
<option></option>
#endif
{{ $slot }}
</select>
</div>
{{-- blade-formatter-disable --}}
#push('custom-scripts')
<script>
$(document).ready(function() {
let select2 = $('#' + #js($id));
select2.select2({
dropdownParent: $('#select2-' + #js($id)),
placeholder: 'Select an option',
minimumResultsForSearch: 15
});
***The below listeners I can comment out, they have no effect as far as I can tell, just including them for reference***
window.addEventListener('hideModal', event => {
select2.val(null).trigger('change');
});
window.addEventListener('set'+#js(ucfirst($id)), event => {
select2.val(event.detail).trigger('change');
});
});
</script>
#endpush
{{-- blade-formatter-enable --}}
And here's where I'm actually using the component:
<div class="col-md-6">
<x-input.group label="Sales Tax" for="salesTax" :error="$errors->first('salesTax')">
<x-input.select2 usePlaceholder="{{ empty($salesTax) ? 'true' : '' }}" wire:model.defer="salesTax" id="salesTax">
<option name="no" id="sales-tax-0" value="0">No</option>
<option name="yes" id="sales-tax-1" value="1">Yes</option>
</x-input.select2>
</x-input.group>
</div>
I've tried destroying and re-initializing the select2 when the modal is dismissed, but that hasn't done anything for me.
I have a modal component which uses Alpine, which I made into a Blade component.
// Modal blade component
<div x-data="{ open = false }">
<div x-show="open"></div>
</div>
I want to share the open state with a Livewire component, but I don't know how to pass the #entangle directive through the component:
// Livewire component
<x-modal>
</x-modal>
I tried this:
// Modal Blade component
<div {{ $attributes }}>
<div x-show="open"></div>
</div>
// Livewire component
<div x-data="{ open = #entangle('livewire-state')}">
<div x-show="open"></div>
</div>
But the entangle directive just get parsed into string.
Your x-data object isn't properly syntaxed. You are using a = instead of a :. You should be seeing a console error also, if you happened to have the console open. Use the following syntax:
<div x-data="{ open: #entangle('livewire-state')}">
Read more on #entangle in the docs.
I have a wrapping formatting vue component with a slot, and two components that use it. When passing a list structure it works fine, as it does when using the wrapping div directly, but it fails when trying to pass a simple string. The first word of the string renders as expected, but the rest appears in the opening div. I've tried wrapping the mustached prop in additional html tags, but the content still doesn't render correctly.
Display Text component
<template>
<two-col-row-display
:field="field"
:fieldcss="fieldcss"
:valuecss="valuecss"
>
{{ value }}
</two-col-row-display>
</template>
<script>
export default {
props: {
field: {
type: String,
required: true,
},
fieldcss: {
type: String,
},
value: {
type: String,
default: '',
},
valuecss: {
type: String,
},
},
}
</script>
Two column row display wrapper component
<template>
<div class="gridwrap">
<div class="row field" :class="fieldcss">
{{ field + ':' }}
</div>
<div class="row value" :class="valuecss">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
field: {
type: String,
},
fieldcss: {
type: String,
},
valuecss: {
type: String,
},
},
}
</script>
Display Text used
<display-text
field="Description"
value={{ $recipe->description }}
></display-text>
But it outputs only the first part of the description "All" where it should. The rest of the description "of the recipe" gets output as an attribute of the wrapping div.
Output html
<div class="gridwrap" of the recipe>
<div class="row field"> Description: </div>
<div class="row value"> All </div>
</div>
Using the wrapping component directly works as expected, but I don't want to use that component directly.
<two-col-row-display
field="Description???"
>{{ $recipe->description }}
</two-col-row-display>
outputs the desired result for the display-text component
<div class="gridwrap">
<div class="row field"> Description???: </div>
<div class="row value">All of the recipe </div>
</div>
How can I modify the display-text component to render the text in the slot correctly?
I neglected to wrap the data passed to the value prop in quotes. The display text component should be filled out like:
<display-text
field="Description"
value="{{ $recipe->description }}"
></display-text>
Is there any way to get the data inside a modal? I know that it is possible to work with this through Jquery, but I would like to know if there is any way to work with Laravel itself. In a view, we can do this:
return view ('admin/users/index', ['datas1' => $ datas1, 'datas2' => $datas2];
but for a modal, is it possible to do something like this? to send my data through the controller and within my modal I check if this data are coming empty or filled, as this answer I just want to show different things, like this:
$dep = User::query()->where('dep_link', $id)->get();
return['status' => 'success', 'dep' => $dep];
only my validation in the modal:
<div class="row" style="padding: 28px 20px;">
<div class="col-12">
#if(empty($dep))
<div class="position-relative">
<label for="rg_titular">Selecione o RG do titular (.png .jpg .pdf)</label><br>
<input type="file" name="rg_titular" class="file-input"/>
<button type="button" class="file-button">Selecionar arquivo</button>
<span class="text-arquivo">Arquivo selecionado!</span>
</div>
#else
<a href="link" target="_blank">
Visualizar RG do titular
</a>
#endif
</div>
</div>
Is there any way I can get this data inside the modal window and work with them? I just want to check if it's coming empty or not, that's all.
You can write a view composer for the modal blade file.
https://laravel.com/docs/5.8/views#view-composers
In your service provider (app, or a custom one you make)
public function boot()
{
view()->composer('myBladeFileName', function ($view) {
$activeUsers = \App\User::where('active', true)->get();
$view->with(compact('activeUsers'));
});
}
I have a Template Driven Form in which i am putting a checkbox that can toggle its value.
Component
public toggles = [
{ value: 'toggled', display: 'Toggled' },
{ value: 'untoggled', display: 'UnToggled' },
];
<div>
<input type="hidden" name="toggle" [(ngModel)]="user.toggle">
<div>
<label>
<input type="checkbox"
[checked]="user.toggle === toggles[0].value"
(change)="$event.target.checked? (user.toggle = toggles[0].value) : (user.toggle = toggles[1].value)">
{{ toggles[0].display }}
</label>
</div>
</div>
The following works great, but when i am switching to Angular Material it just fails to works .
The material Template code
<input type="hidden" name="toggle" [(ngModel)]="user.toggle">
<md-checkbox [checked]="user.toggle === toggles[0].value"
(change)="$event.target.checked?(user.toggle = toggles[0].value): (user.toggle = toggles[1].value)">
{{toggles[0].display}}</md-checkbox>
I am getting the following Error in console, it says cannot read the property of undefined console,
TypeError: Cannot read property 'checked' of undefined
at Object.eval [as handleEvent] (TemplateDrivenComponent.html:64)
I know the point where the error is occurring $event.target.checked angular cannot read this checked event on md-checkbox , how to get around this any pointers will be great
thanks
Looking at comments try the following hope this solves the issue i guess you need not use target with event in Material.
<input type="hidden" name="toggle" [(ngModel)]="user.toggle">
<md-checkbox [checked]="user.toggle === toggles[0].value"
(change)="$event.checked?(user.toggle = toggles[0].value): (user.toggle = toggles[1].value)">
{{toggles[0].display}}</md-checkbox>