彈窗地址1

profile.jsp

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="sping" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="sitemesh-page" uri="http://www.opensymphony.com/sitemesh/page" %>
<div class="container md-margtop20">
   <div class="row backspace">
      <sitemesh-page:applyDecorator name="menu"/>
      <div class="col-md-9 ">
         <div class=" row md-margR-0">
            <div class=" col-md-12  border">
               <div class="row  marg-v-0 visible-xs">
                  <div class="row mobileMenuBar">
                     <span><spring:message code="web.shop.menu.profile"/></span>
                     <a href="/mobile/menu" class="pull-right"><i class="fa fa-times"></i></a>
                  </div>
               </div>
               <div class="row visible-md visible-lg">
                  <div class="col-md-6 "><h2 class="title"><spring:message code="web.shop.menu.profile"/></h2>
                  </div>
               </div>
               <div class="panel-body">
                  <ul class="list-unstyled menu">
                     <c:if test="${not empty addresses}">
                        <c:forEach items="${addresses}" var="address">
                           <li>
                              <div class="row">
                                 <div class="col-xs-5">
                                    <span class="col-xs-6 username">${address.firstName}${address.lastName}</span>
                                    <span class="col-xs-6 phone">${address.phone}</span>
                                 </div>
                                 <div class="col-xs-4">
                                    <span class="user-address">${address.country.name},${address.state.name},${address.city.defaultName},${address.streetAddress1}</span>
                                 </div>
                                 <div class="col-xs-2 text-right">
                                    <a class="address"><img src="/p_w_picpath/style/edit_1.png" style="width: 16px" data-address-id="${address.id}" class="editAddress"></a>&nbsp;&nbsp;
                                    <a><img src="/p_w_picpath/style/del_2.png" class="removeItem" data-address-id="${address.id}" style="width: 16px" class=""></a>

                                 </div>
                              </div>
                           </li>
                           <br/>
                        </c:forEach>
                     </c:if>
                  </ul>
                  <div style="margin-top: 10px;">
                     <a class="addAddress" data="1" title="On"><img src="/p_w_picpath/style/add.png"/>&nbsp;<span style="font-size: 18px;">add</span></a>
                  </div>
               </div>
               <div class="row xs-margtop10">
                  <div class="col-md-12">
                     <%--<form:form modelAttribute="AddressForm"  id="addressForm"  method="post"
                              action="/shop/account/address/profile">
                        <form:hidden path="id"/>
                        <form:hidden path="primary" value="true"/>
                        <form:hidden path="deleteOperation"/>
                        <div class="row">
                           <div class="col-md-6 col-xs-12">
                              <div class="form-group">
                                 <label for="firstName">
                                    <spring:message code="web.page.profile.firstname"/>
                                 </label>
                                 <form:input path="firstName"  type="text" class="form-control" id="firstName"/>
                              </div>
                           </div>
                           <div class="col-md-6 col-xs-12">
                              <div class="form-group">
                                 <label for="lastName">
                                    <spring:message code="web.page.profile.lastname"/>
                                 </label>
                                 <form:input path="lastName" type="text" class="form-control" id="lastName"/>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="col-md-12 col-xs-12">
                              <div class="form-group">
                                 <label for="address1">
                                    <spring:message code="web.page.profile.street"/>
                                 </label>
                                 <form:input path="address1" type="text" class="form-control" id="address1"/>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="col-md-4 col-xs-12">
                              <div class="form-group">
                                 <label for="countryId">
                                    <spring:message code="web.page.profile.country"/>
                                 </label>
                                 <form:select path="deliveryCountryId" class="form-control" id="countryId">
                                    <form:option value="-1">
                                       <spring:message code="choose.an.option"/></form:option>
                                    <form:options items="${storeCountries}" itemLabel="name"
                                               itemValue="id"></form:options>
                                 </form:select>
                              </div>
                           </div>
                           <div class="col-md-4 col-xs-12">
                              <div class="form-group">
                                 <label for="stateId">
                                    <spring:message code="web.page.profile.province.state"/>
                                 </label>
                                 <form:select path="deliveryStateId" class="form-control" id="stateId">
                                    <form:option value="-1">
                                       <spring:message code="choose.an.option"/></form:option>

                                 </form:select>
                              </div>
                           </div>

                           <div class="col-md-4 col-xs-12">
                              <div class="form-group">
                                 <label for="cityId">
                                    <spring:message code="web.page.profile.city"/>
                                 </label>
                                 <form:select path="deliveryCityId" class="form-control" id="cityId">
                                    <form:option value="-1">
                                       <spring:message code="choose.an.option"/></form:option>
                                 </form:select>
                              </div>
                           </div>

                        </div>
                        <div class="row">
                           <div class="col-md-4 col-xs-12">
                              <div class="form-group">
                                 <label for="phone">
                                    <spring:message code="web.page.profile.phone"/>
                                 </label>
                                 <form:input path="phone" type="text" class="form-control" id="phone"/>
                              </div>
                           </div>
                           <div class="col-md-4  col-xs-12">
                              <div class="form-group">
                                 <label for="email">
                                    <spring:message code="web.page.createOrSignIn.label.email"/>
                                 </label>
                                 <form:input path="email" class="form-control" id="email"/>
                              </div>
                           </div>
                           <div class="col-md-4 col-xs-12">
                              <div class="form-group">
                                 <label for="postCode">
                                    <spring:message code="web.page.profile.zip.code"/></label>
                                 <form:input path="postCode" type="text" class="form-control" id="postCode"/>
                              </div>
                           </div>
                        </div>
                        <div class="row margbtn20">
                           <c:if test="${AddressForm.id eq 0}">
                              <div class="col-md-3 col-xs-12 col-md-offset-9">
                                 <button type="submit" class="btn btn-default btn100">
                                    <spring:message code="web.page.profile.add"/></button>
                              </div>
                           </c:if>
                           <c:if test="${AddressForm.id gt 0}">
                              <div class="col-md-2 col-xs-12 col-md-offset-8">
                                 <button type="submit" class="btn btn-default btn100">
                                    <spring:message code="updateAddress.update"/>
                                 </button>
                              </div>
                              <div class="col-md-2 col-xs-12 xs-margtop10">
                                 <a class="btn btn-default btn100 addressDelete">
                                    <spring:message code="updateAddress.delete"/>
                                 </a>
                              </div>
                           </c:if>
                        </div>
                     </form:form>--%>

                  </div>
               </div>
            </div>
         </div>

      </div>
   </div>
