1

我最近通过链接的单独 html 文件构建了我的第一个 jquery 移动网站。按照 jquery mobile 文档中的说明，我在第一页的 head 标记之间加载了所有脚本：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script><!--needed only on map.htm-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/ladot.js"></script><!--all custom script for pages in same js file-->  
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script><!--needed only on the two pages with forms that are to be validated-->

我还只加载了每个页面所需的脚本，以便在该页面的头部运行。如果我导航到第一页，然后链接到其他页面，我的所有 javascript 函数都可以工作；表单经过验证，输入字段根据下拉选择显示/隐藏。

问题是，如果我刷新页面或直接转到地址栏中的该页面，这些功能将不起作用。在阅读了 jquery mobile 之后，我认为如果我在每个页面的头部包含脚本，如果用户碰巧首先通过 HTTP 加载该页面而不是从第一页与 ajax 链接，它们就会加载。

我知道我可以在 data-role="page" 之间包含我需要的脚本。那是最好的选择吗？这是我拥有的自定义 ladot.js 脚本，我可以将其分解为单独的 js 文件，这些文件在相关页面的 data-role="page" 中加载必要的功能。

ladot.js：

  // JavaScript Document
  //-------------Javascript for map.htm -- first page that is loaded------------------------------
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 14,
  //center: new google.maps.LatLng( 34.05221496568917, -118.24334979057312 ),
  mapTypeId: google.maps.MapTypeId.TERRAIN 
});

var bikeLayer = new google.maps.BicyclingLayer();
    bikeLayer.setMap(map);

existingbikewaysMap = new google.maps.FusionTablesLayer({
  query: {
    select: 'geometry',
    from: '5294232'
  }
});
existingbikewaysMap.setMap(map);

//add the bicycle parking fusion table layer
BikeParkingMap = new google.maps.FusionTablesLayer({
  query: {
    select: 'Full Address',
    from: '1A5fsPE8B8eJfV4jwji29sebnY1QiAVjL2pTjzOk'
  }
});
BikeParkingMap.setMap(null);

toggle = function(layer) {
   if (layer == 'Bike') {
     if (existingbikewaysMap.getMap() == null) existingbikewaysMap.setMap(map);
     else existingbikewaysMap.setMap(null);
   } else if (layer == 'Park') {
     if (BikeParkingMap.getMap() == null) BikeParkingMap.setMap(map);
     else BikeParkingMap.setMap(null);
   }
}
    google.maps.event.addDomListener(document.getElementById('Bike'), 'click', function() { toggle('Bike'); });
    google.maps.event.addDomListener(document.getElementById('Park'), 'click', function() { toggle('Park'); });


centerLocation = function( position ) {
    map.setCenter( new google.maps.LatLng( 34.05221496568917, -118.24334979057312 ) );
}

myMarker = 0,
    displayLocation = function( position ) {
        // create a new LatLng object for every position update
        var myLatLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude );

        // build entire marker first time thru
        if ( !myMarker ) {
            // define our custom marker image
            var image = new google.maps.MarkerImage(
                'img/bluedot_retina.png',
                null, // size
                null, // origin
                new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
                new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
            );
            map.setCenter( myLatLng );

            // then create the new marker
            myMarker = new google.maps.Marker({
                flat: true,
                icon: image,
                map: map,
                optimized: false,
                position: myLatLng,
                title: 'You are here',
                visible: true
            });

        // just change marker position on subsequent passes
        } else {
            myMarker.setPosition( myLatLng );
        }

        // center map view on every pass
        //map.setCenter( myLatLng );
    },
    handleError = function( error ) {
        var errorMessage = [ 
            'Sorry. Permission to find your location has been denied.',
            'Sorry. Your position could not be determined.',
            'Sorry. Timed out.'
        ];

        alert( errorMessage[ error.code ] );
    },
    // cache the userAgent
    //useragent = navigator.userAgent;


// allow browser to track movement
    navigator.geolocation.watchPosition( 
        displayLocation,
        centerLocation,
        handleError, 
        { 
            enableHighAccuracy: true, 
            maximumAge: 30000, 
            timeout: 27000 
        }
    );          


var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];

google.maps.event.addListener(searchBox, 'places_changed', function() {
  var places = searchBox.getPlaces();

  for (var i = 0, marker; marker = markers[i]; i++) {
    marker.setMap(null);
  }

  markers = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0, place; place = places[i]; i++) {
    var image = new google.maps.MarkerImage(
        'img/pin_blue.png',
        new google.maps.Size(15,29),
        new google.maps.Point(0,0),
        new google.maps.Point(8,29)
      );

      var shadow = new google.maps.MarkerImage(
        'img/pin_shadow.png',
        new google.maps.Size(33,29),
        new google.maps.Point(0,0),
        new google.maps.Point(8,29)
      );

      var shape = {
        coord: [11,1,12,2,13,3,14,4,14,5,14,6,14,7,14,8,14,9,14,10,14,11,14,12,13,13,12,14,11,15,8,16,8,17,8,18,8,19,8,20,8,21,8,22,8,23,8,24,11,25,11,26,11,27,3,27,3,26,3,25,6,24,6,23,6,22,6,21,6,20,6,19,6,18,6,17,6,16,3,15,2,14,1,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,1,3,2,2,3,1,11,1],
        type: 'poly'
      };

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      shadow: shadow,
      shape: shape,
      title: place.name,
      position: place.geometry.location
    });

    markers.push(marker);

    bounds.extend(place.geometry.location);
  }

  map.fitBounds(bounds);
});

  google.maps.event.addListener(map, 'bounds_changed', function() {
  //var bounds = map.getBounds();
  searchBox.bindTo('bounds', map);
});
  }

  //Function that toggles CSS styles so that navbar buttons go on and off
