I have done saved the contents inside the #descrition below.
<div id="description" contenteditable="true"></div>
My problem is when I try to display it does not display like an html format, it displays same like the saved data with <h1></h1> & <br>. It displays plain text only.
<div id="description" contenteditable="true">{{ $description }}</div>
The content I saved in my database & display:
<h1>Descriptoin</h1> Doner, where I built and maintained banner adverts and microsites. <br> And...
Someone know how to display this properly?
Answer: thanks to #Akram Wahid
In laravel - {!! $description !!}
In vue - <div v-html="description"> </div>
You have to do like this , because Blade {{ }} statements are automatically sent through PHP's htmlspecialchars function to prevent XSS attacks.If you do not want your data to be escaped, you may use the following syntax:
<div id="description" contenteditable="true">{!! $description !!}</div>
By default Laravel escape special characters to prevent XSS attack.
Try using this format:
<div id="description" contenteditable="true">{!! $description !!}</div>
Related
I make a draft implementation for my reusable input component.
The code below obviously throws an error.
Question is how to pass the $event back to register blade to get or log the value of the input?
register.blade.php
<div>
<x-input onChange="(value) => {console.log('value', value)}"></x-input>
<div/>
input.blade.php
#props(['onChange' => 'null'])
<input x-on:change="{{ $onChange($event) }}">
A few things here.
First off, your markup is wrong. You have a the closing slash at the wrong end of the closing div. Should be </div> not <div/>.
Then you're using x-on without x-data. Alpine only picks up components with the x-data attribute.
Finally, events propagate automatically, so you could just listen on the parent instead:
{{-- register.blade.php --}}
<div x-data>
<x-input x-on:change="console.log('value', $event.target.value)" />
</div>
{{-- input.blade.php --}}
<input {{ $attributes }}>
I learned we could just achieve this through Alpine.Js dispatch. I don't need to pass onClick props via Laravel component. I just simply use dispatch to listen the event (x-on).
What I like in this implementation is that,
aside of event information, passing of extra data is easy
you don't have to use Laravel props and assigned unnecessary props in the tag.
register.blade.php
<div>
<x-input x-on:custom-input="console.log('your values =', $event.target.newValue)"
></x-input>
<div/>
input.blade.php
<input x-on:change="$dispatch('custom-input', { newValue: $event.target.value })">
you can pass "key" prop to distinguish each component.
I dont know what I am doing wrong. I have some fields with images, I want to do an update to the database only if there is an image. I have tried setting to nullable but I keep on getting error the photo must be of type image.
This is my code in Livewire class:
$this->validate([
'photo1'=>'sometimes|image',
'photo2'=>'nullable|image',
'photo3'=>'nullable|image'
]);
In the blade
<div class="col-md-6">
<label>Front Right</label>
<input type="file" wire:model="photo1" accept="image/*">
<span class="text-danger">#error('photo1'){{ $message }}#enderror</span>
</div>
<div class="col-md-6">
<label>Flont Left</label>
<input type="file" wire:model="photo2" accept="image/*">
<span class="text-danger">#error('photo2'){{ $message }}#enderror</span>
</div>
</div>
Probably it's bit late for it, but I had the same issue and this is the solution:
If you are using updated instead of updating it will work. The problem when using updating is that the property does not have the file assigned, so it's still null during validation.
Let's say your are using updating() and your property name is $logo:
You would need to assign the $value to the property ($logo) before validation, e.g.:
function updating($key,$value) {
$this-logo = $value; // This line you need to add to make it work
$this-validateOnly($key);
}
I do simply use updated() instead.
Have you added enctype="multipart/form-data" in form element?
Add mimes in validation: 'photo2'=>'nullable|image|mimes:jpg,jpeg,png,svg,gif' and then check if it works.
A bit of background: I'm trying to create user-editable pages in a blog-style web application. The application consists of multiple pages worth of content included into one page; dynamically generated from the back-end and laid out one under the other.
Note: I am a Laravel newbie.
The content of the pages is kept in the DB; one DB record = page title + content. I retrieve all records and send them to the template:
class ContentController extends Controller {
var $current_content;
public function __construct() {
$this->current_content = Content::all();
}
public function serveContent() {
return View::make('home')->with('pages', $this->current_content);
}
}
Over in the template I iterate through the object with the freshly retrieved data and display the contents for each page:
#foreach($pages as $page)
<section class="page">
<div class="editable-page" id="{{ $page->page }}">
{{ $page->content }}
</div>
<div hidden class="editable-page-edit-mode" id="{{ $page->page }}">
<textarea class="page-edit">
{{ $page->content }}
</textarea>
</div>
<input hidden type="button" class="edit-btn" value="Edit {{ $page->page }} section"/>
</section>
#endforeach
(The textarea is for the edit mode, it contains the same content as above; except this time it will be sent back to the DB).
The problem is that when outputting the variable contents with {{ $page->content }}, an absurd amount of whitespaces seem to be introduced.
Here's how the section looks in the browser: http://prntscr.com/bzeu4l
And here's what happens behind the scenes: http://prntscr.com/bzets2
Normally it would be completely and utterly irrelevant to me since the content is displayed properly. But when I unhide the textarea, it's clear that it receives the exact same data, with whitespaces: http://prntscr.com/bzeum8
This is a big problem because I don't want the DB values to be overwritten with spaces.
I could work around this by using regex and stripping what has more than 2 spaces when I save the data. But this feels like a workaround, not a solution.
Does anyone know an elegant solution to this? Since I'm a Laravel newbie, it's very possible that I'm missing something obvious about displaying variable values in Blade.
Thanks in advance.
PS: If anybody has any suggestions about my approach / if my approach with the textarea is flawed, I warmly welcome criticism.
Also, I am terribly sorry for the vague layout of the page, it's still in a very incipient stage. In case it's not evident, 'testhomecontent' and 'testservices' are practically $page[0]->content and $page[1]->content.
In blade when all spaces between the contents are preserved. So, to get rid of spaces change your following code
<div hidden class="editable-page-edit-mode" id="{{ $page->page }}">
<textarea class="page-edit">
{{ $page->content }}
</textarea>
</div>
To this:
<textarea class="page-edit">{{ $page->content }}</textarea>
Change
<textarea class="page-edit">
{{ $page->content }}
</textarea>
To
<textarea class="page-edit">{{ $page->content }}</textarea>
I have a form on my website, which has required fields, and non required fields. The user fills in there details and submits the form. This is then emailed to the owner, and the data is then presented in a table.
However is it possible to show only the data that has been filled in and then remove the fields where no data was entered.
So far I have:
Blade Template:
div class="col-md-6">
<div class="row">
<div class="col-md-6">
<p><b>First Names</b></p>
</div>
<div class="col-md-6">
<p>{{ $first_names }}</p>
</div>
</div>
Which is then sent and is outputted as a table below:
<?php
if (!empty($titles)) {?>
<td class="tg-031e">Title:</td>
<td class="tg-031e">{{ $titles }}</td>
<?php }
?>
But I am assuming an else or else if statement would be required. So how would I have it so that only the fields that where filled in where shown in the table please.
Thanks
If you want to return nothing when there is no title the code below shoud make it work.
#if (isset($titles))
<td class="tg-031e">Title:</td>
<td class="tg-031e">{{ $titles }}</td>
#endif
Let me know if this worls :)
ps: #if(isset($titles)) does not work try #if($titles == NULL)
You can also try something like this:
http://laravel.com/docs/4.2/templates#other-blade-control-structures
Sometimes you may wish to echo a variable, but you aren't sure if the variable has been set. Basically, you want to do this:
{{{ isset($name) ? $name : 'Default' }}}
However, instead of writing a ternary statement, Blade allows you to use the following convenient short-cut:
{{{ $name or 'Default' }}}
Weird sentence.. weird issue.
I have some json like this:
{
"id":"1246",
"cost":"62.1603017827",
"material":"Blue",
"class":"veroblue",
"label":" ($62.16)",
"mlabel":"Blue",
"html":"<div class=\"quote\">\r\n\t<input type=radio name=\"QuoteUploads[selectedMaterial]\" value=\"1246\" checked=checked id=\"quote_uploads_quote_1246\" data-color=\"#A9BCF5\"\/>\r\n\t<label for=\"quote_uploads_quote_1246\" ><span class=\"swatch veroblue\"><span class=\"big veroblue\"><\/span> <\/span><span class=\"text\">Blue <span class=\"cost\">($62.16)<\/span><\/span><\/label>\r\n<\/div>\t"
},
When my page loads the above is already in an object qobj. When I console.log(qobj.html) I get:
<div class="quote">
<input type=radio name="QuoteUploads[selectedMaterial]" value="1250" id="quote_uploads_quote_1250" data-color="#FBF8EF"/>
<label for="quote_uploads_quote_1250" ><span class="swatch duruswhite"><span class="big duruswhite"></span> </span><span class="text">Polypropylene-Like <span class="cost">($62.21)</span></span></label>
</div>
Now, when an input changes I reload the JSON via AJAX and store it in qobj. After it is reloaded console.log(qobj.html) outputs:
</span> </span>Polypropylene-Like ($62.21)</span></span></label>
</div>
The json string is encoded and rendered the same way when it is injected and received via ajax. Does anyone have any idea why this is happening?