无法在使用ajax调用MVC的部分视图中运行javascript

时间:2014-02-12 19:30:25

标签: javascript ajax asp.net-mvc-5

我在部分视图中有这个JavaScript代码,可以获取客户端的地理位置。

<h1>Map</h1>
<style type="text/css">
    #map-canvas {
        height: 500px;
    }
</style>

<script type="text/javascript"
        src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script>

<script type="text/javascript">        
    function initialize() {

        var myLatlng = new google.maps.LatLng(37.4219985, -122.0839544);
        var mapOptions = {
            zoom: 12,
            center: myLatlng
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Provider'
        });

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas"></div>

从另一个视图我正在进行Ajax调用,以在动作链接点击上加载此部分视图。

<script>
    $(function () {
        $('.provider-details').on('click', function (e) {

            $.get("/Provider/Map", function (response) {
                $('#map').html(response)
            });

            e.preventDefault();
        })
    });
</script>

我可以调用局部视图,我可以看到文字;但是,地图没有加载。如果直接加载视图,我可以看到地图。有什么建议吗?

1 个答案:

答案 0 :(得分:0)

你的初始化函数没有触发因为它可能附加到窗口而不是正文。只需在ajax调用成功后调用它,你就可以了:

$(function () {
    $('.provider-details').on('click', function (e) {

        $.get("/Provider/Map", function (response) {
            $('#map').html(response);
            initialize();
        });

        e.preventDefault();
    })
});