Google platziert Autocomplete funktioniert nicht nach einer teilweisen Laden der Seite in ASP.NET MVC

Question

Ich lade eine teilweise Seite mit einem Adressformular mit jquery .load(). Dies funktioniert und öffnet das modale Fenster, das in der Teilseite enthalten ist.

Dann möchte ich eine Autocomplete-Funktion auf dem ersten Feld in der modalen Form erstellen, aber nichts passiert, wenn ich mit der Eingabe beginnen. Ich sehe keine Fehler in der Konsole.

Ich vermute es hat etwas mit der Reihenfolge zu tun, mit der ich alles lade und es Rendern aber nicht sicher bin!

// 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>

hier wird die partielle Seite in 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

Ich habe es geladen! Ich musste den Z-Index erhöhen, wenn der Pac-Container auf 10000