Struts 2 webapp structured correctly with menu layout and iframe content?

Question

I inherited a Struts 2/JSP webapp and have a few problems and am wondering if it is structured/layered out correctly or not. After logging in the user is at a homescreen dashboard like so :

<s:form action="HomePage" name="formHomePage" method="post">
    <s:hidden name="selectedMenuItem" id="selectedMenuItem"/>
    <div id="layout">
        <!-- HEADER -->
        <div class="header" style="position:fixed; z-index:1;">
            ... Header bar ...
        </div>

        <!-- LEFT MENU -->
        <div class="left">
            <h3>Menu</h3>
                <li id="dashboard">Dashboard</li>
                <li id="projectList">Projects</li>f
                <li id="userList">Users</li>
            </ul>
        </div>

        <!-- MAIN CONTENT -->
        <div class="center">
            <iframe id="ifrmContent" name="contentFrame" src=""> </iframe>
       </div>

        <!-- FOOTER -->
        <div class="footer" style="position:fixed; z-index:1;">
            .... Footer bar ...
        </div>
    </div>
</s:form>

When the user clicks on a menu item this (pseudo) code is executed :

$(..menuItem..).click(function(index,o) {
    $("#selectedMenuItem").val(menuItemID);

    // 'Submit' this main frame to load the content JSP through the action
    formHomePage.target="contentFrame";
    formHomePage.submit();
});

The HomePage action reads the selectedMenuItem Struts variable, and returns a result that struts.xml maps to the correct JSP, like ProjectList.jsp or UserList.jsp. This HomePage with header/footer/left menu always stays in the browser and only the middle content in the iframe is replaced by the contect the user wanted. I think this is reasonable but I've read how iframes should be avoided if possible. One problem this structure has was posed in another question I wrote :

Action name/URL name in debuggers using Struts 2

Another issue is that Chrome debugger does not refresh the JSP/javascript source file when the user clicks a menu item. If I put a debugger; statement in $(window).load(); it will use the breakpoint, but it shows a random place in the original dashboard source file, NOT the file/javascript that is actually executing. The Chrome cache is disabled, but the debugger refuses to load the new source file.

So is this how Struts/JSPs are supposed to be layed out and structured? Is there a better way than iframes to load only a content 'section' of the page? I assume full page refreshes should be avoided to be more efficient. And why cant the Chrome debugger handle this properly?

score 0 · Answer 1 · answered Jul 17 '15 at 20:18

0

There's no need to use iframe to load the content. You can use Ajax if you want to stay on the page and update its content in the result div.

<div id="resultDiv" class="center">
    Initial content
</div>

The script will be something like

$(..menuItem..).click(function(index,o) {
    $("#selectedMenuItem").val(menuItemID);

    // 'Submit' this form to load the content to the resultDiv on this JSP through the action
    $.post($("form").attr("action"), $("form").serialize(),function(result) {
      $("resultDiv").html(result);
    });
});

answered Jul 17 '15 at 20:18

Roman C

49,761
33
66
176

Thx for the reply. So is that the typical/standard way of refreshing only portions of the page in a struts webapp? And will browser debuggers handle this correctly - meaning the source files are named correctly and I can debug the javascript in the JSPs? Also I assume the serialize function will ensure that the struts action object gets filled in properly? – user3708842 Jul 20 '15 at 14:45
That's why Ajax is so popular, you can connect to the server async, perform some action and return results on the same page without refresh, changes in the DOM apply immediately if you update the content of the element. – Roman C Jul 20 '15 at 18:06
OK, I finally had a chance to try this method and it appears it does NOT execute any of the javascript in the loaded 'content' JSP file. My pages use JQueryUI to style the controls so every one has javascript that has to run. Am I missing something? – user3708842 Jul 22 '15 at 18:57
May be missed jQuery, you didn't post all the code from JSP. – Roman C Jul 22 '15 at 19:01
So is there any way to load a JSP w/javascript into a 'content' portion of a page? Or was an iframe really the only solution? – user3708842 Jul 23 '15 at 00:42
If you have another question, you can ask it in the separate page. – Roman C Jul 23 '15 at 09:17

Struts 2 webapp structured correctly with menu layout and iframe content?

1 Answers1