1

私はブートストラップ モーダルを使用しようとしています。いくつかのチュートリアルを見てきましたが、すべてをまとめることができません。私は 0 の js スキルを持っています。通常のlaravelの方法で送信および検証するモーダルのフォームがあります。唯一の問題は、エラーがある場合、モーダルではなくページの更新時にメッセージが表示されることです。:(

投稿で見た ajax のものをいくつか追加しました。これにより、フォームがリフレッシュせずにデータをデータベースに送信できるようになりました。:)しかし、挿入時にエラーと成功メッセージを正しく返す方法がわかりません。これまでのところ、機能する唯一のエラーは赤で色分けされた必須フィールドですが、メッセージは表示されません。

私が達成したいのはこれですが、モーダルチュートリアルでは

これは私がこれまでに持っているコードです:

形

{{ Former::open('admin/staff/create_staff', 'POST')->rules(User::$rules)->id('add_staff'); }} 
{{ Former::token();}}
{{ Former::text('f_name','First Name')->required(); }}
{{ Former::text('l_name','Last Name')->required(); }}
{{ Former::text('username','Username'); }}
{{ Former::text('user_number','User number')->required(); }}
{{ Former::text('email','Email')->required(); }}
{{ Former::password('password','Password')->required(); }}
{{ Former::select('gender','gender')->options(array('man'=>'male','female'=>'female'))->placeholder('Select Gender')->required() }}
{{ Former::select('contractor','contractor')->fromQuery(Contractor::all(), 'contractor', 'contractor')->placeholder('Select Contractor')->required(); }}
{{ Former::select('campus','campus')->fromQuery(Campus::all(), 'campus', 'campus')->placeholder('Select Campus')->required(); }}
{{ Former::select('status','status')->options(array('1'=>'Active','0'=>'In-active'))->placeholder('Select Status')->required() }}
{{ Former::actions (Former::large_primary_submit('Submit')->id('sub'),Former::large_inverse_reset('Reset')->id('clear')) }} 
{{ Former::close() }}

コントローラ：

if(Request::ajax()) {
            $rules = [
                'f_name'        => 'required',
                'l_name'        => 'required',
                'user_number'   => 'required',
                'email'         => 'required|email',
                'gender'        => 'required',
                'campus'        => 'required',
                'status'        => 'required',
                'contractor'    => 'required',
                'password'      => 'required',
            ];

            $validation = Validator::make(Input::all(),$rules);

$response = ["error" => ['error'=>'true','status'=>'Sorry there has been an error'],
"success" => ['success'=>true,'message'=>'The new staff member was successfully added to the system']
            ];

            if($validation->fails())
            {
                return Response::json($response["error"]);
            }
            else
            {

 $user = User::find_by_email(Input::get('email'));
 if($user) {
   // send a message back via ajax that the email already exists
   if($user) {
    return Redirect::back()->with_input()
        ->with('status','The email address is already in use');
    }
 }

      $staff = new User(array( 
      'f_name'                  => Input::get('f_name'), 
      'l_name'                  => Input::get('l_name'), 
      'user_number'             => Input::get('user_number'), 
      'username'            => Input::get('username'), 
      'email'               => Input::get('email'),
      'password'                => Hash::make(Input::get('password')),
      'status'              => Input::get('status'),
      'gender'              => Input::get('gender'),    
      ));$staff->save();

  // Automatically create a profile for the new staff member
   $staff_profile = new Profile(array(
   'user_id'            => $teacher->id, 
   'contractor'         => Input::get('contractor'),
   'campus'             => Input::get('campus'),
                ));
  $staff_profile->save();

   return Response::json($response["success"]);

  }
        }

JQuery

 $('#add_staff').submit(function(){
    var datas = $(this).serialize();
    url = $(this).attr('action');

    $.ajax({
        type: 'POST',
         url: url,
         data: datas,
         dataType: 'JSON',
         success: function(msg,status){
            if(msg.error)
            {
                $(f_name).removeClass('required');
                $(f_name).addClass('required field error');
                $(l_name).removeClass('required');
                $(l_name).addClass('required field error');
                $(user_number).removeClass('required');
                $(user_number).addClass('required field error');
                $(email).removeClass('required');
                $(email).addClass('required field error');
                $(gender).removeClass('required');
                $(gender).addClass('required field error');
                $(campus).removeClass('required');
                $(campus).addClass('required field error');
                $(status).removeClass('required');
                $(status).addClass('required field error');
                $(contractor).removeClass('required');
                $(contractor).addClass('required field error');
                $(password).removeClass('required');
                $(password).addClass('required field error');

            }
            else if(msg.success)
            {
                $("#succesful_message").html(msg);
                clearInput();

            }
        }
    });
    return false;
});

function clearInput() {
$("#add_staff :input").each( function() {
    $(this).val('');
});
}

私を正しい方向に向ける情報があれば、感謝します。

4

1 に答える 1

1

私が最初に気づいたのは、これを追加する必要があるということです:

$('#add_staff').submit(function(e){
    e.preventDefault();
    ...
}

そうすれば、フォームはページを更新しません。

于 2013-01-04T21:57:56.067 に答える