一个模态 Bootstrap 两个动作

Question

我有一个 Bootstrap 模态，一次显示会话中的数据，一次显示空字段，以便从管理员创建新用户（我有两个按钮 "New" 和 "User In Session" 指向相同的模态）。我使用会话用 jQuery 填充字段 "User in session" 并且我删除了它们以方便新用户的插入。但是，一旦删除，我就没有按钮 "User in session."

如何在删除后用会话重新填充字段？

<div id="modalInsertOrUpdate" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header centerMyText">

                <h4 class="modal-title">Gestione Dati</h4>
            </div>

            <form id="formInserOrUpdate" class="form-horizontal" action="updateUtente.action">

                <div class="modal-body">
                    <div class="form-group">
                        <label for="id" class="col-sm-2 control-label">ID</label>

                        <div class="col-sm-9">
                            <s:textfield readonly="true" type="text" name="id"
                                         value="%{#session.utenteLoggato.id}"
                                         class="form-control"
                                         id="id"/>
                        </div>
                        <div class="col-sm-1">
                            <a href="#" id="infoId" data-toggle="popover" rel="popover" title="ID"
                               data-content="ID generato automaticamente"><span
                                    class="glyphicon glyphicon-info-sign"></span>
                            </a>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="nome" class="col-sm-2 control-label">Nome</label>

                        <div class="col-sm-10">
                            <s:textfield type="text" name="nome" class="form-control"
                                         value="%{#session.utenteLoggato.nome}"
                                         id="nome"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="cognome" class="col-sm-2 control-label">Cognome</label>

                        <div class="col-sm-10">
                            <s:textfield type="text" name="cognome" class="form-control"
                                         value="%{#session.utenteLoggato.cognome}"
                                         id="cognome"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="mail" class="col-sm-2 control-label">Mail</label>

                        <div class="col-sm-10">
                            <s:textfield type="email" cssErrorClass="errorLabel" name="mail" class="form-control"
                                         value="%{#session.utenteLoggato.mail}"
                                         id="mail"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="telefono" class="col-sm-2 control-label">Telefono</label>

                        <div class="col-sm-10">
                            <s:textfield type="text" name="telefono" class="form-control"
                                         value="%{#session.utenteLoggato.telefono}"
                                         id="telefono"/>
                        </div>
                    </div>

                    <s:if test='#session.utenteLoggato.tipoUtente.equalsIgnoreCase("Admin")'>
                        <div class="form-group">
                            <label for="tipoUtente" class="col-sm-2 control-label">Permessi</label>

                            <div class="col-sm-10">
                                <select name="tipoUtente" id="tipoUtente" disabled>
                                    <option value="user" selected>User</option>
                                    <option value="admin"
                                            <s:if test='#session.utenteLoggato.tipoUtente.equalsIgnoreCase("Admin")'>selected</s:if> >
                                        Admin
                                    </option>

                                </select>
                            </div>
                        </div>
                    </s:if>

                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">Password</label>

                        <div class="col-sm-9">
                            <s:textfield type="password" name="password" class="form-control"
                                         id="password"/>
                        </div>
                        <div class="col-sm-1">
                            <a href="#" id="infoButton" rel="popover" data-toggle="popover" title="Password"
                               data-content="La password deve essere di 8 caratteri."><span
                                    class="glyphicon glyphicon-info-sign"></span>
                            </a>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="passwordAgain" class="col-sm-2 control-label">Ripeti Password</label>

                        <div class="col-sm-9">
                            <s:textfield type="password" name="passwordAgain" class="form-control"
                                         id="passwordAgain"/>
                        </div>
                    </div>


                    <div class="form-group">
                        <div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close
                                </button>
                                <s:submit type="button" id="modificaButton" class="btn btn-primary pull-right">Modifica</s:submit>
                            </div>
                        </div>
                    </div>
                </div>

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



<ul class="dropdown-menu">

        <li><a href="#" data-toggle="modal" data-target="#modalMyPassword">
            <span class="glyphicon glyphicon-edit"> Password</span></a></li>

        <li><a href="#" id="myUtente" data-toggle="modal" data-target="#modalInsertOrUpdate">
            <span class="glyphicon glyphicon-pencil"> Personale</span></a></li>

        <s:if test='#session.utenteLoggato.tipoUtente.equalsIgnoreCase("admin")'>
            <li><a href="#" id="addUtente" data-toggle="modal" data-target="#modalInsertOrUpdate">
                <span class="glyphicon glyphicon-user"> *New</span></a></li>
        </s:if>

        <li><a href="index.jsp"><span class="glyphicon glyphicon-off"> Logout</span></a></li>

    </ul>
</div>
<s:include value="modalInsertOrUpdate.jsp"></s:include>

Answer 1

对于您的情况，将会话数据存储到隐藏的输入字段并使用 JQuery 以便在单击一个按钮或另一个按钮时检索它们会更容易，这里您有一个有效的 fiddle .出于时间考虑，我使用了一个简单的表单，但您可以随时更改代码以适合您的模式。希望这能有所帮助。

$(document).ready(function(){
  $('#new').click(function() {
    $('.form-input').each(function(index, element){
      $(this).val('');
    });
  });
  
  $('#session').click(function() {
    $('.form-input').each(function(index, element){
      $(this).val($('#hidden-' + $(this).attr('id')).val());
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" id="new">New</button>
<button type="button" id="session">Session</button>

<form id="myForm">
  <input type="hidden" id="hidden-id" value="1">
  <input type="hidden" id="hidden-username" value="abcd">
  <input type="hidden" id="hidden-email" value="abcd@abcd.it">
  <input type="hidden" id="hidden-name" value="abcd">
  <input type="hidden" id="hidden-surname" value="abcd">
  <input type="text" class="form-input" id="id" value="1">
  <input type="text" class="form-input" id="username" value="abcd">
  <input type="text" class="form-input" id="email" value="abcd@abcd.it">
  <input type="text" class="form-input" id="name" value="abcd">
  <input type="text" class="form-input" id="surname" value="abcd">
  <input type="password" id="password">
  <input type="password" id="password-confirm">
</form>

当然，因为您正在使用 Struts2，所以隐藏的输入不应该在您使用 getter/setter 的操作中引用任何变量，否则它们将被调用。

另一个解决方案可能是使用这样的数据属性：

<!-- In your form put the data attributes -->
<form id="myForm" data-id="%{#session.utenteLoggato.id}" data-username="%{#session.utenteLoggato.username}"> <!-- and so on -->

<!-- Modify the script in order to get data attribute instead of val -->
$('#session').click(function() {
  $('.form-input').each(function(index, element){
    $(this).val($('#myForm').data($(this).attr('id')));
  });
});

我认为第二个解决方案可以更多"elegant"

一个模态 Bootstrap 两个动作

One Modal Bootstrap two action

session

jquery

bootstrap-modal