Laravel - How to dynamically load content in same view after submit in drop down list

Question

After selecting an option from drop down list, I am submitting it to a controller function which is returning required data in a different view. I want it to load the view in the same page (possibly inside a div) as the drop down list where I am submitting it. (I am new to Laravel and PHP)

The following is my clinic.blade.php file which lists clinics in drop down.

    {!! Form::open(['route' => 'clinicIndex', 'method' => 
       'POST'])!!}

    <label> Select Clinics </label>
    <select name = "clinic">
        @foreach($clinics as $clinic)
            <option value="{{$clinic->clinicID}}"> {{$clinic->clinicName}}</option>
        @endforeach
    </select>

        {{Form::submit('DisplayDoctors', ['class' => 'btn btn-outline- 
     primary'])}}
   {{Form::close()}}

The Submit is accessing my controller method via clinicIndex Route defined as below in web.php

   Route::post('/clinicTest', 'ClinicController@clinicIndex')- 
   >name('clinicIndex');

This is the function in controller

public function clinicIndex(Request $request)
    {
        $selectedClinic = $request->clinic;

        $clinicInfo = Clinic::where('id', '=', $selectedClinic)->get();

        $dbArray = DB::connection('mysql2')->select("SELECT * FROM bp_admin.tdbsrv WHERE iClinicId = $selectedClinic");

        $dbInfo = $dbArray[0];

        $remoteConnection = DatabaseConnection::setConnection($dbInfo);

        $doctors = $remoteConnection->select("SELECT tUsers.sSalutation, tLocationPhysician.iPhysicianId, tUsers.sFirstName,
                    tUsers.sLastName,tUsers.iPhysNum,tUsers.sDateHired,
                tPhysician.bLocum,tPhysician.bResident,
                tPhysician.dStartDay,tPhysician.dEndDay
                from tUsers
                inner join tLocationPhysician
                inner join tPhysician
                where
                tLocationPhysician.iLocationId = $selectedClinic
                and tPhysician.iId = tLocationPhysician.iPhysicianId
                and tPhysician.iPhysNum = tUsers.iPhysNum
                and tUsers.bArchived =0
                and tLocationPhysician.bArchived =0
                and tPhysician.bArchived =0
                order by tUsers.sFirstName asc");

        return view('pages.show')->with('doctors', $doctors);
    }

You can see that it is returning the table in a different view (opens a new page). Instead I want it to load the table in same view after submitting my selection from drop down.

I tried doing this in my clinic.blade.php

<div class="container" id="dispDoctors"> </div>

And added an ajax script in the same view

<script>
function loadDocContent(){
    $('#dispDoctors').load('/loadDocs');
}
</script>

For testing dynamic load, I defined the function for "/loadDocs" same as my controller function clinicIndex() in web.php. I am stuck how to proceed from here. As I am not sure how to pass my drop down selection to the jquery function.

Karthik SP · Accepted Answer · 2019-08-21 18:04:58Z

I finally figured out that it can be done using ajax. I am returning the view as a html and loading it in my original view.

This is my blade file

@extends('layouts.apptest')


@section('content')

@include('inc.messages')

<br>


<div class="container">
    <div class="col-lg-4">
        {{Form::open(array('url'=>'', 'files'=>true))}}

            <div class="form-group">
                <label for="">Select clinics</label>
                <select class="form-control input-sm" name="clinic" id="clinic">
                    @foreach($clinics as $clinic)
                        <option value="{{$clinic->clinicID}}"> {{$clinic->clinicName}}</option>
                    @endforeach
                </select>
            </div>

        {{Form::close()}}
    </div>
</div>



<div class="container" id="dispDoctors">

</div>

@endsection

@section('script')

<script>

    $('#clinic').on('change', function(e){
        console.log(e);

        var clinic_sel = e.target.value;

        //ajax

        $.get('/ajax-clinic?clinic_sel=' +clinic_sel, function(data){
            //success data
            $('#dispDoctors').html(data.html);
        });
    });

</script>

@endsection

and this is the route I am setting up in web.php

Route::get('/ajax-clinic', function(){

    $clinic_sel = Input::get('clinic_sel');

    $clinicInfo = Clinic::where('id', '=', $clinic_sel)->get();

        $dbArray = DB::connection('mysql2')->select("SELECT * FROM bp_admin.tdbsrv WHERE iClinicId = $clinic_sel");

        $dbInfo = $dbArray[0];

        $remoteConnection = DatabaseConnection::setConnection($dbInfo);

        $doctors = $remoteConnection->select("SELECT tUsers.sSalutation, tLocationPhysician.iPhysicianId, tUsers.sFirstName,
                    tUsers.sLastName,tUsers.iPhysNum,tUsers.sDateHired,
                tPhysician.bLocum,tPhysician.bResident,
                tPhysician.dStartDay,tPhysician.dEndDay
                from tUsers
                inner join tLocationPhysician
                inner join tPhysician
                where
                tLocationPhysician.iLocationId = $clinic_sel
                and tPhysician.iId = tLocationPhysician.iPhysicianId
                and tPhysician.iPhysNum = tUsers.iPhysNum
                and tUsers.bArchived =0
                and tLocationPhysician.bArchived =0
                and tPhysician.bArchived =0
                order by tUsers.sFirstName asc");




        $returnView = view('pages.test')->with('doctors', $doctors)->render();

        return response()->json(array('success' =>true, 'html' =>$returnView));


});

You can see in my blade file that I am loading the html returned by the ajax call.

Thanks to other answers as well!

saleh shokouhi · Accepted Answer · 2019-08-20 19:12:04Z

0

Use axios call to submit form and receive response from controller. Example code here https://stackoverflow.com/a/57523553/5728565

answered Aug 20, 2019 at 19:12

saleh shokouhi

5555 silver badges8 bronze badges

2 Comments

ceejayoz Over a year ago

Given that OP already has jQuery installed, they'd be better off using $.ajax instead of installing a second package to do the same exact thing.

saleh shokouhi Over a year ago

Ajax is fine too. But i like axios name. AXIOS😊

Hassan Raza · Accepted Answer · 2019-08-20 19:25:22Z

0

You should use ajax or Pjax to load the dynamically content in the web page, When using Ajax or Pjax you must return response in json format from controller. follow this link

answered Aug 20, 2019 at 19:25

Hassan Raza

5717 silver badges9 bronze badges

1 Comment

ceejayoz Over a year ago

It's common, but not required to return JSON. You could return HTML from a Blade template and insert that in place of the element, for example.

Collectives™ on Stack Overflow

Laravel - How to dynamically load content in same view after submit in drop down list

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related