0

I've two jsp pages 1.view.jsp,2.popup.jsp (it is a popup page).the popup.jsp will be loaded when I click the 'add icon' on my view.jsp. Just I want to know how to load values on my 'view.jsp' (without refreshing the page) when 'submit' button is clicked on my 'popup.jsp' using Ajax.

view.jsp

<body>

<div class="st-content">
             <jsp:include page="/WEB-INF/jsp/settings/adminmenu.jsp" /> 

<div class="width1">
    <div class="mgmt-menu-bar  font-new">
            <div class="margin-left10 margin-top line-height1 ">

            <a href="executeIndustry">
                    <div class="menunew  cursor red">
                    <i class="icon-list icon-grey1"></i> &nbsp;Industry</div>
                    </a>
                    <a href="viewDepartment">
                   <div class="menunew cursor" ><i class="icon-list icon-grey1"></i> &nbsp;Department</div>
                   </a>
                   <a href="addViewDesignation">
                  <div class="menunew cursor" ><i class="icon-list icon-grey1"></i> &nbsp;Designation</div>
                  </a>


                 </div>
            </div>
            <div class="mgmt-content-right">
              <div class="width2 margin-left10">
            <div class="content-table-full">
              <div class="content-h bold margin-left margin-top">Industry
              <div  class="top-right-icon2 cursor" data-toggle="tooltip"  title="Add Industry" onclick="TINY.box.show({iframe:'addPageIndustry.action',boxid:'frameless',width:456,height:200, fixed:false,maskid:'bluemask',maskopacity:40})" >
                <i class="icon-plus icon-grey1"></i>
           </div>   
              </div>
              <s:form action="executeIndustry" name="paginationForm" id="paginationForm">
               <s:hidden name="industryId" id="industryId"/>

               <s:if test="%{success!=null}" >
          <div id="error" style="color:#048350;margin-top: 10px"  >
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<s:property value="success"/>  
             <br/>   
         </div>

    </s:if>
     <s:if test="%{error!=null}" >
         <div id="error"  style="color: #FF0000;margin-top: 10px">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<s:property value="error"/>   
             <br/> 
         </div>

    </s:if>

                <table width="100%" cellpadding="0" cellspacing="0" class="margin-bottom margin-top table-display">

                    <tr class="row-header">
                        <td >
                        &nbsp;Industry </td>
                        <td  width="450">Created Date</td>

                        <td width="200">Action</td>
                    </tr>
                     <s:if test="%{industrylist!= null && industrylist.size > 0}">
                      <s:iterator value="industrylist">
                        <tr class="row1">
                          <td >&nbsp;<s:property value="industryName"/></td>

                            <td> <s:date name="createdDate" format="dd/MM/yyyy hh:mm:ss a"/></td>

                          <td>
                              <i class="icon-edit icon-grey1 cursor" title="Edit" data-toggle="tooltip" onclick="TINY.box.show({iframe:'editIndustry.action?editid=<s:property value="industryId"/>',boxid:'frameless',width:456,height:200, fixed:false,maskid:'bluemask',maskopacity:40})"></i>
                              &nbsp;<i title="Delete" data-toggle="tooltip" onclick="deletethis('<s:property value="industryId"/>')" class="icon-minus-sign icon-grey1 cursor"></i> 


                          </td>


                      </tr>
                      </s:iterator>
                  </s:if>
                    <s:else>
                  <tr class="row1">
                  <td colspan="4" align="center">No industries were found</td>
                  </tr>
                  </s:else>

                   <s:hidden name="deleteid" id="deleteid"></s:hidden>

              </table>
               <div class="width2">
                <s:if test="%{industrylist.size()>0}">
                      <%@ include file="/WEB-INF/jsp/pagenation/pagination.jsp" %>
                      </s:if>
               </div>
              </s:form>
              </div>
          </div>
      </div>
</div>


         </div>

           <jsp:include page="/common/commonfooter.jsp" />
           <script type="text/javascript" src="shared/scripts/js/pagination.js"></script>
</div>


popup.jsp

<body>
<div class="pop-box">
    <s:if test="%{edit!=1}" >
    <s:form action="addIndustry" method="post"  id="FormOne" name="FormOne" target="_top" cssClass="validate">

    <span style="margin-left:10px;" class="heading-st2">Add Industry</span>
    <div  class="popup-style">
        <div class="row-form">
        <span class="red">*</span>Industry 
        </div>
        <div class="row-form ">
            <s:textfield name="industryName" id="industryName" cssClass="input-xlarge required-field" oncopy="return false" onpaste="return false" oncut="return false" onkeypress="return isNumberKey(event)" maxlength="60" />
        </div>
        <div class="row-form">

        <button type="submit" class="btn btn-success ">Submit <i class="icon-ok icon-white"></i></button>
                   <span class="help-inline"></span>
        </div>
    </div>
    </s:form>
    </s:if>

    <s:else>

    <s:form action="updateIndustry" method="post"  id="FormOne" name="FormOne" target="_top" cssClass="validate">
    <s:hidden name="industryId"/>
    <span style="margin-left:10px;" class="heading-st2">Edit Industry</span>
    <div  class="popup-style">
        <div class="row-form">
        <span class="red">*</span>Industry 
        </div>
        <div class="row-form ">
            <s:textfield name="industryName" id="industryName"   cssClass="input-xlarge required-field" oncopy="return false" onpaste="return false" oncut="return false"  onkeypress="return isNumberKey(event)" maxlength="60" />
        </div>
        <div class="row-form">

      <button type="submit" class="btn btn-success ">Submit <i class="icon-ok icon-white"></i></button>
                   <span class="help-inline">

                   </span>
        </div>
    </div>
    </s:form>
    </s:else>



</div>
4

1 回答 1

0 
$(document).ready(function(){
     var frm = $('#myform');
    frm.submit(function (ev) {
            $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert("submitted");

            },
        error:function(data){
            alert("error");
        }
        });
        window.scrollTo(0,0);

        ev.preventDefault();
    });

上面的 jquery ajax 帮助你在不刷新的情况下伴随你的动作提交...

于 2013-11-29T06:23:50.067 回答