This week we will see on the challenges faced in Laravel Bootstrap Modal. One of the primary thing is on pre population of old values. The important issue is to pre populate old values in the modal and display the error message against the respective textbox. We can solve this issue with the help of a Helper Class as we have described below.
Helper classes
The following functions are used for displaying old() values / current values and validation error messages in a Model.
Display the error messages
function showErrorMessage($errors, $fieldName, $oldModalName = null, $modelName = null)
{
if ($errors->has($fieldName) && ($oldModalName == $modelName)) {
return “<span class=’error errorMessage’><strong>” . $errors->first($fieldName) .
“</strong></span>”;
}
}
Pre-populate data
function showOldData($errors, $fieldName, $object = null, $oldModalName = null, $modelName = null, $databaseFieldName = null)
{
if ((count($errors) > 0) && ($oldModalName == $modelName)) {
return old($fieldName);
} else {
if ($object != null) {
if ($databaseFieldName != null) {
return $object[$databaseFieldName];
} else {
return $object[$fieldName];
}
} else {
return ”;
}
}
}
View file
<input type=”hidden” name=”customerModal”
value=“edit-customer-modal-{{ $customer->id }}”>
<div class=”form-group”>
<label class=”control-label”>Name *</label>
<input type=”text” name=”name” class=”form-control”
value=”{{ showOldData($errors, ‘name’, $customer, old(‘customerModal’),
‘edit-customer-modal-‘ . $customer->id) }}” required>
{!! showErrorMessage($errors, ‘name’, old(‘customerModal’),
‘edit-customer-modal-‘ . $customer->id) !!}
</div>
In this view file, we call the showOldData() helper function to get the old values or to show the current values for particular modal. It is very useful when edit option is in the table or data table and displaying the edit option in modal without Ajax call.
Arguments used in showOldData() method
First : errors object.
Second : pass the input field name (or corresponding database field name).
Third :pass the object or collection( if it is edit option pass object , else if it is create option pass null).
Fourth : pass the old value of current modal id (if the edit option is in the page, you need to give this as null).
Fifth : pass the current modal id (if the edit option is in the page, you need to give this as null).
Sixth : if the input element name and the database field name are different, pass the database field name(optional).
Eg for sixth argument
<input type=”email” name=”emails[]” class=“form-control”
value=”{{ showOldData($errors, ’emails.0′, $customer->emails->first(), old(‘customerModal’), ‘edit-customer-modal-‘ . $customer->id, ’email’) }}” required>
Arguments used in showErrorMessage() method
First : errors object.
Second : pass the input field name.
Third : pass the old value of current modal id (if the edit option is in the page, it is not required).
Fourth : pass the current modal id (if the edit option is in the page, it is not required).
Hope this has helped you to display the error message and old values in the bootstrap modal but we can reduce the complexity if we start using AngularJs or Vue.js so start concentrating to learn this which would help you lot in solving the above issues That’s all for now we will come back with a more interesting blog next time.