Using ajax to update the currently page with Laravel

Question

I have this ajax inside my file.php (It hits the success callback):

 <script type="text/javascript">
    $('#selectSemestres').change(function(obj){        
        var anoSemestre = $(this).val();        
        $.ajax({
            type: 'GET',
            url: '{{ route('professor') }}',
            data: {anoSemestre: anoSemestre},
            success: function(data){
                console.log(data);
            }
        });
    })
</script>

Now on my Controller:

public function getProfessorList()
    {
        $professor = Professor::all();

        $ano_semestre = isset($_GET['anoSemestre']) ?  $_GET['anoSemestre'] : Horario::first()->distinct()->pluck('ano_semestre');

        $semestres = Horario::distinct()->select('ano_semestre')->get()->toArray();

        return View::make('professor', compact('professor', 'semestres', 'ano_semestre'));
    }

What I want to do:

I have a LIST with professor and their disciplines. What I need to do is:
Whenever I change the value of that select box, I just remake the function with the new parameter.

I'm trying to use ajax to remake that list but nothing change, not even the URL with the professor.php?anoSemestre=xx.
Also, when I try to use the $_GET['anoSemestre'] the page doesnt show any change or any ECHO.
But If I go to Chrome spector>NEtwork and click the ajax I just made, it shows me the page with the data I sent.
Cant find out what I'm doing wrong.

UPDATE

I did what was suggested me, now I'm working with the data I get from the success callback:

<script type="text/javascript">
    $('#selectSemestres').change(function(obj){        
        var anoSemestre = $(this).val();        
        $.ajax({
            type: 'GET',
            url: '{{ route('professor') }}',
            data: {anoSemestre: anoSemestre},
            success: function(data){
                var lista = $(data).find('#list-professores'); //Get only the new professor list and thier disciplines
                $('#list-professores').remove(); //Remove old list
                $('#professores').append(lista); //Append the new list where the old list was before.
            }
        });
    })
</script>

The return of var lista = $(data).find('#list-professores'); is:

Accordion Effect

#list-professores li input[name='item']:checked ~ .prof-disciplinas {
    height: auto;
    display:block;
    min-height:40px;
    max-height:400px;
}

This list is an Accordion Menu (using a checkbox and changing it with js&css), so everytime I click on a professor < li>, it's suppose to open and show a sublist (disciplines of that professor I clicked). But it's not opening anymore and no errors on the console. No idea why.

Are you expecting that by making the AJAX call it will auto update the page? Also you should be using Request and not $_GET — Winter Faulk
– Winter Faulk, Commented Nov 26, 2016 at 23:19
@Sane I'm trying to remove the list and re-make it. With ajax it would call that route again and the controller's function again, right ? I'll replace the GET by request. — PlayHardGoPro
– PlayHardGoPro, Commented Nov 26, 2016 at 23:23
If you want the data on the page to change then you will need to take the new data returned to the success callback function and make the changes using JavaScript. To see the returned data in the Callback add a variable to the callback so it looks like this success: function(data){console.log(data);}` — Winter Faulk
– Winter Faulk, Commented Nov 26, 2016 at 23:31
@Sane What I need is to update only that list and sublist. When I do what you said it shows in the console the whole HTML text of the page. Updated the code. — PlayHardGoPro
– PlayHardGoPro, Commented Nov 26, 2016 at 23:36
That is correct, you are return the whole output of the View::make. Ajax is used to pass data from the Client to the Server and Request data from the server so that the client can update the data being displayed without having to refresh the page but the client side still has to do the updating of the page using JavaScript (in most cases) it can't just update the page by calling Laravel's View::make — Winter Faulk
– Winter Faulk, Commented Nov 26, 2016 at 23:42

Julian Rodriguez · Accepted Answer · 2016-11-27 00:01:15Z

The issue here is what you are returning in your controller and how you do it, you don´t need to redirect or refresh the entire page. This could be achived using a single blade partial for the piece of code you may want/need to update over ajax. Assuming you have an exlusive view for that info, you could solve this with something like this:

in your view:

<div class="tableInfo">
<!--Here goes all data you may want to refresh/rebuild-->
</div>

In your javascript:

<script type="text/javascript">
    $('#selectSemestres').change(function(obj){        
        var anoSemestre = $(this).val();
        $.ajax({
            type: 'GET',
            url: '{{ route('professor') }}',
            data: {anoSemestre: anoSemestre},
            success: function(){
                $('.tableInfo').html(data); //---------> look at here!
            }

        });
    })
</script>

in your controller:

    public function getProfessorList()
    {
        $professor = Professor::all();

        $ano_semestre = isset($_GET['anoSemestre']) ?  $_GET['anoSemestre'] : Horario::first()->distinct()->pluck('ano_semestre');

        $semestres = Horario::distinct()->select('ano_semestre')->get()->toArray();

        if (Request::ajax()) {
            return response()->json(view('YourExclusiveDataPartialViewHere', ['with' => $SomeDataHereIfNeeded])->render()); //---------> This is the single partial which contains the updated info!
        }else{
            return View::make('professor', compact('professor', 'semestres', 'ano_semestre'));//---------> This view should include the partial for the initial state! (first load of the page);
        }
    }

Collectives™ on Stack Overflow

Using ajax to update the currently page with Laravel

Accordion Effect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Accordion Effect

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related