Google помещает автозаполнение не работает после частичной загрузки страницы в ASP.Net MVC

Question

Я загружаю частичную страницу с адресной формой, используя jquery .load(). Это работает и открывает модальное окно, содержащееся на частичной странице.

Затем я хочу создать функцию автозаполнения в первом поле в модальной форме, но ничего не происходит, когда я начинаю вводить текст. Я не вижу ошибок в консоли.

Я предполагаю, что это имеет какое-то отношение к заказу, с которым я загружаю все и рендеринга, но не уверен!

// button is clicked and the code below is called to load the partial page (modal) into the html page 
 

 
$('#modalContainer').load(scope.enumControllers.GetAddressDetails, model, function(response, status, xhr) { 
 
    scope.setActivityIndicator('off'); 
 
    if (status === 'error') { 
 
    scope.showAlert('An error occurred loading the Change Address Window.', 'error') 
 
    return; 
 
    } 
 
    $('#modelAddressDetails').modal('show'); 
 

 
    // configure autocomplete for address field 
 
    var searchAddressInput = document.getElementById('address1Change'); 
 
    var searchAddressOptions = { 
 
    types: ['geocode'] 
 
    } 
 
    var addressAutocomplete = new google.maps.places.Autocomplete(searchAddressInput, searchAddressOptions); 
 

 
});

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=mykeyhere&v=3.exp&&amp;libraries=places"></script> 
 

 
<div id="modalContainer"></div>

здесь парциальное страница загружается в modalContainer

@model TpCrm.Areas.Organizations.Models.OrganizationDetailViewModel 
 

 
<style> 
 
    .form-control { 
 
    max-width: 480px; 
 
    } 
 
    .modal-dialog { 
 
    width: 0; 
 
    } 
 
</style> 
 

 
<div id="modelAddressDetails" class="modal fade" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h3 class="modal-title">Modify Address And Search</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form> 
 
      <div class="form-group"> 
 
      <label for="address1">Address</label> 
 
      <input type="text" class="form-control" id="address1Change" placeholder="ex. 123 TradePulse Ave" value=@Model.Address.Address1> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="address2">Apt. or Bld. Number</label> 
 
      <input type="text" class="form-control" id="address2Change" placeholder="ex. #305" value=@Model.Address.Address2> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="city">City</label> 
 
      <input type="text" class="form-control" id="cityChange" placeholder="ex. San Francisco" value=@Model.Address.City> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="state">State</label> 
 
      <input type="text" class="form-control" id="stateChange" placeholder="ex. California" value=@Model.Address.State> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="postalCode">Postal Code</label> 
 
      <input type="text" class="form-control" id="postalCodeChange" placeholder="ex. 94102" value=@Model.Address.PostalCode> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="country">Country</label> 
 
      <input type="text" class="form-control" id="countryChange" placeholder="ex. United States" value=@Model.Address.Country> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Close</button> 
 
     <button id="btnAddressSearch" type="button" class="btn btn-primary btn-lg">Search</button> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

Answer 1

Я получил его! Мне пришлось увеличить z-индекс, если pac-контейнер до 10000