$(function() {

  $("#nav1,#nav2,#nav3").off('click').on('click', function() {
    setTimeout(function() {
    $(this).removeClass('');
  }, 500);

    $(this).toggleClass("custom-btn-active");
  });
});

//Function to toggle search div
$(function() {
  $("#Find").click(function(){
    $("#searchfield").slideToggle();
  });
});

  google.maps.event.addDomListener(window, 'load', initialize);


  //-------------Javascript for bss-request.htm--------------------------------------------  
 //Function that controls form validation errors for BSS form
$(document).on("#bss-request", "pagecreate", function() {
    $("#bssForm").validate({

        rules: {
                name: "required",
                phone: {
                    required: false,
                    minlength: 10
                },
                email: {
                    required: true,
                    email: true
                },
                problem: "required",
                description: {
                    required: true,
                    minlength: 15
                },
                location: {
                    required: true,
                    minlength: 15
                }
                },
                messages: {
                name: "Please enter your name",
                phone: {
                    minlength: "Please enter at least 10 digits"
                },
                email: "Please enter a valid email address",
                problem: "Please select a problem",
                description: {
                    required: "Please describe the problem",
                    minlength: "We need a longer description"
                },
                location: {
                    required: "Please tell us where the problem is",
                    minlength: "We need a more detailed location"
                },
            },

        errorPlacement: function(error, element) {
            if (element.attr("name") === "problem") {
                error.insertAfter($("#problem").parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
});

  //-------------Javascript for bike-rack-request.htm--------------------------------------------    
 //Function that controls form validation errors for Bike rack request form
$(document).delegate("#bike-rack-request", "pagecreate", function() {
    $("#rackForm").validate({

        rules: {
                Business_Name: "required",
                Contact_Name: "required",
                Phone_Number: {
                    required: false,
                    minlength: 10
                },
                email: {
                    required: true,
                    email: true
                },
                Street_Address: {
                    required: true,
                    minlength: 8
                },
                Number_of_Racks: "required",
                description: {
                    required: false,
                },
            },
            messages: {
                Business_Name: "Which business needs a bike rack?",
                Contact_Name: "Please enter your name",
                Phone_Number: {
                    minlength: "Please enter at least 10 digits"
                },
                email: "Please enter a valid email address",
                Street_Address: {
                    required: "Where to install or repair the rack(s)?",
                    minlength: "We need a more detailed location"
                },
                Number_of_Racks: "How many racks you are requesting?"      
            },

        errorPlacement: function(error, element) {
            if (element.attr("name") === "Number_of_Racks") {
                error.insertAfter($("#Number_of_Racks").parent());
            } else {
                error.insertAfter(element);
            }
        }

    });
    //Function that shows/hides form fields
    $('#Number_of_Racks').change(function() {
    var value = $(this).val();
    if (value in {'Seperating from concrete':1,
                  'Missing footing screws':1, 
                  'Rack has been cut':1,
                  'Rack has been smashed':1,
                  'Rack was stolen':1,
                  'Other damage':1}) {
        $('#damage_div').slideDown('');
    }
    else {
        $('#damage_div').slideUp('');
    }
  });
});

//-------------Javascript that runs on all pages--------------------------------------------    
//Function that sets sticky footer
$(document).on( 'pagebeforechange', function() {
  // hide footer
  $('[data-role=footer]').hide();
});
$(document).on( 'pagechange', function() {
  // show footer
  $('[data-role=footer]').show();
});
4

2 回答 2

2

通过 AJAX 加载页面时，Jquery mobile 只会加载目标页面的正文。这意味着标题中的任何内容都将被忽略，包括任何指向脚本或样式的链接。因此，您将需要

  1. 链接到您将在访问的第一页的后续页面上使用的所有脚本和样式。重要的是要记住，这必须在用户可能直接访问（或刷新）的每个页面上完成
  2. 停用 ajax 导航（我不推荐）
于 2012-11-20T09:39:39.233 回答
0

我猜问题是 jquery mobile 在 ajax 加载期间/之后无法访问窗口对象。问题在于：google.maps.event.addDomListener(window, 'load', initialize);

你不需要这个。所有这些都是加载初始化函数。

我正在做一个简单的自动完成并删除了 addDomListener 并从初始化函数中提取了代码。请参阅下面删除的代码。这完美地工作。

function initialize(){ //移除

     var input = /** @type {HTMLInputElement} */(document.getElementById('text-basic'));
     var autocomplete = new google.maps.places.Autocomplete(input);

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        if (!place.geometry) {
      // Inform the user that the place was not found and return.
        input.className = 'notfound';
        return;
        }
    });

} //删除

google.maps.event.addDomListener(this.window, 'load', 初始化); //删除

于 2013-09-22T06:39:31.180 回答