</div>
</div>


<!-- 信息刪除確認 -->
<div class="modal fade" id="delcfmModel">
   <div class="modal-dialog">
      <div class="modal-content message_align">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">提示信息</h4>
         </div>
         <div class="modal-body">
            <p>您確認要刪除嗎？</p>
         </div>
         <div class="modal-footer">
            <input type="hidden" id="addressId"/>
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <a <%-- onclick="urlSubmit()"--%>data-address-id="" class="btn btn-success" data-dismiss="modal">確定</a>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<content tag="myJavascript">
   <script type="text/javascript" src="/js/jquery.relatedselects.min.js"></script>
   <script type="text/javascript">
      jQuery().ready(function () {

         $(".addAddress").click(function () {
            $.colorbox({
               iframe: true,
               width: "80%",
               height: "90%",
               href: "/shop/account/address/update",
               onClosed: function () {
                  window.location.href = window.location.href;
               }
            })
         });


         $(".editAddress").click(function () {

            var addressId = $(this).data("address-id");
            $.colorbox({
               iframe: true,
               width: "80%",
               height: "90%",
               href: "/shop/account/address/update?id=" + addressId,
               onClosed: function () {
                  window.location.href = window.location.href;
               }
            })
         });


         $(".removeItem").click(function () {
            var addressId = $(this).data("address-id");
            $("#addressId").val(addressId);
            $('#delcfmModel').modal();
         });


         $(".btn-success").click(function () {
            var addressId = $("#addressId").val();
            $.ajax({
               type: "GET",
               url: "/shop/account/address/delete?id=" + addressId,

               cache: false,

               success: function (result) {
                  if (result != null && result.flag == "success") {
                     window.location.href = "/shop/account/address/profile";
                  }

               },
               error: function (result) {
                  alert("刪除不成功！");
               }
            });
         });


      })
   </script>
</content>

updateAddress.jsp

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" media="all"/>
   <link rel="stylesheet" type="text/css" href="/css/bootstrap-select.min.css" media="all"/>

   <!-- Font Awesome CSS -->
   <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css" media="all"/>
   <!-- Owl Carousel CSS -->
   <link rel="stylesheet" type="text/css" href="/js/lib/owl-carousel/owl.carousel.css" media="all"/>
   <%--    <link rel="stylesheet" type="text/css" href="/js/lib/owl-carousel/owl.theme.css" media="all" />--%>
   <link rel="stylesheet" type="text/css" href="/js/lib/owl-carousel/owl.transitions.css" media="all"/>
   <!-- jQuery-ui CSS -->
   <%--<link rel="stylesheet" type="text/css" href="/js/lib/jquery-ui/jquery-ui.min.css" media="all"/>--%>
   <!-- Animate CSS -->
   <link rel="stylesheet" type="text/css" href="/css/animate.css" media="all"/>
   <!-- Theme CSS -->
   <link rel="stylesheet" type="text/css" href="/css/theme-6.css" media="all"/>
   <link rel="stylesheet" type="text/css" href="/css/style.css" media="all"/>
   <link rel="stylesheet" type="text/css" href="/css/common.css" media="all"/>

   <link rel="stylesheet" type="text/css" media="screen" href="/js/fakeLoader/fakeLoader.css"/>
   <link rel="stylesheet" type="text/css" media="screen" href="/js/costomBox/custombox.min.css"/>
   <link rel="stylesheet" type="text/css" href="/css/colorbox.css" media="all"/>

   <script type="text/javascript" src="/js/jquery-1.11.3.js"></script>
   <script type="text/javascript" src="/js/fakeLoader/fakeLoader.js"></script>

   <!--[if lt IE 9]>
   <script src="/js/html5shiv.min.js"></script>
   <script src="/js/respond.min.js"></script>

   <![endif]-->
