title: Ajax load data on dropdown select
body: <p>There is a dropdown in my view. When I select an item in dropdown, ajax should load. So there is a table locations and it has one to many relation with contacts.</p>
  
  <p>So when I select a location from locations dropdown, contact corresponding to that should load. But it is not happening.</p>
  
  <p>controller:</p>
  
  <pre><code>public function location_contacts()
  {
      $contacts = Contact::all();
      return view('partials.bookavisit_contact')-&gt;with(['contacts' =&gt; $contacts]);
  }
  </code></pre>
  
  <p>location dropdown:</p>
  
  <pre><code>&lt;div class="inline-control location-icon dropdown-icon"&gt;
      &lt;select class="form-control" name="visit-location" id="visitLocation" onChange="getContact(value);" &gt;
          &lt;option date-person="lorem impsum" date-mail="lorem.ipsum@gmail.com" &gt;Select Location&lt;/option&gt;
          @foreach($locations as $location)
          &lt;option date-person="lorem impsum" date-mail="lorem.ipsum@gmail.com" value="{!! $location-&gt;id !!}" &gt;{!! $location-&gt;address !!}, {!! $location-&gt;city !!}, {!! $location-&gt;state !!}&lt;/option&gt;
          @endforeach
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>script:</p>
  
  <pre><code>@section('scripts')
  &lt;script type="text/javascript"&gt;
  
      function getContact(val) {
  
          var ajaxUrl = "/location_contacts";
          $.ajax({
              type: "POST",
              url: ajaxUrl,
              data:'location_id='+val,
              success: function(data){
                  $("#contact").html(data);
              }
          });
      }
  &lt;/script&gt;
  @endsection
  </code></pre>
  
  <p>partial view of contact:</p>
  
  <pre><code>&lt;div id="location-contact-info"&gt;
      &lt;div class="content-head" id="contact"&gt;
          &lt;h5  class="wow fadeInUp"&gt;Lorem ipsum&lt;/h5&gt;
      &lt;/div&gt;
      @foreach($contacts as $contact)
      &lt;div class="contact-info-group row"&gt;
          &lt;div class="contact-label"&gt;Contact Person:
              &lt;span id="location-contact-name"&gt;{{$contact-&gt;first_name}} {{$contact-&gt;last_name}}&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="contact-info-group row"&gt;
          &lt;div class="contact-label"&gt;Email:
              &lt;span id="location-contact-mail" &gt;&lt;a href="mailto:{{$contact-&gt;email}}"&gt;{{$contact-&gt;email}}&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      @endforeach
  &lt;/div&gt;
  </code></pre>