一个Modal Bootstrap两个动作

时间:2015-12-17 10:23:00

标签: jquery session bootstrap-modal

我有一个Bootstrap模式,一旦你的数据在会话中显示,一次空字段,以便从管理员创建一个新用户(我有两个按钮"新"和"用户在会话& #34;指向相同的模态)。我使用会话来填充字段"用户在会话中"使用jQuery,我已将其删除,以方便新用户的插入。但是,一旦删除,我就没有按钮"会话中的用户。"

如何删除会话后重新填充会话字段?

<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>

1 个答案:

答案 0 :(得分:0)

对于您的情况,将会话数据存储到隐藏的输入字段并使用JQuery以便在单击一个按钮或另一个按钮时检索它们更容易,这里您有一个工作小提琴。出于时间目的,我使用了一个简单的表单,但您可以随时更改代码以适合您的模态。希望这可以提供帮助。

&#13;
&#13;
$(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());
    });
  });
});
&#13;
<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>
&#13;
&#13;
&#13;

当然,由于您使用的是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')));
  });
});

我认为第二种解决方案可以更加优雅&#34;