</head>
<body>
<div class="container">
   <div class="section_offset colorbox" style="margin-top: 50px;">
      <div class="panel panel-default">
         <div class="panel-heading" style="background-color: #b60007;">
            <h3 class="panel-title">
               <c:if test="${address.id >0}">
                  <spring:message code="admin.form.label.edit"/>
               </c:if>
               <c:if test="${address.id eq 0}">
                  <spring:message code="admin.form.label.save"/>
               </c:if>

            </h3>
         </div>
         <div class="panel-body">
            <div class="col-xs-10">
               <form:form modelAttribute="AddressForm" id="addressForm" method="post"
                        action="/shop/account/address/profile">
                  <form:hidden path="id"/>
                  <form:hidden path="deleteOperation"/>
                  <div class="row">
                     <div class="col-md-6 col-xs-12">
                        <div class="form-group">
                           <label for="firstName">
                              <spring:message code="web.page.profile.firstname"/>
                           </label>
                           <form:input path="firstName" type="text" class="form-control" id="firstName"/>
                        </div>
                     </div>
                     <div class="col-md-6 col-xs-12">
                        <div class="form-group">
                           <label for="lastName">
                              <spring:message code="web.page.profile.lastname"/>
                           </label>
                           <form:input path="lastName" type="text" class="form-control" id="lastName"/>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-12 col-xs-12">
                        <div class="form-group">
                           <label for="address1">
                              <spring:message code="web.page.profile.street"/>
                           </label>
                           <form:input path="address1" type="text" class="form-control" id="address1"/>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-4 col-xs-12">
                        <div class="form-group">
                           <label for="countryId">
                              <spring:message code="web.page.profile.country"/>
                           </label>
                           <form:select path="deliveryCountryId" class="form-control" id="countryId">
                              <form:option value="-1">
                                 <spring:message code="choose.an.option"/></form:option>
                              <form:options items="${storeCountries}" itemLabel="name"
                                         itemValue="id"></form:options>
                           </form:select>
                        </div>
                     </div>
                     <div class="col-md-4 col-xs-12">
                        <div class="form-group">
                           <label for="stateId">
                              <spring:message code="web.page.profile.province.state"/>
                           </label>
                           <form:select path="deliveryStateId" class="form-control" id="stateId">
                              <form:option value="-1">
                                 <spring:message code="choose.an.option"/></form:option>

                           </form:select>
                        </div>
                     </div>

                     <div class="col-md-4 col-xs-12">
                        <div class="form-group">
                           <label for="cityId">
                              <spring:message code="web.page.profile.city"/>
                           </label>
                           <form:select path="deliveryCityId" class="form-control" id="cityId">
                              <form:option value="-1">
                                 <spring:message code="choose.an.option"/></form:option>
                           </form:select>
                        </div>
                     </div>

                  </div>
                  <div class="row">
                     <div class="col-md-4 col-xs-12">
                        <div class="form-group">
                           <label for="phone">
                              <spring:message code="web.page.profile.phone"/>
                           </label>
                           <form:input path="phone" type="text" class="form-control" id="phone"/>
                        </div>
                     </div>
                     <div class="col-md-4  col-xs-12">
                        <div class="form-group">
                           <label for="email">
                              <spring:message code="web.page.createOrSignIn.label.email"/>
                           </label>
                           <form:input path="email" class="form-control" id="email"/>
                        </div>
                     </div>
                     <div class="col-md-4 col-xs-12">
                        <div class="form-group">
                           <label for="postCode">
                              <spring:message code="web.page.profile.zip.code"/></label>
                           <form:input path="postCode" type="text" class="form-control" id="postCode"/>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="form-group">
                        <div class="col-xs-10" style="margin-top: 10px;">
                           <input type="checkbox" name="primary" id="primary"
                                 <c:if test="${AddressForm.primary == true}">checked="checked"</c:if> />
                           <span><spring:message code="web.address.use.default"/></span>
                        </div>
                     </div>
                  </div>
                  <br/>

                  <div class="row margbtn20">
                     <c:if test="${AddressForm.id eq 0}">
                        <div class="col-md-3 col-xs-12 col-md-offset-9">
                           <button type="submit" class="btn btn-default btn100">
                              <spring:message code="web.page.profile.add"/></button>
                        </div>
                     </c:if>
                     <c:if test="${AddressForm.id gt 0}">
                        <div class="col-md-2 col-xs-12 col-md-offset-8">
                           <button type="submit" class="btn btn-default btn100">
                              <spring:message code="updateAddress.update"/>
                           </button>
                        </div>
                        <%--   <div class="col-md-2 col-xs-12 xs-margtop10">
                              <a class="btn btn-default btn100 addressDelete">
                                 <spring:message code="updateAddress.delete"/>
                              </a>
                           </div>--%>
                     </c:if>
                  </div>
               </form:form>
            </div>
         </div>
      </div>
   </div>
