I am creating a blog now and I want to update a comment,
I want to pass the current data of the comment to the textarea that uses TINYMCE WYSIWYG editor.
The problem is if I use tinymce for the textarea the current data will NOT show on the textarea.
here is how I do it
This is the button that will trigger the modal:
<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#myModal" data-id="{{ $comment->id }}" data-comment=" {{ $comment->comment }}"><i class="fa fa-pencil"></i></button>
This is the modal
<!--UPDATE COMMENT Modal -->
<div class="modal fade modal-md" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content modal-success">
{{ Form::open(['route' => ['comments.update'], 'method' => 'PUT']) }}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title"><b>Update Comment </b></h5>
</div>
<div class="modal-body">
<div id="comment-form" class="">
<div class="row">
<div class="col-md-12">
{!! Form::hidden('id', '', ['id' => 'comment-id']) !!}
{{ Form::textarea('comment', '', ['id'=>'comment-comment','class' => 'form-control', 'rows' => '3']) }}
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success"><b>Update</b></button>
<button type="button" class="btn btn-default" data-dismiss="modal"> <b>Cancel</b></button>
</div>
{{ Form::close() }}
</div>
</div>
</div>
here is my js:
<script type="text/javascript" charset="utf-8">
tinymce.init({
selector: 'textarea',
menubar: false,
toolbar: false,
statusbar: false,
height: 10
});
<!--UPDATE COMMENT MODAL-->
$(function() {
$('#myModal').on("show.bs.modal", function (e) {
$("#comment-comment").val($(e.relatedTarget).data('comment'));
$("#comment-id").val($(e.relatedTarget).data('id'));
});
});
// Prevent bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
$('#open').click(function() {
$("#dialog").dialog({
width: 800,
modal: true
});
});
</script>
{!! Form::hidden('id', $data->id , ['id' => 'comment-id']) !!}
{{ Form::textarea('comment', $data->coment, ['id'=>'comment-comment','class' => 'form-control', 'rows' => '3']) }}
If you are using form open that case you need to specify a value like "$data->coment". And if you are using Form model that case it's not required to specify any value just need to add null. Check below link.
https://laravel.com/docs/4.2/html#form-model-binding
Related
I'm trying to create a page that when you click on add product button a modal pops up with a form that gets filled out.
What I'm trying to do is after you've submitted the form and there are errors then I would like for it to redirect back
and have the modal popup with the error messages.
Here is my code
My controller
public function addProduct(Product $product)
{
$validator = Validator::make(request()->all(), [
'title' => 'required'
]);
if($validator->fails())
{
return redirect()->back()->with([
'errors' => $validator->errors()
])
}
}
My blade file
<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#addProductModal">
<i class="fa fa-plus"></i> Add Product
</button>
#include('admin.product.add-product')
and this is my modal
<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addProductModalLabel">Add a Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('admin.product.addProduct') }}" method="post">
#csrf
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Save changes</button>
</div>
</form>
</div>
</div>
</div>
You can achieve that using sessions.
I'm using Form Requests for validation, and in my CreateCategoryRequest I added:
public function withValidator($validator)
{
if ($validator->fails()) {
\Session::flash('create_category_error', 'Create category validation failed!');
}
}
In blade:
#if (session('create_category_error'))
<script type="text/javascript">
$('#myModal').modal('show');
</script>
#endif
Yes it's that simple :P
Happy coding!
You can use this also.
<!-- Test if validation failed; hence show modal -->
#if($errors->getBag('default')->first('name') != '')
<script type="text/javascript">
$(document).ready(function(){
$("#addProductModal").modal('show');
});
</script>
#endif
I am trying to pass in a value from a form into the controller.
my blade
<div class="modal fade" id="endModals{{ $example->ID }}" tabindex="-1" role="dialog" aria-labelledby="endModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Are you sure you want to End this Task?
Please Select a day to End this Task.
<input type="date" id="EndDate" name="EndDate" title="Date" class="form-control" required
value="{{ isset($searchParams['EndDate']) ? $searchParams['EndDate'] : Carbon\Carbon::now() }}"
>
</p>
</div>
{{ Form::model($example, ['route' => [‘example.end', $example->ID ?? 0], 'method' => 'PUT']) }}
#method('PUT')
<div class="modal-footer">
<button type="button" onclick="end()" class="btn btn-primary">End</button>
{{ Form::submit('End', ['class' => 'btn btn-danger']) }}
{{ Form::close() }}
</div>
</div>
</div>
</div>
I am trying to get the value of EndDate :
function giveDate() {
let Date = $('#EndDate').val();
$.ajax({
url: 'example/end',
type: 'POST',
data: {
'Date': Date,
},
success: function (response) {
console.log(Date)
},
error: function () {
alert('An error occurred');
},
});
}
window.giveDate = giveDate
And in my controller I have this function public function
$EndDate = $request->input('EndDate');
$end = ClientMedicationRecurrence::end(
$id,
$EndDate
);
I however keep getting back the error of
Argument 2 passed to App\Example::end() must be an
instance of DateTime, null given, called in
How do I get the value of EndDate back into the controller ?
Date is actually a reserved JavaScript keyword so avoid using it. In your ajax call do like this:
let get_date = $('#EndDate').val();
$.ajax({
url: 'example/end',
type: 'POST',
data: {
'EndDate': get_date,
},
success: function (response) {
console.log(Date)
},
error: function () {
alert('An error occurred');
},
headers: {
// Add The CSRF Token to the Ajax header.
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
});
Also, notice that I have changed the name of the data being passed as "EndDate", so that you can access it in your controller.
You have also forgotten to submit CSRF token as well which is not the Laravel way of form submission. So, I have added it in the Ajax header.
I found solution that does not require AJAX or jquery
I needed to place the input under the #method('PUT') that was already in my blade
so this:
<div class="modal fade" id="endModals{{ $example->ID }}" tabindex="-1" role="dialog" aria-labelledby="endModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Are you sure you want to End this Task?
Please Select a day to End this Task.
<input type="date" id="EndDate" name="EndDate" title="Date" class="form-control" required
value="{{ isset($searchParams['EndDate']) ? $searchParams['EndDate'] : Carbon\Carbon::now() }}"
>
</p>
</div>
{{ Form::model($example, ['route' => [‘example.end', $example->ID ?? 0], 'method' => 'PUT']) }}
#method('PUT')
<div class="modal-footer">
<button type="button" onclick="end()" class="btn btn-primary">End</button>
{{ Form::submit('End', ['class' => 'btn btn-danger']) }}
{{ Form::close() }}
</div>
</div>
</div>
</div>
becomes this :
<div class="modal fade" id="endModals{{ $example->ID }}" tabindex="-1" role="dialog" aria-labelledby="endModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Are you sure you want to End this Task?
Please Select a day to End this Task.
</p>
</div>
{{ Form::model($example, ['route' => [‘example.end', $example->ID ?? 0], 'method' => 'PUT']) }}
#method('PUT')
<input type="date" id="EndDate" name="EndDate" title="Date" class="form-control" required
value="{{ isset($searchParams['EndDate']) ? $searchParams['EndDate'] : Carbon\Carbon::now() }}"
>
<div class="modal-footer">
<button type="button" onclick="end()" class="btn btn-primary">End</button>
{{ Form::submit('End', ['class' => 'btn btn-danger']) }}
{{ Form::close() }}
</div>
</div>
</div>
</div>
my controller function then just needed a slight tweak
$EndDate = $request->input('EndDate');
$end = ClientMedicationRecurrence::end(
$id,
$EndDate
);
Here is my button:
my $post->comment contained id, comment, email and name;
I want to pass the comment to the form inside the modal.
I also want to use the id to the 2nd parameter of the route to update the comment
#foreach($post->comments as $comment)
<button class="btn btn-success btn-xs " data-toggle="modal" data-target="#myModal" data-id="{{ $comment->id }}" data-comment=" {{ $comment->comment }}"><i class="fa fa-pencil"></i></button>
#endforeach
Here is my modal:
<!-- Modal -->
<div class="modal fade modal-md" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Comment Update!</h4>
</div>
<div class="modal-body">
<div id="comment-form" class="">
{{ Form::open(['route' => ['comments.store', $post->id], 'method' => 'POST']) }}
<div class="row">
<div class="col-md-12">
<b>{{ Form::label('comment', "Comment:") }}</b>
{{ Form::textarea('comment', null, ['class' => 'form-control', 'rows' => '5', 'id'=>'comment ']) }}
</div>
</div>
{{ Form::close() }}
</div>
</div>
<div class="modal-footer">
<a href="{{route('comments.store',$post->id) }}"
onclick="event.preventDefault();
document.getElementById('comment-update').submit();" class="btn btn-primary">
Update </a>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
I tried this Script but it wont work:
<script type="text/javascript" charset="utf-8">
$('#myModal').on('show', function(e) {
var link = e.relatedTarget();
var id = link.data("id");
var comment = link.data("comment");
var modal = $(this);
modal.find("#id").val(id);
modal.find("#comment").val(comment);
});
you must using on click event in javascript
example:
<button class="btn btn-success btn-xs add" data-toggle="modal" data-target="#myModal" data-id="{{ $comment->id }}" data-comment=" {{ $comment->comment }}"><i class="fa fa-pencil"></i></button>
this script.
$(document).on('click', '.add', function() {
$('#id_kategori').val($(this).data('id'));
$('#comment').val($(this).data('comment'));
$('.form-horizontal').show();
$('#myModal').modal('show');
});
i hope my answer helping you
I'm new to Vue JS and I'm building an application with Laravel Spark and trying to utilize Vue as much as possible.
I have a form to simply add an 'Asset Type' with a component. Once the Asset Type is successfully created, a list of properties is grabbed from the database and set to a 'data' attribute. In my view(I'm using an inline template), I have a 'v-for' that creates a form for each property that has two hidden inputs for the property id and the type id, and one "Add" button that assigns the property to the newly created type.
THE PROBLEM:
I can't seem to assign the value of the hidden inputs within the view while using v-models. When I submit one of the forms, the form request data always returns the initial data value from the new SparkForm object.
In other words, I need to assign the hidden input values within the v-for loop in the view.
Here's my component:
Vue.component('new-asset-type', {
props: [],
data() {
return {
// type_id: this.type_id,
properties: this.properties,
newAssetType: new SparkForm({
label: null,
enabled: false,
}),
assignPropForm: new SparkForm({
prop_id: "",
type_id: "",
}),
};
},
methods: {
createType: function () {
Spark.post('/asset-types', this.newAssetType)
.then(response => {
this.type_id = response.type_id;
axios.get('/getTypeNotProps/' + this.type_id).then((response) => {
this.properties = response.data;
console.log(this.properties);
});
})
.catch(response => {
console.log("fail");
});
},
assignProp: function () {
Spark.post('/asset-properties/add', this.assignPropForm)
.then(response => {
console.log(response);
})
.catch(response => {
console.log("fail");
});
}
}
});
And here's my view:
#extends('spark::layouts.app')
#section('content')
<new-asset-type inline-template>
<div class="container">
<!-- Application Dashboard -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Add a New Asset Type</div>
<div class="panel-body" id="addTypeForm">
<div class="form-horizontal">
<div class="form-group" :class="{'has-error': newAssetType.errors.has('label')}">
{{ Form::label('label', 'Label', ['class' => 'col-md-4 control-label']) }}
<div class="col-md-6" >
<input type="test" name="label" v-model="newAssetType.label">
<span class="help-block" v-show="newAssetType.errors.has('label')">
#{{ newAssetType.errors.get('label') }}
</span>
</div>
</div>
<div class="form-group">
{{ Form::label('enabled', 'Enabled?', ['class' => 'col-md-4 control-label']) }}
<div class="col-md-6">
<input type="checkbox" name="enabled" v-model="newAssetType.enabled" >
</div>
</div>
<!-- Submit -->
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button class="btn btn-primary" #click="createType" :disabled="newAssetType.busy">
Create Asset Type
</button>
</div>
</div>
<div id="assignProps" v-if="newAssetType.successful">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Add Property
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Property to Asset Type</h4>
</div>
<div class="modal-body">
<assign-asset-prop v-for="property in properties" class="panel panel-info property-item">
<div class="panel-heading">#{{ property.label }}</div>
<div class="panel-body"><strong>Input Type: </strong>#{{ property.input_type }}
<div class="pull-right">
<input type="hidden" name="prop_id" v-bind:value="property.p_id" v-model="assignPropForm.prop_id">
<input type="hidden" name="type_id" v-bind:value="property.p_id" v-model="assignPropForm.type_id">
<button class="btn btn-primary" #click="assignProp" :disabled="assignPropForm.busy">
Add
</button>
</div>
</div>
</assign-asset-prop>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</new-asset-type>
#endsection
Thanks to the helpful comments, I learned that I shouldn't have been using hidden inputs at all. Instead, I simply passed the variables to the function on the click event.
<button class="btn btn-primary" #click="assignProp(type_id, property.p_id)" >
Add
</button>
Then in my component
methods: {
assignProp: function (type_id, property_id) {
var assignPropForm = new SparkForm({
propvalue: property_id,
typevalue: type_id,
});
Spark.post('/asset-properties/add', assignPropForm)
.then(response => {
console.log(response);
})
.catch(response => {
console.log("fail");
});
}
}
You need store variables at local data() dep., and geting it by getters function.
I have some problem to delete data with confirmation (in this case using modal box) in laravel.
This is my delete button
{{ Form::open(array(
'route' => array('delete_spk', $spk_data->id),
'method' => 'put',
'style' => 'display:inline'
))
}}
<button class="btn btn-danger btn-line btn-rect" type="submit" data-toggle="modal" data-target="#delSpk" data-title="Delete SPK" data-message='Are you sure you want to delete this data ?'>
<i class="icon-trash icon-white"></i> Delete</button>
{{ Form::close() }}
This is the modal box
<!--MODAL DELETE SPK-->
<div class="col-lg-12">
<div class="modal fade" id="delSpk" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="H4"> Delete SPK</h4>
</div>
<div class="modal-body">
<p class="help-block">Are you sure you want to delete this data ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-line btn-rect" id="confirm">Yes</button>
<button type="button" class="btn btn-primary btn-line btn-rect" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
<!--END OF MODAL DELETE SPK-->
<!-- Dialog show event handler -->
<script type="text/javascript">
$('#delSpk').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
// Pass form reference to modal for submission on yes/ok
var form = $(e.relatedTarget).closest('form');
$(this).find('.modal-footer #confirm').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#delSpk').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
</script>
This is the route
Route::get('spk/destroy/{id}', array('as'=>'delete_spk','uses'=>'SpkController#destroy'));
And this is the Controller for delete the data
public function destroy()
{
$spk= Spk::find(Input::get('id'))->delete();
Session::flash('message', 'Successfully deleted the SPK !');
return Redirect::to('spk_view');
}
The modal box is working, but when I'm getting the ID to delete, this will be ended with results "method not allowed http exception". Can someone help me please?
This issue happens because you have defined the route as GET but submitting the form as PUT
If you define you route as below then it must work
Route::put('spk/destroy/{id}', array('as'=>'delete_spk','uses'=>'SpkController#destroy'));