hello, i am using the AdminLte3 dashboard to design and summernote editor for the first time . in my setting section i am using summernote editor for add updateappmsg, privacy policy, terms and conds. , about us . in this form i am trying to send my data through ajax . in this when i try to submit the more then one summernote editor values (with style) together then it is casing me the error of 403 (forbidden).
without style it is adding the value perfectly . but when i try to add the values(with style) for only single summernote then it' working fine . but one summernote is saved after that it having the same error in other even tho i tried to only update one editor can someone pls help me ?
here is my code :
index.blade.php
@extends('layouts.app')
<form id="formAppSetting" action="{{ route('app-settings.update') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="p-2 pb-4 fixed-search-seaction">
<div class="d-flex justify-content-end align-item-center pr-4">
<button type="submit" id="save-btn" onmousedown="toggleButtonClicked(this)" onclick="validateForm()">
<i class="fas fa-save pr-1"></i> Save Changes
</button>
</div>
</div>
//other fields
<div class="px-3 pb-2 m-3 d-lg-flex" style="gap:20px">
{{-- summernote1 section --}}
<div>
<div data-toggle="collapse" data-target="#updateAppMessageSettings" aria-expanded="false" aria-controls="updateAppMessageSettings">
<h5>Update App Message</h5>
</div>
<div class="collapse" id="updateAppMessageSettings">
<div class="pt-4">
<div class="form-group">
<textarea class="summernote" name="updateAppMessage">{{ $data->updateAppMessage ?? '' }}</textarea>
</div>
</div>
</div>
</div>
{{-- summernote2 section --}}
<div>
<div data-toggle="collapse" data-target="#aboutSettings" aria-expanded="false" aria-controls="aboutSettings">
<h5>About Us</h5>
</div>
<div class="collapse" id="aboutSettings">
<div class="pt-4">
<div class="form-group">
<textarea class="summernote" name="aboutUs">{{ $data->aboutUs ?? '' }}</textarea>
</div>
</div>
</div>
</div>
</div>
<div>
{{-- summernote3 --}}
<div>
<div data-toggle="collapse"
data-target="#privacyPolicySettings" aria-expanded="false" aria-controls="privacyPolicySettings">
<h5>Privacy Policy</h5>
</div>
<div class="collapse" id="privacyPolicySettings">
<div class="pt-4">
<div class="form-group">
<textarea class="summernote" name="privacyPolicy">{{ $data->privacyPolicy ?? '' }}</textarea>
</div>
</div>
</div>
</div>
{{-- summnernote4 --}}
<div>
<div data-toggle="collapse"
data-target="#termsCondSettings" aria-expanded="false" aria-controls="termsCondSettings">
<h5>Terms And Conditions</h5>
</div>
<div class="collapse" id="termsCondSettings">
<div class="pt-4">
<div class="form-group">
<textarea class="summernote" name="termsCond">{{ $data->termsCond ?? '' }}</textarea>
</div>
</div>
</div>
</div>
</div>
</form>
<script>
function summnernote() {
$('.summernote').each(function() {
$(this).summernote({
placeholder: 'Add the text...',
tabsize: 2,
height: 200,
dialogsInBody: true,
dialogsFade: false,
tooltip: false,
toolbar: [
// Customize the toolbar by removing the 'color' option which includes highlight
['style', ['style']],
['fontsize', ['fontsize']],
// ['color', ['color']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']],
['view', ['fullscreen','help']]
],
fontSizes: [ '11', '13', '15', '17', '19', '21', '25', '30', '36'],
});
});
}
function validateForm() {
let isValid = true;
const requiredFields = $('input[required]');
let firstInvalidField = null;
requiredFields.each(function() {
if (!$(this).val()) {
isValid = false;
if (!firstInvalidField) {
firstInvalidField = $(this); // Store the first invalid field
}
}
});
if (!isValid && firstInvalidField) {
// Open the collapse div of the first invalid field
firstInvalidField.closest('.collapse').collapse('show');
// Scroll to the first invalid field for better UX
$('html, body').animate({
scrollTop: firstInvalidField.offset()
}, 500);
}
return isValid;
}
</script>
@section('page-scripts')
<script>
$(document).ready(function() {
summnernote();
// Handle the confirmation button click
$(document).on('submit', '#formAppSetting' , function(event) {
event.preventDefault();
if (!validateForm()) {
showAlert('error', 'Please fill in all required fields.');
return;
}
let formData = new FormData(this);
$.ajax({
url: $(this).attr('action'),
type: 'POST',
data: formData,
processData: false,
contentType: false,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response) {
showAlert('success', response.message);
$('#save-btn').prop('disabled', false);
$('#save-btn').text('Save Settings');
const appName = response.data.appName;
const placeholder = response.data.userPlaceholder;
if (appName) {
$('.app-name, .header-app-name').text(appName);
document.title = `${appName} Admin Panel`;
}
},
error: function(xhr) {
$('#save-btn').prop('disabled', false);
$('#save-btn').text('Save Settings');
var errorMessage = xhr.responseJSON?.message || 'An error occurred. Please try again.';
showAlert('error', errorMessage);
$('#formAppSetting')[0].reset();
},
});
});
});
</script>
@endsection
@endsection
controller.php
public function update(Request $request)
{
try {
$data = Setting::first();
//other field
$data->aboutUs = $request->aboutUs;
$data->updateAppMessage = $request->updateAppMessage;
$data->privacyPolicy = $request->privacyPolicy;
$data->termsCond = $request->termsCond;
// Save the record (insert if new, update if existing)
$data->save();
return response()->json(['success' => true , 'message' => 'Settings updated successfully.' , 'data' => $data]);
} catch(Exception $e) {
return response()->json(['success' => false , 'message' => $e]);
}
}
web.php
Route::post('/app-settings', [AppSettingController::class, 'update'])->name('app-settings.update');
error :
jquery.min.js:2
POST https://mydomain/app-settings 403 (Forbidden)
this is casing in production , in the development it is working all fine
sorry for my poor English , thank you in advance for help !!!
