从页面获取特定内容以通过Ajax插入Bootstrap 3模式

Question

I am trying to pull specific content from a page into the bootstrap 3 modal via ajax but can only pull in the whole page.

Here is my jQuery code:

function wineMap() {

    var wh = $(window).height();
    var hh = $('#masthead').height();
    $('.wine-menu #mainstage').css({
        height: wh-hh-80
    });
    $('#wine-map').vectorMap({
        map: 'world_en',
        backgroundColor: '#000',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        scaleColors: ['#ffffff', '#eeeeee'],
        normalizeFunction: 'polynomial',
        onRegionClick: function(element, code, region){
            if (code == 'us')    {
                var url = 'http://cb.dannycheeseman.me/wine-menu/'+code;
            }
            $('#theModal').modal({
                show : true,
                remote: url
            });
        }
    });
}

$(document).ready(function(e) {
    wineMap();
});

Here is the url http://cb.dannycheeseman.me/wine-menu/ (click on the USA)

I have tried:

function wineMap() {

    var wh = $(window).height();
    var hh = $('#masthead').height();
    $('.wine-menu #mainstage').css({
        height: wh-hh-80
    });
    $('#wine-map').vectorMap({
        map: 'world_en',
        backgroundColor: '#000',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        scaleColors: ['#ffffff', '#eeeeee'],
        normalizeFunction: 'polynomial',
        onRegionClick: function(element, code, region){
            if (code == 'us')    {
                var url = 'http://cb.dannycheeseman.me/wine-menu/'+code;
            }
            $('#theModal').modal({
                show : true,
                remote: url+'#menu-home-location'
            });
        }
    });
}

$(document).ready(function(e) {
    wineMap();
});

Note the:

                remote: url+'#menu-home-location'

I would expect that to pull in just the content of that id but it is still pulling in the whole page..

Regards

Answer 1

Ok, so after reading up on the jQuery load function I have realised that you need a space before the id of the content you wish to add so:

            $('#theModal').modal({
                show : true,
                remote: url+'#menu-home-location'
            });

Becomes:

            $('#theModal').modal({
                show : true,
                remote: url+' #menu-home-location'
            });

And it works great.