javascript - 在 codeigniter 上使用 jQuery 提交动画

Question

我正在使用两个 jQuery 插件，它们是:

1. jQuery 验证:http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js .
2. jQuery blockui:http://malsup.com/jquery/block/#download

我使用 PHP Codeigniter 和 jQuery 开发了该应用程序，它包含一个使用以下代码构建的表单:

<div class="row-fluid">
<div class="box span12">
    <div class="box-header" data-original-title>
        <h2><i class="halflings-icon edit"></i><span class="break"></span>Form Perbaikan</h2>
        <div class="box-icon">

            <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>

        </div>
    </div>

    <div class="box-content">   
        <?php
        $properties = array('class' => 'form-horizontal', 'id' => 'form1');
        echo form_open("control_perbaikan/userRequest", $properties);
        ?>

        <fieldset>
            <div class="control-group">
                <label class="control-label">Jenis Request :</label>
                <div class="controls" id="chekboxes">
                    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Login" value="Login" /> Login </label>
                    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Printer" value="Printer"/> Printer </label>
                    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Monitor" value="Monitor"/> Monitor</label>
                    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Computer" value="Computer"/> Computer</label>
                    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Network" value="Network"/> Network</label>
                    <label class="checkbox inline"><input type="checkbox" name="request[]" id="Other" value="Lain-lain" /> Other</label> 
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="selectError1">Ditujukan untuk :</label>
                <div class="controls">
                    <select id="email" multiple data-rel="chosen" class="input-xlarge" name="email[]">
                        <?php
                        foreach ($atasan as $data) {
                        echo "<option value='" . $data['email'] . "'>" . $data['email'] . "</option>";
                        }
                        ?>

                    </select>
                </div>
            </div>

            <div class="control-group hidden-phone">
                <label class="control-label" for="Keluhan" >Description: </label>
                <div class="controls">
                    <textarea class="cleditor" name="keluhan" id="keluhan" rows="3"></textarea>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary" id="submit">Kirim</button>
                <button type="reset" class="btn">Cancel</button>
            </div>
        </fieldset>
        <?php echo form_close(); ?>   
    </div>
</div><!--/span-->

这是上述表单的 JavaScript 代码:

$(document).ready(function() {
            $("#form1").validate({
                rules: {
                    keluhan: {
                        required: true
                    },
                    'request[]': {
                        required: true
                    },
                    'email[]':{
                        required: true
                    }

                },
                messages: {
                    keluhan: "&nbsp &nbsp Jelaskan permasalahan Anda ...!",
                    'request[]': "Harap pilih minimal satu option ...!",
                    'email[]': "Harap pilih email atasan ...!"
                },
                submitHandler: function(form) {
                    form.submit();
                }

            });

            $("#form1").submit(function(event) {
                $.blockUI({ message: '<h1><img src="http://localhost/tresnamuda/assets/img/loader.gif" />Sedang diproses</h1>' }); 
            });
        });

这是处理提交过程的 PHP 代码:

public function userRequest() {

    $user_request = $_POST['request'];
    $selected_request = "";
    foreach ($user_request as $request) {
        $selected_request .= $request . ", ";
    }
    $selected_request = substr($selected_request, 0, -2);

    /* ini code buat mengambil email yang dituju */
    $email_tuju = $_POST['email'];
    $selected_email = "";

    foreach ($email_tuju as $e) {
        $selected_email .= $e . ", ";
    }

    $selected_email = substr($selected_email, 0, -2);
    $keluhan = $this->input->post("keluhan");

    $keluhanPesanEmail = $keluhan."<br / >  <br /> Mohon untuk segera di approved melalui link berikut : http://192.168.5.222";

    $keterangan = $this->input->post("keterangan");

    /* ini code default keluhan */
    $status_request = "Belum Selesai";
    $catatan = "";

    /*  ini code tanggal request */
    $this->load->helper('date');
    $bulan = date("Y-m-d");
    $month = date("m");
    $now = date("Y-m-d H:i:s");
    $waktu_tutup_request = date("Y-m-d H:i:s");
    $insert_data = $this->model_request->insertRequest($bulan, $id_request, $kode_jabatan, $username, $no_karyawan, $departement, $jabatan, $selected_request, $keluhan, $keterangan, $catatan, $email_user, $status_request, $selected_email);

    if ($insert_data == true) {
        redirect('control_closing');
    } else {
        echo "Wrong ... ";
    }
}

我的目标是当用户单击提交按钮时，动画将运行直到加载下一页。我怎样才能做到这一点？

Answer 1

嗨，更改提交处理程序

 submitHandler: function(form) {
                    $.blockUI({ message: '<h1><img src="http://localhost/tresnamuda/assets/img/loader.gif" />Sedang diproses</h1>' });
$.ajax({
  method: "POST",
  url: form.action,
  data: form.serialize(),
})
  .done(function( msg ) {
    $.blockUI({ message: "Data Submited " });
  });
                }

了解 ajax api http://api.jquery.com/jquery.ajax/ .