</div>
<script type="text/javascript" src="/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<!-- Sizzle jQuary -->
<script type="text/javascript" src="/js/sizzle.min.js"></script>
<!-- Bootstrap jQuary -->
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-select.js"></script>
<script type="text/javascript" src="/js/lib/bpopup/jquery.bpopup.min.js"></script>
<!-- Color Master -->
<script type="text/javascript" src="/js/lib/jquery-color-master/jquery.color.js"></script>
<!-- jQuary Bpopup -->
<script type="text/javascript" src="/js/lib/bpopup/jquery.bpopup.min.js"></script>
<!-- jQuary UI Slider -->
<script type="text/javascript" src="/js/lib/jquery-ui/jquery-ui.min.js"></script>
<!-- jQuary Owl Carousel -->
<script type="text/javascript" src="/js/lib/owl-carousel/owl.carousel.js"></script>
<!-- jQuary Nivo Slider -->
<script type="text/javascript" src="/js/lib/nivo-slider/jquery.nivo.slider.js"></script>
<!-- jQuary Flexslider -->
<script type="text/javascript" src="/js/lib/flexslider/jquery.flexslider-min.js"></script>
<!-- jQuary Countdown -->
<script type="text/javascript" src="/js/lib/countdown/jquery.countdown.min.js"></script>
<script type="text/javascript" src="/js/lib/yith-magnifier/jquery.carouFredSel.min.js"></script>
<script type="text/javascript" src="/js/jquery-valid/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/costomBox/custombox.min.js"></script>
<script type="text/javascript" src="/js/theme.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script src="/js/jquery.colorbox.js"></script>
<c:if test="${updated}">
   <script type="text/javascript">
      parent.$.colorbox.close();
   </script>
</c:if>
<script type="text/javascript" src="/js/jquery.relatedselects.min.js"></script>
<script type="text/javascript">
   $(function () {

      $("#addressForm").relatedSelects({
         onChangeLoad: '/shop/account/address/getStatesAndCities.json',
         defaultOptionText: '<spring:message code="choose.an.option"/>',
         selects: {
            'deliveryCountryId': {loadingMessage: '<spring:message code="choose.an.option"/>'},
            'deliveryStateId': {loadingMessage: '<spring:message code="choose.an.option"/>'},
            'deliveryCityId': {loadingMessage: '<spring:message code="choose.an.option"/>'}
         },
         onLoadingEnd: function () {
            var stateId = ${AddressForm.deliveryStateId};
            var cityId = ${AddressForm.deliveryCityId};

            if ($(this).attr("id") == "stateId") {
               $(this).find("option").each(function () {
                  if ($(this).val() == stateId) {
                     $(this).prop("selected", "selected");
                     $("#stateId").trigger("change");
                     return;
                  }
               });
            }

            if ($(this).attr("id") == "cityId") {
               $(this).find("option").each(function () {
                  if ($(this).val() == cityId) {
                     $(this).prop("selected", "selected");
                     $("#cityId").trigger("change");
                     return;
                  }
               });
            }
         }
      });
      <c:if test="${AddressForm.deliveryCountryId gt 0}">
      $("#countryId").trigger("change");
      </c:if>
      $(".addressDelete").click(function () {
         $("input[name=deleteOperation]").val(true);
         $("#addressForm").submit();
      });
      $("#addressForm").validate({
         errorElement: "small",
         rules: {
            cardHolderName: "required",
            number: "required",
            month: {
               required: true,
               range: [1, 12]
            },
            year: {
               required: true,
               range: [1500, 2500]
            },
            CCV: "required",
            streetAddress1: "required",
            postCode: "required",
            phone: "required",
            countryId: {
               required: true,
               min: 1
            },
            stateId: {
               required: true,
               min: 1
            },
            cityId: {
               required: true,
               min: 1
            },
            email: {
               required: true,
               email: true
            }
         },
         messages: {
            cityId: "",
            stateId: "",
            countryId: ""
         }
      })
   })
</script>
</body>
</html>