Jquery maps plugin does nothing on submit -redirects to “locator.html#” instead of firing form action
Question
I'm attempting to use the bjorn Jquery plugin: http://www.bjornblog.com/web/jquery-store-locator-plugin
And I follow all instructions, which read:
Usage:
Assuming you already have your locations.xml file set up in the current directory and the basic HTML copied from the example index file, the following would be the simplest usage example:
1. Include the css file (you’ll most likely want to make modifications to this beforehand):
<link rel="stylesheet" type="text/css" href="css/map.css">
2. Include jQuery if you don’t have it on your page already (the example below uses the Media Temple CDN but you can load it from wherever you’d like):
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
3. Include the latest version of Handlebars.js (this is now required)
<script src="js/handlebars-1.0.0.min.js"></script>
4. Include Google Maps API. If you want to target a particular country add “®ion=” to the end of the URL followed by the country code.
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
Region targeting example:
<script src="http://maps.google.com/maps/api/js?sensor=false®ion=UK"></script>
5. Include the plugin file:
<script src="js/jquery.storelocator.min.js"></script>
6. Apply the storeLocator plugin to the map-container div.
<script>
$(function() {
$('#map-container').storeLocator();
});
</script>
7. Make sure you have the basic form and map container HTML set up or copied from the example file.
My HTML is as below: Note I have included Jquery, handlebars and everything. I have a .xml file in the same directory with my location details (as I am supposed to).
The locator displays correctly (at least the form does) and my problem is that whenever I attempt to search locations, clicking the submit button, my page is simply redirected to "locator.html#" and instead of searching it does nothing. I assume this means for some reason my js isn't firing?
EDIT: ** I have put a copy of the page live on my production server: http://bscserver.com/M2M/locator.html - feel free to check it out, you'll see what I mean
COMPARE TO THIS WORKING VERSION: http://bjornblog.com/storelocator/
Help? Tips? Thanks!
Html below.
<!DOCTYPE html>
<html>
<head>
<title>Map Example - Auto geocoding</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/map.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/handlebars-v1.3.0.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.storelocator.js"></script>
</head>
<body>
<div class="container">
<div class="sidestripLeft"></div>
<div class="sidestripRight"></div>
<div class="mainHeader">
<div class="spacerBox"><div id="box1"></div><div id="box2"></div></div>
<div class="logoBlock">
<img src="Img/M2M_logo.jpg"/>
</div>
</div>
<div class="mainBody">
<div class="mainSidebar">
<article class="navBox">
<nav><ul>
<li class="active"> <a href="0">STORE LOCATOR</a></li>
<li> <a href="0">TALK TO US</a></li>
<li> <a href="0">CAREERS</a></li>
</ul></nav>
</article>
</div>
<div class="mainContent">
<div id="store-locator-container">
<div id="page-header">
<h1>Using Chipotle as an Example</h1>
<p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden Prarie, etc. would be good for testing the functionality.
You can use just the city as the address - ex: Edina, MN.</p>
</div>
<div id="form-container">
<form id="user-location" method="post" action="#">
<div id="form-input">
<label for="address">Enter Address or Zip Code:</label>
<input type="text" id="address" name="address" />
</div>
<button id="submit" type="submit">Submit</button>
</form>
</div>
<div id="map-container">
<div id="loc-list">
<ul id="list"></ul>
</div>
<div id="map"></div>
</div>
</div>
</div>
</div>
<div class="mainFooter">
<div id="shadowLine"></div>
<div id="footerArea">Copyright © 2014 Man To Man Pty Ltd. All Rights Reserved. Designed by Bond Street Conversation Pty Ltd.</div>
</div>
<script>
$(function() {
$('#map-container').storeLocator();
});
</script>
</body>
</html>
1 answers
solution1
0 2014-05-09 00:48:16
I've managed to find the cause of this through a combination of using firebug lite on Chrome and trial and error.
There didn't seem to be anything wrong with the code itself, though reason was a combination of not being able to work on my local machine (for some reason it works on WAMP) though I also was calling an unsupported version of Jquery. It seems the plugin was updated but the documentation wasn't. So by following the documentation I implemented outdated includes. I'm leaving this here incase anyone else has similar problems with Jquery plugins in the future!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.