I have created City, Area, Subarea Crud in Laravel 11. where city and area are simple are working correctly but the subarea blade in the add form when the city is selected then why respected areas to that city is not show in drop-down of area.
I checked and use ChatGPT solution in my blade Ajax script and try almost every solution but the problem not solved. if you need any code part to understand problem then I can provide that but I want a exact solution of my problem.
The Laravel blade:
@extends('layouts.app')
@section('content')
<div class="main-content app-content">
<div class="container-fluid">
<!-- Page Header -->
<div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
<h1 class="page-title fw-semibold fs-18 mb-0">{{ isset($subarea) ? 'Edit Sub Area' : 'Add Sub Area' }}</h1>
<div class="ms-md-1 ms-0">
<nav>
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">Route Management</li>
<li class="breadcrumb-item active" aria-current="page">Subarea</li>
</ol>
</nav>
</div>
</div>
<!-- Form and List -->
<div class="container">
<div class="row">
<!-- Add/Edit Form -->
<div class="col-xl-6">
<div class="card custom-card">
<div class="card-body">
<form
action="{{ isset($subarea) ? route('subareas.update', $subarea->id) : route('subareas.store') }}"
method="POST">
@csrf
@if (isset($subarea))
@method('PUT')
@endif
<div class="mb-3">
<label for="city-dropdown" class="form-label fs-14 text-dark">City</label>
<select id="city-dropdown" name="city_id"
class="form-control js-example-basic-single">
<option value="">Select a City</option>
@foreach ($cities as $city)
<option value="{{ $city->id }}"
{{ isset($subarea) && $subarea->city_id == $city->id ? 'selected' : '' }}>
{{ $city->city_name }}
</option>
@endforeach
</select>
</div>
<div class="mb-3">
<label for="area-dropdown" class="form-label fs-14 text-dark">Area</label>
<select id="area-dropdown" name="area_id" class="form-control js-example-basic-single">
<option value="">Select an Area</option>
@if(isset($subarea))
@foreach($subarea->city->areas as $area)
<option value="{{ $area->id }}"
{{ $subarea->area_id == $area->id ? 'selected' : '' }}>
{{ $area->area_name }}
</option>
@endforeach
@endif
</select>
</div>
<div class="mb-3">
<label for="form-text" class="form-label fs-14 text-dark">Sub Area Name</label>
<input type="text" class="form-control" id="form-text" name="sub_area_name"
value="{{ old('sub_area_name', isset($subarea) ? $subarea->sub_area_name : '') }}"
placeholder="Sub Area Name">
</div>
<button class="btn btn-primary"
type="submit">{{ isset($subarea) ? 'Update' : 'Add' }}</button>
</form>
</div>
<div class="card-footer d-none border-top-0"></div>
</div>
</div>
<!-- Right Side List of Saved Sub Areas -->
<div class="col-xl-6">
<div class="card custom-card">
<div class="card-body">
<h5 class="card-title">Saved Sub Areas</h5>
<div class="table-responsive">
<table class="table text-nowrap">
<thead>
<tr>
<th scope="col">City</th>
<th scope="col">Area</th>
<th scope="col">Sub Area</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
@foreach ($subareas as $subarea)
<tr>
<td>{{ $subarea->city->city_name }}</td>
<td>{{ $subarea->area->area_name }}</td>
<td>{{ $subarea->sub_area_name }}</td>
<td>
<div class="hstack gap-2 fs-15">
<a href="{{ route('subareas.edit', $subarea->id) }}"
class="btn btn-icon btn-sm btn-info-light m-1">
<i class="ri-edit-line"></i>
</a>
<form method="POST"
action="{{ route('subareas.destroy', $subarea->id) }}">
@csrf
@method('DELETE')
<button type="submit"
class="btn btn-icon btn-sm btn-danger-light m-1">
<i class="ri-delete-bin-line"></i>
</button>
</form>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
This is My script to populate areas drop-down after city is selected:
<!-- Scripts -->
<script src=".6.1.min.js"></script>
<script src="../assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/[email protected]/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
// Handle city change
$('#city-dropdown').on('change', function() {
var cityId = $(this).val();
var areaDropdown = $('#area-dropdown');
areaDropdown.empty().append('<option value="">Loading...</option>');
if (cityId) {
$.ajax({
url: "{{ route('get-areas', '') }}/" + cityId,
type: 'GET',
success: function(data) {
areaDropdown.empty()
.append('<option value="">Select an Area</option>');
$.each(data, function(index, area) {
areaDropdown.append(new Option(area.area_name, area.id));
});
areaDropdown.trigger('change');
},
error: function(xhr) {
console.error('Error:', xhr.responseText);
areaDropdown.empty().append('<option value="">Error loading areas</option>');
}
});
}
});
// Trigger initial load if editing
@if(isset($subarea))
$('#city-dropdown').trigger('change');
@endif
});
</script>
Any help is much appreciated!
I tried ChatGPT But it waste my many time I can't find exact solution ChatGPT says me that check select2 and jquery load before script of ajax. I do this but not solved my problem. Then I try to change ajax query:
<!-- Scripts -->
<script src=".6.1.min.js"></script>
<script src="../assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/[email protected]/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
// Handle city change
$('#city-dropdown').on('change', function() {
var cityId = $(this).val();
var areaDropdown = $('#area-dropdown');
areaDropdown.empty().append('<option value="">Loading...</option>');
if (cityId) {
$.ajax({
url: "{{ route('get-areas', '') }}/" + cityId,
type: 'GET',
success: function(data) {
areaDropdown.empty()
.append('<option value="">Select an Area</option>');
$.each(data, function(index, area) {
areaDropdown.append(new Option(area.area_name, area.id));
});
areaDropdown.trigger('change');
},
error: function(xhr) {
console.error('Error:', xhr.responseText);
areaDropdown.empty().append('<option value="">Error loading areas</option>');
}
});
}
});
// Trigger initial load if editing
@if(isset($subarea))
$('#city-dropdown').trigger('change');
@endif
});
</script>
But this did not solve my problem.