Question

我有以下页面。有一个表单，用户点击提交后，所有背景，徽标和格式都消失了。你知道为什么吗？我尝试删除commandButton的操作，因此它不会调用该方法，但会发生同样的问题。

谢谢。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Landing Page</title>

        <script src="js/jquery-3.1.1.js"></script>

        <style>
            #container {
                width: 1024px;
                /*min-width: 600px;*/
                height: 1024px;
                /*display: flex;*/
                /*align-items: center;*/
                background-image: url("img/background_2300x1219.jpg");
                background-repeat: no-repeat;
                background-size: 1024px;
            }  

            #header {
                clear: both;
                width: 100%;
                height: 100px;
                /*align-content: center;*/
                /*                padding-top: 20px;
                                padding-left: 20px;*/

            }

            #headerTable {
                width: 100%;
                height: 100%;
                background-color:rgba(0, 0, 0, 0.5);
                /*padding-top: 20px;*/
                /*padding-left: 20px;*/
            }

            #mainTableDiv {
                float: left;
                /*border: 1px solid black;*/
            }

            .mainTable {
                width: 1024px;
                float: left;
            }

            .mainTableRightSide {
                width: 30%;
            }

            .mainTableCenter {
                width: 20%;
            }

            .mainTableLeftSide {
                width: 50%;
            }

            .mainTableFirstRow {

                height: 60px;
            }

            .mainTableSecondRow {

            }

            .mainTableThirdRow {

            }

            #mainTableRightDiv1 {
                display: none;
                background-color:rgba(0, 0, 0, 0.5);
            }

            .formTd {
                color: white;
            }

            .output {
                color: white;
            }

            #logo {
                width: auto;
                height: 80px;
            }

            #mainTableCellAbout {
                background-color:rgba(0, 0, 0, 0.5);
                color: white;
            }

        </style>

        <script>

            $(document).ready(function () {
                result = "";

                $(document).on("click", "#subscribe", function () {
                    $("#mainTableRightDiv1").css("display", "block");
                });
            });



        </script>

    </h:head>

    <h:body>
        <div id="container">  
            <div id="header">
                <table id="headerTable">
                    <tr><td>
                            <img id="logo" src="img/BiTrack_Logo_740x256.png"></img>
                        </td></tr>
                </table>
            </div>

            <div id="mainTableDiv">
                <table class="mainTable">
                    <tr class="mainTableFirstRow">
                        <td class="mainTableLeftSide"></td>
                        <td class="mainTableCenter"></td>
                        <td class="mainTableRightSide"></td>
                    </tr>
                    <tr class="mainTableSecondRow"><td class="mainTableLeftSide" id="mainTableCellAbout">
                            long text long text long text long text</td>
                        <td class="mainTableCenter"></td>
                        <td class="mainTableRightSide"></td>

                    </tr>
                    <tr class="mainTableThirdRow">
                        <td class="mainTableLeftSide"></td>
                        <td class="mainTableCenter"></td>
                        <td class="mainTableRightSide">

                            <button class="button" id="subscribe">Subscribe</button>
                            <h:form>
                                <div id="mainTableRightDiv1">

                                    <table class="hidden" id="formTable">
                                        <tr>
                                            <td class="formTd">First Name:</td>
                                            <td><h:inputText class="form" id="inputFirstName" value="#{visitor.firstName}"/></td> 
                                        </tr>
                                        <tr>
                                            <td class="formTd">Last Name:</td>
                                            <td><h:inputText class="form" id="inputLastName" value="#{visitor.lastName}"/></td> 
                                        </tr>
                                        <tr>
                                            <td class="formTd">Email:</td>
                                            <td><h:inputText class="form" id="inputEmail" value="#{visitor.email}"/></td> 
                                        </tr>
                                    </table>

                                </div>

                                <p><h:commandButton class="button" value="Submit" action="#{visitor.registerVisitor()}"/></p>
                                <p><h:outputText class="output" id="result" value="#{visitor.result}"/></p>

                            </h:form></td>
                    </tr>
                </table>
            </div>

        </div>



    </h:body>
</html>

在commandButton提交页面被破坏之后

0 个答案: