Jquery地图插件不做任何提交-重定向到"locator.html#"而不是发射形式的行动

Jquery maps plugin does nothing on submit -redirects to "locator.html#" instead of firing form action

本文关键字：quot 发射 html# locator 提交 任何 重定向 地图 Jquery 插件      更新时间：2023-09-26

我试图使用bjorn Jquery插件:http://www.bjornblog.com/web/jquery-store-locator-plugin

我遵循所有指示，上面写着:

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 “&region=” 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&region=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.

我的HTML如下:注意，我已经包括Jquery，把手和一切。我在与我的位置详细信息相同的目录中有一个.xml文件(我应该这样做)。

定位器显示正确(至少表单)，我的问题是，每当我试图搜索位置，点击提交按钮，我的页面只是重定向到"定位器。html#"，而不是搜索它什么也不做。我想这意味着出于某种原因，我的js没有开火?

编辑:**我已经在我的生产服务器上放了一个页面的副本:http://bscserver.com/M2M/locator.html -随时检查它，你会看到我的意思

与此工作版本比较:http://bjornblog.com/storelocator/

帮助吗?提示?谢谢!

下面的Html。

<!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 &copy; 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>

我通过在Chrome上使用firebug lite和反复试验找到了这个问题的原因。

代码本身似乎没有什么问题，尽管原因是无法在我的本地机器上工作(由于某种原因它可以在WAMP上工作)，尽管我也调用了不受支持的Jquery版本。看起来插件更新了，但文档没有。因此，通过遵循文档，我实现了过时的包括。我把这个留在这里，以防将来有人有类似的问题与Jquery插件!

相关文章：