javascript - 使用 AJAX 在 codeigniter 中更新表单模态 Bootstrap

Question

我已经为此苦苦挣扎了大约几个小时。我正在尝试创建一个模式下拉菜单(Twitter Bootstrap 模式)，其中包含一个用于选择用户类别的表单。这是内置于 CodeIgniter 中的。但是，当我尝试使用 AJAX 保存表单的值时，如果没有 alert()，SUCCESS 函数将无法运行。我很抱歉我的语法不好，希望你能明白我的意思。 我需要你的帮助...

查看(kasir_halaman.php):

<div id="editModal" class="modal fade" role="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title"><span class="glyphicon glyphicon-plus"></span> Ubah Kasir</h3>
                </div>
                <div class="modal-body">
                    <form action="#" id="editform" method="post" enctype="multipart/form-data">
                        <div class="form-group">
                            <label>Nama</label>&nbsp;<span class="error" id="report1"></span>
                            <input type="text" id="editnama" name="nama" class="form-control" maxlength="100" required>
                        </div>
                        <div class="form-group">
                            <label>E-mail</label>
                            <input type="email" id="editemail" name="email" class="form-control" maxlength="150" required>
                        </div>
                        <div class="form-group">
                            <label>Kategori</label>
                            <select class="form-control" name="kategoripetugas" id="editkategori" required>
                                <option value=""> -- Pilih Kategori -- </option>
                                <option value="1">Admin</option>
                                <option value="2">Kasir</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary" style="width:100%;">Simpan</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

Controller (kasir.php):

public function updatePetugas($id)
{
    $nama_petugas = $this->input->post('nama');
    $email_petugas = $this->input->post('email');
    $kategori_petugas = $this->input->post('kategoripetugas');
    $data = array('nama'=>$nama_petugas, 'email'=>$email_petugas, 'kategori'=>$kategori_petugas);
    $update = $this->Crud->update(array('idpetugas'=>$id), 'petugas', $data);
    if($update){
        echo 1;
    }else{
        echo 2;
    }
}

javascript (petugas.js) :

$(document).ready(function(){
var check1=0; var id;
$("#nama").bind("keyup change", function(){
    var nama = $(this).val();
    $.ajax({
        url:'kasir/cekData/kasir/nama/'+nama,
        data:{send:true},
        success:function(data){
            if(data==1){
                $("#report1").text("");
                check1=1;
            }else{
                $("#report1").text("*nama petugas sudah terpakai");
                check1=0;
            }
        }
    });
});

$(".edit").click(function(){
    id = $(this).attr('id');
    $.ajax({
        url:'kasir/getData/'+id,
        data:{send:true},
        success:function(data){
            $("#editnama").val(data['nama']);
            $("#editemail").val(data['email']);
            $("#editkategori").val(data['kategori']);   
        }
    });
});

$("#editform").submit(function(){
    var formData = new FormData($(this)[0]);
    $.ajax({
        url:'kasir/updatePetugas/'+id,
        data:formData,
        type:'POST',
        contentType: false,
        processData: false,
        success:function(data){
            if(data==1){
                $("#editModal").hide();
                window.location.reload(true);
            }else if(data==2){
                alert('gagal');
            }
        }
    });
    alert("success!"); // if i remove this alert, the success function won't run or executed
});
});

Answer 1

您可以通过几种方式解决这个问题，实际发生的是您通过ajax提交数据以及提交表单本身。

使用e或事件

$("#editform").submit(function(e){
    e.preventDefault();

或者在提交时返回false

 });
    //alert("success!"); we can comment this out because it will work now without the alert holding the page
    return false;
});

无论哪种情况，您都可以删除警报。