刷新bootstrap模式

时间:2018-03-15 18:58:08

标签: javascript jquery html twitter-bootstrap bootstrap-modal

我有这个引导模式:

<div class="modal fade" id="nuovoUtente" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Aggiungi utente</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formUtenti" action="#">
                <div class="form-group">
                    <label for="exampleInputEmail1">Nome</label>
                    <input type="text" class="form-control" id="aggNomeUtente" placeholder="Inserisci il nome">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Cognome</label>
                    <input type="text" class="form-control" id="aggCognomeUtente" placeholder="Inserisci il cognome">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Funzione</label>
                    <textarea class="form-control" id="aggFunzioneUtente" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">E-Mail</label>
                    <input type="email" class="form-control" id="aggMailUtente" placeholder="Inserisci la Mail">
                    <small id="emailHelp" class="form-text text-muted"><i class="fas fa-exclamation-triangle warningTriangolo"></i> Credenziale di accesso</small>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Password</label>
                    <input type="password" class="form-control" id="aggPasswordUtente" placeholder="Inserisci la Password">
                    <small id="passwordHelp" class="form-text text-muted"><i class="fas fa-exclamation-triangle warningTriangolo"></i> Credenziale di accesso</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="aggNuovoUtente" class="btn btn-primary">Salva e invia</button>
                <button type="button" class="btn btn-secondary" id="chiusuraAgg" data-dismiss="modal">Chiudi senza salvare</button>
            </div>
                </form>
        </div>
    </div>
</div>

当用户点击该按钮被发送到js页面,该页面为php页面创建一个jquery ajax ...时:

$.ajax({
        url: '../PHP/getuser.php?az=nuovoUtente',
        data: utente,
        processData: false,
        type: 'POST',
        dataType: 'json',
        contentType: false
    })
    .done(function(data){
  alert("Inserito");  
    })
    .fail(function(){
        $('.modal-body').html('Qualcosa è andato storto, prova di nuovo. Molto probabilmente esiste già un utente con le                tue credenziali');
    });

我的问题是: 如果用户输入已经在数据库中的邮件或密码(在这种情况下,我最终在方法.fail中),模式将丢失其HTML格式并使用我在.fail中写入的文本填充它。 我希望当我关闭模态时,我会回到HTML中的初始格式。我如何能? 非常感谢

1 个答案:

答案 0 :(得分:0)

考虑以下JSFiddle作为解决方案。

<强>说明: 我会将两个部分放入模态中并隐藏不需要的部分,并在需要时切换错误消息。

请注意,我已将您现有的LeaveOneGroupOut调整为<div>字段,例如

id

并使用

将错误消息添加到代码中

<div class="modal-body" id="main">