1

I recently built my first jquery mobile site across separate html files that are linked. As instructed in the jquery mobile documentation I loaded all of my scripts between the head tag on the first page:

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

I also loaded only the scripts needed for each page to function in that head of that page. If I navigate to the first page and then link to other pages all of my javascript functions work; forms are validated and the input fields show/hide based on drop down selections.

The problem is that if I refresh the page or just go directly to that page in the address bar these functions are not working. After reading the jquery mobile I thought that if I include the scripts in the head of each page they would load if a user happens to load that page first via HTTP instead of linking with ajax from the first page.

I understand that I can include the scripts I need in between the data-role="page". Is that the best option? Here is the custom ladot.js script I have which I could break up into separate js files which load the necessary functions in the data-role="page" of the relevant pages.

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();
});
Improve this question
4
  • It appears that my main issues is that script in the head is not loading when accessing a page via HTTP. If I refresh a page or type the URL into the address bar and go to it my ladot.js and validate scripts do not appear to work. $(document).delegate("#bike-rack-request", "pagecreate", function() { $("#rackForm").validate({ Commented Nov 19, 2012 at 0:51
  • Did you link to all the scripts in the headers of the other pages? Commented Nov 19, 2012 at 9:19
  • Romain, yes I have the links in the headers of each page. But I only include the links that are needed to run that page. Should I be loading every script that is used anywhere on the site? Commented Nov 19, 2012 at 18:22
  • this is one of the funcitons that is in my JS file. i checked the error console and see that the js is loaded but the function is not working on the site. I am guessing it has something to do with the syntax I used. here is the beginning portion of that function://Function that controls form validation errors for BSS form $(document).on("pageshow", "#bss-request", function() { $("#bssForm").validate({ Commented Nov 20, 2012 at 0:58

2 Answers 2

Reset to default
2

When loading a page through AJAX, Jquery mobile will only load the body of the target page. This means that whatever content is in the header will be ignored, including any link to script or style. As a consequence, you will need to either

  1. Link to all scripts and styles you will use on subsequent pages on the first page that is visited. It is important to keep in mind that this will have to be done on every page that the user might access directly (or refresh)
  2. deactivate ajax navigation (which I would not recommend)
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

1. I currently have the site set up as you suggested in 1. all scripts are in the header of each page so no matter where you enter the site from the all of the scripts needed should load and be available to subsequent pages. mobiiimaps.com/contact.htm you can see the problem here. the top right button should link me back to the map but the map does not load. You will need to refresh the map after you link to the page or go directly to mobiiimaps.com/map.htm if you enter the map page all subsequent pages work fine. But go to anyother page 1st and map will not load.
By the way thanks for helping me out on this. I have been reviewing questions and googling tutorials all day and now night.
Problem is due to the initialization not happening google.maps.event.addDomListener(window, 'load', initialize); in map.js is not triggered because you are using ajax navigation. You can take a look at this post stackoverflow.com/questions/9896285 for a solution (basically binding to pageinit)
I tried that and it did not work. My initialize function and google.maps.event.addDomListener(window, 'load', initialize); where actually wrapped in a $('.map-page').on("pageshow", function() so they should be loading everytime I go to the page. I also tried changing pageshow to pageinit. I think at this point I am just going to disable the AJAX. Thanks for your help.
Did you make sure your event got triggered ?
|
0

I'm guessing the issue is that jquery mobile doesnt have access to the window object during/after the ajax load. The problem is with: google.maps.event.addDomListener(window, 'load', initialize);

You Do NOT need this. All this does is load the initialize function.

I'm doing a simple autocomplete and removed the addDomListener and pulled the code from the initialize function. See the removed code below. This works perfectly.

function initialize(){ //Removed

     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;
        }
    });

} //Removed

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.