使用AJAX在codeigniter中更新表单模式引导程序

时间:2015-12-30 18:58:02

标签: javascript php jquery twitter-bootstrap codeigniter

在这几个小时里一直在努力。我试图有一个模态下拉(Twitter引导模式),其中包含一个表单来选择一个用户类别。这是在CodeIgniter中构建的。但是当我尝试使用AJAX保存表单的值时,SUCCESS函数将在没有alert()的情况下运行。对不起我的语法不好,我希望你能理解我的意思。 我需要你的帮助......

查看(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
});
});

1 个答案:

答案 0 :(得分: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;
});

在任何一种情况下,您都可以删除警报。