Question

我知道在下面的循环中编写IF-ELSEIF-ELSE语句会起作用，但我想避免编写多个模态。相反，当我点击图像图标（基本上是信息图像）时，我正在寻找弹出的JQuery模式。我希望能够将错误传递给函数，然后函数将显示在模态中。

示例：

说我有400错误和500错误，当我点击信息图标时，应该出现定义。

以下代码：

index.gsp中

<html>
    <%-- Some code (saving space for body) --%>
<body>
    <div id="content">
    <div id="content-header">
        <h1>Error Checking</h1>
    </div> <!-- #content-header -->

    <div id="content-container">
        <div class="portlet">
            <div class="portlet-content">
                <div class="table-responsive">
                    <table
                            class="table table-striped table-bordered table-hover table-highlight table-checkable"
                            data-provide="datatable"
                            data-display-rows="25"
                            data-info="true"
                            data-search="true"
                            data-length-change="true"
                            data-paginate="true">
                        <thead>
                        <tr>
                            <th data-filterable="true" data-sortable="true" data-direction="desc">User ID</th>
                            <th data-filterable="true" data-sortable="true" data-direction="desc">Task ID</th>
                            <th data-filterable="true" data-sortable="true" data-direction="desc">Error Message</th>
                        </tr>
                        </thead>
                        <tbody>
                        <g:each in="${lists}" var="list">
                            <tr>
                                <td>${list.userId}</td>
                                <td>${list.taskId}</td>
                                <td>
                                   **%{--WANT TO PLACE MODAL CALL HERE--}%**
                                    **<a href=""><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
                                    ${list.errorMsg}**
                                </td>
                            </tr>
                        </g:each>
                        </tbody>
                    </table>
                </div> <!-- /.table-responsive -->
            </div> <!-- /.portlet-content -->
        </div> <!-- /.portlet -->
    </div> <!-- /#content-container -->
</div> <!-- #content -->

我想弹出的MODAL：

<div id="styledFreqLargerModal" class="modal modal-styled fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title">Issue</h3>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-tertiary" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

您可以使用列表项的ID生成动态ID。然后你可以将你的模态放在你提到的地方。以下是代码示例：

<div id="styledFreqLargerModal${list.id}" class="modal modal-styled fade">
    [..]
</div><!-- /.modal -->

如果您使用的是jQuery-UI

<a class="openDialog" href="#styledFreqLargerModal${list.id}"><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>

在你的javascript中执行：

$(document).on("click", "a.openDialog", function() {
   $($(this).attr("href")).dialog();
}

如果您使用的是bootstrap

<a data-toggle="modal" href="#styledFreqLargerModal${list.id}"><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>

Answer 2

解决了问题...使用了Jquery模态。这使我无法创建多个模态。在模态中，我有一个“click”方法，用于确定单击了哪个项目，然后输出该特定消息。请参阅下面的代码。

index.gsp中

<html>
    <%-- Some code (saving space for body) --%>
<body>
  <div id="content">
  <div id="content-header">
    <h1>Error Checking</h1>
  </div> <!-- #content-header -->

  <div id="content-container">
    <div class="portlet">
        <div class="portlet-content">
            <div class="table-responsive">
                <table
                        class="table table-striped table-bordered table-hover table-highlight table-checkable"
                        data-provide="datatable"
                        data-display-rows="25"
                        data-info="true"
                        data-search="true"
                        data-length-change="true"
                        data-paginate="true">
                    <thead>
                    <tr>
                        <th data-filterable="true" data-sortable="true" data-direction="desc">User ID</th>
                        <th data-filterable="true" data-sortable="true" data-direction="desc">Task ID</th>
                        <th data-filterable="true" data-sortable="true" data-direction="desc">Error Message</th>
                    </tr>
                    </thead>
                    <tbody>
                    <g:each in="${lists}" var="list">
                        <tr>
                            <td>${list.userId}</td>
                            <td>${list.taskId}</td>
                            <td>
                               <g:if test="${(list.errorMsg).contains("400")}">
                                  <a id="modalAlert-${list.taskId}" class="modal-alert-null" ><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
                                  ${list.errorMsg}
                               </g:if>
                               <g:elseif test="${(list.errorMsg).contains("500")}">
                                  <a id="modalAlert-${list.taskId}" class="modal-alert-outOfBounds" ><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
                                  ${list.errorMsg}
                                </g:elseif>
                            </td>
                        </tr>
                    </g:each>
                    </tbody>
                </table>
            </div> <!-- /.table-responsive -->
        </div> <!-- /.portlet-content -->
    </div> <!-- /.portlet -->
  </div> <!-- /#content-container -->
</div> <!-- #content -->

<r:require modules="jquery"/>
<script type="text/javascript">
    $(document).ready(function() {
        // Null pointer exception
        $(".modal-alert-null").click(function() {
            modalAlert("400 error message");
        });
        // outOfBoundsException
        $(".modal-alert-outOfBounds").click(function() {
            modalAlert("500 error message");
            });

    });

    function modalAlert(description)
    {
        $("body").append(buildAlertModal());

        $("#alert-modal .modal-description").html(description);

        $("#alert-modal").modal("show");
    }

    function buildAlertModal() {
        return "<div id='alert-modal' class='modal modal-styled fade'>" +
                "   <div class='modal-dialog'>" +
                "       <div class='modal-content'>" +
                "           <div class='modal-header'>" +
                "               <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>" +
                "               <h3 class='modal-titl'>Exception Info</h3>" +
                "           </div>" +
                "           <div class='modal-body'>" +
                "               <p class='modal-description'></p>" +
                "           </div>" +
                "           <div class='modal-footer'>" +
                "               <button type='button' class='btn btn-tertiary' data-dismiss='modal'>Close</button>" +
                "           </div>" +
                "       </div>" +
                "   </div>" +
                "</div>";
    }

    function closeModalAlert() {
        $("#alert-modal").modal("hide");
    }
</script>

使用JQuery创建可重用的模式

2 个答案: