Order by without refresh

Hi, I have a products list and I want to order them by price without refreshing the page, I created the function and it works but It doesn't work without refreshing the page. the sort controller:

class SortController extends MainController{
    
 
 public function sortByASC( $category_url,Request $request)

{
     if ($category=Categorie::where('url','=', $category_url)->first()){
     
     
    $sort = $request->get('sort', 'asc');
  
$products = Product::where('categorie_id', $category->getAttribute(
'id'))->orderBy('price', $sort)->get();
    
  return view('content.sort')->with('products', $products) ;

}
}

the view

     
 <form id="order-product-form" method="get" action="{{url('shop/{category_url}/sort=ASC')}}"enctype="multipart/form-data">

      
@if ($products)   
@foreach($products as $product)
            
                
                
                <div class="col-md-12">
    <h2>{{ $product['title']}}</h2>
    <p><img border="0" width="200" src="{{ asset('images/'.$product['image'])}}">
    <p> {!! $product ['article'] !!}</p>
    <p><b>price on site : </b>
        {{$product['price']}}$</p>
    <p>
        <a href="{{url('shop/checkout')}}" class="btn btn-primary">checkout</a>
         <input @if (Cart::get($product['id']) ) disabled="disabled" @endif data-id="{{$product['id']}}" 
                type="button" class="btn btn-success add-to-Cart" value="+ Add to Cart">
    </p>
</div>

                
               

@endforeach
@endif

the all products view

@extends('master')
@section ('content')
</br>
</br>
</br>
</br>

            @if ($category)
        <h2 class="text-center">{{$category['title']}} </h2>
        <center>

    <ul id="nav">
    <a  href="http://localhost/myshop/public/shop/{{$category['url']}}/sort=ASC" style="color:black"> Low  to high </a> |
    <a href="http://localhost/myshop/public/shop/{{$category['url']}}/sort=DESC" style="color:black"> High to low</a>
    </ul>
    <div id="content"></div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="{{asset('js/sort.js')}}" type="text/javascript"></script>
</div>
</div>
 </form>
</center>
        </br> 
        
        
        
 
    <form action="{{ url('shop/'.$category['url'])}}" method="get" class="form-inline"> </form>
     
    <center>
        @else 
            <i>No category</i>
            
            @endif
   
@if($products)
@foreach($products as $product)


   <div class="container marketing">
 <div class="row">
        <div class="col-lg-4">
       
                
          <img class="img-circle" src="{{ asset('images/'.$product['image'])}}" alt="Generic placeholder image" width="140" height="140">
          <h2>{{ $product['title'] }}</h2>
          <p> {!! $product['article']!!}</p>
           <p><b>price: </b>
        {{$product['price']}}$</p>
          <p><a class="btn btn-default" href="{{ url('shop/'.$category['url'].'/'. $product['url'])}}" role="button">Details</a>
    
           <input @if (Cart::get($product['id']) ) disabled="disabled" @endif
            data-id="{{$product['id']}}" 
                type="button" class="btn btn-success add-to-Cart" value="+ Add to Cart"/></p>
         
          
          
          
        </div>
        
 @endforeach
  
</div>
 

@else 

    
    <p><i>no products for this category</i></p>
</div>
 @endif 

the js

$(document).ready(function(){
    $('#content').load('content/products.php');
    
    
    
    $('ul#nav li a').click(function(){
        var page= $(this)attr('href');
         $('#content').load('content/'+page+'sort.php');
         return false;
    });
});