Update part of the view using AJAX

I'd watch some YouTube videos on filling div's with AJAX content, a note, Ajax doesn't fill anything you get return data then javaScript is what actually fills the div in the browser. Also look at some examples on the w3c site.

Hi jlrdw, thanks for the response. I already know how to fill a div with content using AJAX, but what I'm not sure about is how to return part of the view from the controller function to AJAX.

If you want to use blade you can just create the HTML in a blade file then return that view as you would normally. This is how a lot of the email is done. The email blade file is just partial HTML file that is used to create the body of the message.

@lararocks you can use vuejs to reload.

The controller remain the same but return data instead.

public function index($keyword = null)
{ if(!is_null($keyword))
{ 
$customers = Customers::Filter($keyword)->paginate(10);
 } 
else
{ 
$customers = Customers::get()->paginate(10);
 } 
$data['customers'] = $customers;
 return $data; 
}

Now you will Vuejs and vue-resource.

new Vue({
el:'#mountpoint',

data: {
returnedData: {}
},

methods:{
updateData: function(){
//use vue-resource to get returned data.
  this.$http.get('/route/to/server/function/{searchterm}').then(function (response) {
          this.$set('returneddata', response)
      })
}
}

});

The returned data is object of data that you had set on the view. Hope it makes sense. Read more on vuejs really simple.

your html.

<div id="mountpoint">
<input type="text" v-model="searchterm" @event="updateData">
</div>

//update data here 

You need a route that will render the view for that portion. Then you make an AJAX call to that route, take the return data, which is the view output and use innerHTML or JQuery to inject that HTML view output into the DOM.

I usually do this:

$data = 'Your data here';
return response()->json(['success' => true, 'Message' => 'Your category was created.',  'data' => $data]);

@jimmck exactly as I described he needs to do for filling a division, or whatever element he is trying to update. The actual controller code and model code would be the same, just ajax is used for communication in this case. Sorry if I misunderstood but I figured if you knew how to fill a div, you would know how to fill part of the screen as well.

My take on how i do this.

So say within my content section I will have a designated div wrapper to hook onto. Then loop through the initial load of the page and names:

    @section('content')
        <div id="names-list-wrapper">
            @foreach($names as $name)
                   <div>{{$name}}</div>
            @endofreach
       </div>
      ..... the rest etc
    @endsection

Then my search box with its on key event, would then hook to a post route, that is then connected to a seperated method within my controller, NOT the same one as the initial page load.

      var search_result,
            namesWrapper = $('#names-list-wrapper');
      $( "#search_box" ).keyup(function(evt) {
              var search_result = this.value;
              $.ajax({
                    url: '/api/names/search/' + search_result,
                    context: document.body,
                    type: "POST",
                    success: function(names){
                        //-- clear the names wrapper
                        namesWrapper.hml();
                        //-- loop through the results and create the new list view
                        $.each( names, function( key, name ) {
                            ///-- add the result to the visual page
                            namesWrapper.append('<div class="name">' + name + '</div>');
                        });
                    },
                    error:function(msg){}
                  })//-- end ajax

      }); //-- end keyup

So as you type it takes the letter and does a request to the url / route and then displays the results. Not tested but gives you an idea etc??

This uses the jQuery ajax method, but you could use as mentioned Vuejs, Angular, ReactJS any of these JS apps to help and do the same things

Thanks everyone, I will give vue a try and see how it goes.

simondavies, I don't like this method because in this case you will have to re-do the HTML. The idea is not to re-write the grid outside the view itself.

Thanks anyway :)

@lararocks not a problem, it only updates the actual section that contains the list of the search, no need to update all the html, just your search results container, otherwise VueJS etc is a good start. :-)