我可以重定向到其他网页内的网页吗？

Question

For starters, I am sorry if my question title is confusing. I wasn't sure about the best way to word it. I also apologize if something like this has been asked and answered before - I tried searching but I was unable to find anything related.

The problem: I am building out a permissions section for a warehouse application - it starts with Features (such as Receiving) which has Functions (such as Order Unloading). There's more to it than that of course but this should be all that's needed for this.

The Features tab has a webpage with a set of tabs - one of these tabs allows me to look at the list of Functions under a Feature, and add/delete Functions (if permission allows). All of the styling is located on this first page, as the other pages are loaded in through the tabs. When I update the Functions page (add or delete a Function) my Action does a

return response.sendRedirect("url-for-webpage-here");

that redirects the page back to the same screen with the updated data.

The problem here is that this page loads outside of the main page with all the styling.

Here is the basics of the main page (feature.jsp):

<div class="d-flex flex-row mt-2">
    <div class="col-2 nav-tabs--div">
        <ul class="nav nav-tabs nav-tabs--vertical nav-tabs--left" role="navigation">
            <li class="nav-item">
                <a class="nav-link btn-block active" id="featureTab" data-toggle="tab" href="#featureSummary" role="tab" aria-controls="featureSummary">Feature Details</a>
            </li>
            <li class="nav-item">
                <a class="nav-link btn-block" id="featureFunctionsTab" data-target="#featureFunctions" data-toggle="tabajax" href="/Security/functions.do?method=load&featureID=<%=feature.getFeatureID()%>" role="tab" aria-controls="featureFunctions">Feature Functions</a>
            </li>
        </ul>
    </div>
    <div class="tab-content col-10">
        <div class="tab-pane fade show active" id="featureSummary" role="tabpanel">
            <!-- Stuff goes here -->
        </div>
        <!-- Blank div for AJAX loading of functions -->
        <div class="tab-pane fade" id="featureFunctions" role="tabpanel">

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

Choosing the second nav-item (Feature Functions) will take you to the second tab, inserting its data from the .jsp it uses into <div id="featureFunctions"></div>

On this page there is a button to add a new Function:

<a href="/Security/modal_addFunction.jsp?featureID=<%=featureID%>" data-toggle="modal" data-target="#addFunctionModal" data-id="<%=featureID%>" class="addFunction btn btn-md btn-primary float-right mr-1 mt-1"><i class="fa fa-plus"></i>&nbsp;Add New Function</a>

Modal pops up, fill it out and hit the "Add" button and the function executes as expected. At the end of the function is:

response.sendRedirect("/Security/functions.do?method=load&featureID="+function.getFeatureID());

This is the exact same call that is made when clicking the tab on the first page, but since it does not go through this same page, the webpage shows up with no styling at all.

I am looking for a way to send this redirect through the original page that is loaded (feature.jsp) and then default to the second tab (Feature Functions) so the user doesn't have to click back through to see the list of Functions for this feature, if this is even possible. I'm really not sure what my options are here, so again I apologize if this has been covered before!

Answer 1

After a lot of searching and discussions with colleagues, it turns out that the answer is AJAX, and that I was doing it wrong.

On the page mentioned above, modal_addFunction.jsp the action for the form built on the page is set up to direct to a function that will add the new Function to the database. It looks like this:

<form name="newFunctionForm" id="newFunctionForm" method="post" action="/Security/functions.do?method=addNewFunction">
    <!-- Form goes here -->
    <div class="modal-footer">
        <button id="closeModalButton" type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i>&nbsp;Close</button>
        <button type="submit" class="btn btn-primary" id="addFunctionSubmit"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Add</button>
    </div>
</form>

The action for this form will be prevented in the AJAX call, but we'll get to that.

In the action, the function looks like this:

    public ActionForward addNewFunction(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response){
        HttpSession session = request.getSession(false);
        if(SecurityEJBServices.checkSession(session, request, response))
            return null;
        FunctionsServices fs = new FunctionsServices();
        FunctionForm functionForm = new FunctionForm(request);
        try{
            Function function = new Function();
            //set Function stuff here

            boolean added = fs.addFunction(function);

            PrintWriter out = response.getWriter();
            if(added){
                out.write("success");
            }else{
                out.write("error");
            }
        }catch(Exception e){
            e.printStackTrace();
        }
        return null;
    }

The PrintWriter writes the response back to the AJAX function that gets built back in the modal. It looks like this:

<script type="text/javascript">
$(document).ready(function(){
    $(function(){
        $('#newFunctionForm').submit(function(e){
            e.preventDefault();
            var form = $(this);
            var post_url = form.attr('action');
            var post_data = form.serialize();
            $.ajax({
                type: 'POST',
                async: false,
                url: post_url,
                data: post_data,
                success: function(data){
                    console.log("DATA: " + data);
                    if(data == 'success'){
                        $('#errorDiv').hide();
                        $('#addFunctionModal').modal('hide');
                        $('#functionTable').load("/Security/functions.do?method=getFunctionsAjax&featureID=<%=featureID%>");
                        $('.modal-backdrop').remove();
                    }else{
                        $('#errorDiv').show();
                    }
                }
            });
        });
    });
});
</script>

The #functionTable table lives in a completely separate jsp as the div that it lives in, and gets referenced with a <jsp:include> call that will load the table that exists in that jsp into the div. This was my error. I had assumed that the entire div being in a separate jsp was enough, but I had to go farther and put the table in another separate jsp to allow just the data to be refreshed and reloaded.