Select Option fetch data to label using ajax in laravel - ajax

Question

I tried fetching the data after selecting an accountnumber using ajax it did work but after selecting once I can't select again. I've been trying some solutions but it didn't work.
AccountController.php
public function index()
{
$AM= new AM();
$AM->setConnection('AM');
$key= '';
$getData = $AM->where('Accountnumber',Auth::user()->AccountNum)->get();
foreach($getData as $row){
$key= $row->key;
}
$getAMData = $AM->where('key',$key)
->select('Accountnumber')
->get();
$ci= $AM->where('Accountnumber',Auth::user()->AccountNum)
->select('Accountnumber', 'cn', 'ca','ct','accountstatus')
->get();
return view('account')->with('getAMData',$getAMData)->with('ci',$ci);
}
// Methods
public function fetch(Request $request){
if($request->ajax())
{
$AM= new AM();
$AM->setConnection('AM');
$getData = $AM->where('Accountnumber',$request->Accountnumber)->get();
foreach($getData as $row){
$key= $row->key;
}
$getAMData = $AM->where('key',$key)
->select('Accountnumber')
->get();
$ci= $AccountMaster->where('Accountnumber',$request->Accountnumber)
->select('Accountnumber', 'cn', 'ca','ct','accountstatus')
->get();
return view('partials._fetch')->with('getAMData',$getAMData)->with('ci',$ci);
}
}
ajax.js
$(document).ready(function(){
$('#accountnum').change(function(){
var Accountnumber = $(this).val();
$.ajax({
url:"/fetch",
method: "GET",
data: {Accountnumber:Accountnumber},
success:function(data){
$('#showbill').html(data);
}
});
});
});
account.blade.php
<div class="container-fluid col-sm-12">
<h3><b> Account </b></h3>
</div>
</div>
<div class="container-fluid py-4 col-sm-12" id="showbill">
#include('partials._fetch')
</div>
I think my problem would be on my controller, maybe the fetch method is not right. anyone can help me with this? Thank you!
_fetch.blade.php
<div class="row">
<div class="col-md-3 col-sm-12">
#if(count($getAMData) > 0)
<select class="form-control form-control-md" id="accountnum" name="accountnum">
<option value="" selected></option>
#foreach($getAMData as $row)
<option value="{{ $row->Accountnumber }}">{{ $row->Accountnumber }}</option>
#endforeach
</select>
#else
<p></p>
#endif
</div>
<div class="col-md-12 col-sm-12 py-4">
<div class="card">
<div class="card-body">
#if(count($ci) > 0 )
#foreach ($ci as $row )
<div class="col-md-6 col-sm-12">
<label>Account Number:</label> <label><strong>{{ $row->Accountnumber }}</strong></label>
</div>
<div class="col-md-6 col-sm-12">
<label>Name:</label> <label><strong>{{ $row->cn}}</strong></label>
</div>
<div class="col-md-6 col-sm-12">
<label> Address:</label> <label><strong>{{ $row->ca}}</strong></label>
</div>
<div class="col-md-6 col-sm-12">
<label>Type:</label> <label><strong>{{ $row->ct}}</strong></label>
</div>
<div class="col-md-6 col-sm-12">
<label>Account Status:</label> <label><strong>{{ $row->ct}}</strong></label>
</div>
#endforeach
#else
<p>NO DATA FOUND</p>
#endif
</div>
</div>
</div>
<div class="col-md-12 col-sm-12">
<table class="table table-responsive-md table-hover ">
<thead style="text-align: center;" class="bg-warning ">
<tr>
<th scope="col">(MW)</th>
<th scope="col">Morning (0001H to 1200H)</th>
<th scope="col">Afternoon (1201H to 1800)</th>
<th scope="col">Evening (1801 to 2400)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"></th>
</tr>
</tbody>
</table>
</div>
</div>
I tried using the same concept with the paginate using ajax well it didn't turn out to be what I expected haha

Answer 1

Okay so here is my solution to this problem. Instead of including the Select Option I put it inside my account.blade.php so that it wont regenerate two select options.