Question

我正在开发一个电子商务应用程序，要求用户输入他/她的邮政编码位置，以显示更靠近他/她区域的列表。我有一个弹出窗口，并打电话给ziptasticapi.com我可以获得给定邮政编码的城市，州和国家。代码如下：

 $('#locationModal').on('shown.bs.modal', function (e) {
  $('#zipcode-name').keyup(function (e) {
      var zipCode = $("#locationModal").find("input[name='zip']").val();
      if (zipCode.length===5 && $.isNumeric(zipCode)){
        var requestURL = 'http://ziptasticapi.com/' + zipCode + '?callback=?';

        $.getJSON(requestURL, null, function(data){
          console.log(data);
          if (data.city) $("#locationModal").find("input[name='city']").val(data.city);
          if (data.state) $("#locationModal").find("input[name='state']").val(data.state);

        });
      }
  });
});

我正在弹出窗口中填充城市和州，但我在导航栏首页显示城市和州是有问题的。我正在寻找的是： 1.当用户自动访问电子商务网站时，会弹出一个弹出窗口并要求输入邮政编码。 2.在我的导航栏中显示用户城市和州，并选择更改位置。 3.使用用户提供的邮政编码搜索项目列表，并显示更靠近用户的项目。

我该怎么做？我需要一些帮助。提前致谢。

我正在使用Spree电子商务，我创建了另一个名为列表的模型，除了产品模型。在我的列表模型上，我将zipcode作为数据库列，以便能够通过此模型上的zipcode进行搜索。

出于某种原因，我想更好地使用另一个名为Zip的模型，将zipcode，city，state，country存储在数据库中，并将此Zip模型与Listing关联。我想有zip belongs_to列表。

这是我到目前为止的前端代码：

      <nav class="col-md-12">
         <div id="location-nav-bar" class="nav navbar-nav navbar-right">
           <%= link_to 'change location', '#', {'data-toggle' =>  "modal", 'data-target' => '#locationModal'}  %>

    <div class="modal fade" id="locationModal" tabindex="-1"    role="dialog" aria-labelledby="locationModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="exampleModalLabel">New message</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
             </button>
      </div>
    <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="recipient-name" class="form-control-label">ZIP Code:</label>
        <input type="text" class="form-control" name="zip", id="zipcode-name">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" name="city", id="city-name">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" name="state", id="state-name">
      </div>
    </form>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" name="summitcode", id="zipcode-summit">Summit</button>
  </div>
</div>

 <script type="text/javascript">

  (function($){

$('#locationModal').on('shown.bs.modal', function (e) {
  $('#zipcode-name').keyup(function (e) {
      var zipCode = $("#locationModal").find("input[name='zip']").val();
      //window.alert(zipCode);
      if (zipCode.length===5 && $.isNumeric(zipCode)){
        //window.alert(zipCode);
        //console.log(zipCode);
        var requestURL = 'http://ziptasticapi.com/' + zipCode + '?callback=?';

        $.getJSON(requestURL, null, function(data){
          console.log(data);
          if (data.city)  $("#locationModal").find("input[name='city']").val(data.city);
          if (data.state) $("#locationModal").find("input[name='state']").val(data.state);

         }); 
    }

  });
})

})(jQuery);

</script>

Rails - 用户使用JQUERY填充/更改邮政编码位置

0 个答案: