页面加载一次执行脚本

Question

I was messing about with some code but I am struggling a little bit to achieve what I want. In the example here I have a map which displays when there are coordinates in my fields:

http://jsfiddle.net/spadez/xJhmk/9/

// Generic Map Display
function mapDisplay() {

        var latval = $('#lat').val(),
            lngval = $('#lng').val();
        if ($.trim(latval) != '' && $.trim(lngval) != '') {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(latval, lngval),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                scrollwheel: false,
                draggable: false
            };
            var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
            $('#map_canvas').removeClass('hidden');
        } else {
            $('#map_canvas').addClass('hidden');
        }
    }

What I want to do is have this execute once per page, so that if there are values in the fields when the page loads then the map displays, but if the values get deleted after the page load or changes, the map will not change, since it read the variables at the start of ther page load only.

Can someone show me on my jsfiddle how that might be displayed please?

Answer 1

You are not calling the function mapDisplay(); , on document ready call mapDisplay

jQuery(function($){
    mapDisplay();
})

Demo: Fiddle

Answer 2

window.onload = function(){

mapDisplay();

}

This runs your code on the onload event

Answer 3

Use:

$(function()
{
    mapDisplay();
}  

// Generic Map Display
function mapDisplay() {

    var latval = $('#lat').val(),
        lngval = $('#lng').val();
    if ($.trim(latval) != '' && $.trim(lngval) != '') {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(latval, lngval),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            scrollwheel: false,
            draggable: false
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        $('#map_canvas').removeClass('hidden');
    } else {
        $('#map_canvas').addClass('hidden');
    }
}

You declare a function, and after page is loaded (the $(function() {} ), it is executed.