Selection-based field options update with Laravel

Question

From of this article I found an interesting way to create dynamic checkboxes. I was able to adapt it to my case by adding to/web.php routes

Route::post('select-ajax', ['as'=>'select-ajax','uses'=>'SpecificController@myformAjax']);

and generate dynamic checkboxes that would have as values the organization_id as the following was in my controller

public function myformAjax(Request $request)
{
    if($request->ajax()){
        $campusorganizations = DB::table('campus_organizations')->where('campus_id',$request->campus_id)->pluck("organization_id","id")->all();
        $data = view('ajax-select',compact('campusorganizations'))->render();
        return response()->json(['options'=>$data]);
    }
}

and this was the ajax-select.blade.php.

@if(!empty($campusorganizations))
  @foreach($campusorganizations as $key => $value)
    <option value="{{ $key }}">{{ $value }}</option>
  @endforeach
@endif

and AJAX

<script type="text/javascript">
    $("select[name='campus_id']").change(function(){
        var campus_id = $(this).val();
        var token = $("input[name='_token']").val();
        $.ajax({
            url: "<?php echo route('select-ajax') ?>",
            method: 'POST',
            data: {campus_id:campus_id, _token:token},
            success: function(data) {
                $("select[name='campus_organization_id'").html('');
                $("select[name='campus_organization_id'").html(data.options);
            }
        });
    });
</script>

This was the result

---

The point is that I want to have the name of the organization instead of its ID.

Since in my model CampusOrganization have

/**
 * Get the organization
 *
 * @return \Organization
 */
public function organization()
{
    return $this->belongsTo(Organization::class);
}

where can I get the name of the organization.

So I adapted the ajax-select.blade.php for

<option value=''>None</option>
@if(!empty($campusorganizations))
  @foreach($campusorganizations as $campusorganization)
    <option value="{{ $campusorganization->id }}">{{ $campusorganization->organization->name }}</option>
  @endforeach
@endif

and the controller to

/**
 * Get Ajax Request and return Data
 *
 * @return \Illuminate\Http\Response
 */
public function myformAjax(Request $request)
{
    if($request->ajax()){

        $campusorganizations = CampusOrganization::where('campus_id',$request->campus_id)->get();

        $data = view('rooms.ajax-select', $campusorganizations)->render();

        return response()->json(['options'=>$data]);
    }
}

but now all I get is (no options)

I also tested with

$campusorganizations = CampusOrganization::with('organization')->where('campus_id',$request->campus_id)->get();

but no results were given either.

---

Edit

If I return $campusorganizations

/**
 * Get Ajax Request and return Data
 *
 * @return \Illuminate\Http\Response
 */
public function myformAjax(Request $request)
{
    if($request->ajax()){

        $campusorganizations = CampusOrganization::with('organization:id,name')
                                ->where('campus_id',$request->campus_id)
                                ->with('organization')
                                ->get();

        return $campusorganizations;

        $data = view('rooms.ajax-select',$campusorganizations)->render();

        return response()->json(['options'=>$data]);
    }
}

then I’ll see in the answer

[
  {
    "id": 11,
    "campus_add_users": 0,
    "campus_id": 4,
    "organization_id": 4,
    "created_at": "2021-03-12T20:15:42.000000Z",
    "updated_at": "2021-03-12T20:15:42.000000Z",
    "organization": {
      "id": 4,
      "name": "Aldi",
      "slug": "aldi",
      "is_visible": 1,
      "user_id": 2,
      "created_at": "2021-03-12T20:15:38.000000Z",
      "updated_at": "2021-03-12T20:15:38.000000Z"
    }
  }
]

After removing return $campusorganizations;, then the answer will be

{"options":"<option value=''>None<\/option>\r\n"}

---

Note that in answering this question you can also answer the following questions (I can help with both English and Spanish)

• https://stackoverflow.com/q/66652922/5675325

• https://es.stackoverflow.com/q/435853/108660

Answer 1

On the controller instead of

$data = view('rooms.ajax-select',$campusorganizations)->render();

you should name the variable this way

$data = view('rooms.ajax-select',['campusorganizations'=>$campusorganizations])->render();

That will be enough