Проверка Laravel 4 в модале начальной загрузки

Я новичок в Laravel 4, и я пытаюсь получить подтверждение формы в модале начальной загрузки. В моем модале есть форма с вводом текста и кнопкой отправки, и я хочу, чтобы при сбое проверки модал показывал мне ошибку. Но модальное после проверки и обновления страницы закрывается. Вот код из контроллера и вид:
Код контроллера:

    public function postAvatar()
{
        $avatar_rules = array(
            'avatar_src' => 'url',

        );
        $validator = Validator::make(Input::all(), $avatar_rules);
        $validator->setAttributeNames(User::$names_attr); 

        if ($validator->passes()) 
        {                
        $avatar_src = (Input::get('avatar_src'))? Input::get('avatar_src') : URL::asset('assets/images/user/default-user-avatar.png');
        $user = User::find(Auth::id());
        $user->avatar_src = $avatar_src;

        if ($user){
         return Redirect::to('dashboard')->withSuccess("Success: avatar updated.");  
        }
        return Redirect::to('dashboard')->withError("Error: an error has occurred.");
        }
        return Redirect::back()->withErrors($validator);                
    }

Посмотреть код:

    <!-- Modal -->
<div class="modal fade" id="avatarModal" tabindex="-1" role="dialog" aria-labelledby="avatarModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="avatarModalLabel">Update avatar</h4>
      </div>
      <div class="modal-body">
          <h4><span class="label label-info">Current avatar</span></h4>
          <img class="img-circle img-responsive dashboard-avatar" src="{{ $user->avatar_src }}" alt="{{ $user->username }} avatar">     
          <div class="divider"></div>
          <h4><span class="label label-info">New avatar</span></h4>
          {{ Form::open(array('url' => 'dashboard/avatar', 'method'=>'post', 'role'=>'form')) }}
            <ul>
                @foreach($errors->all() as $error)
                <div class="alert alert-danger" role="alert">{{ $error }}</div>
                @endforeach
            </ul>          
          <div class="form-group">
            <label for="avatar_src" class="control-label">Link avatar</label>
            <input type="text" name="avatar_src" class="form-control" id="avatar_src" placeholder="Link of avatar image url">
          </div>     
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Update</button>
      </div>
         {{ Form::close() }}       
    </div>
  </div>
</div>

Как я могу решить? Благодарю.

РЕШИТЬ:
Код контроллера:

public function postAvatar()
{
        $avatar_rules = array(
            'avatar_src' => 'url',

        );
        $validator = Validator::make(Input::all(), $avatar_rules);
        $validator->setAttributeNames(User::$names_attr); 

        if ($validator->passes()) 
        {                
        $avatar_src = (Input::has('avatar_src'))? Input::get('avatar_src') : URL::asset('assets/images/user/default-user-avatar.png');
        $user = User::find(Auth::id());
        $user->avatar_src = $avatar_src;

        if ($user->save()){
         if(Request::ajax()){
           return Response::json(array('success' => true));
        }
        }
        return Redirect::to('dashboard')->withError("Error: an error has occurred.");
        }
            return Response::json(array('errors' => $validator->errors()->toArray()));
        }

Посмотреть код:

<!-- Modal -->
<div class="modal fade" id="avatarModal" tabindex="-1" role="dialog" aria-labelledby="avatarModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="avatarModalLabel">Update avatar</h4>
      </div>
      <div class="modal-body">
          <h4><span class="label label-info">Current avatar</span></h4>
          <img class="img-circle img-responsive dashboard-avatar" src="{{ $user->avatar_src }}" alt="{{ $user->username }} avatar">     
          <div class="divider"></div>
          <h4><span class="label label-info">New avatar</span></h4>
          {{ Form::open(array('url' => 'dashboard/avatar', 'id'=>'avatar_form', 'method'=>'post', 'role'=>'form')) }}
          <div class="alert alert-danger avatar_alert" role="alert" style="display: none">
              <ul></ul>
          </div>
            <ul>
            </ul>          
          <div class="form-group">
            <label for="avatar_src" class="control-label">Link avatar</label>
            <input type="text" name="avatar_src" class="form-control s_tooltip" id="avatar_src" placeholder="Avatar image links">
          </div>     
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Update</button>
      </div>
         {{ Form::close() }}       
    </div>
  </div>
</div>

Ajax:

<script>
$(document).on('submit', '#avatar_form', function(event){
    var info = $('.avatar_alert');
    event.preventDefault();
    var data = { avatar_src: $("#avatar_src").val() }

    $.ajax({
        url: "/dashboard/avatar",
        type: "POST",
        data: data,
    }).done(function(response) {
            info.hide().find('ul').empty();
        if(response.errors)
        {
            $.each(response.errors, function(index, error){
                info.find('ul').append(error);
            });
            info.slideDown();
        }
        else if(response.success){
          window.location.href = "/dashboard";
        }
    });
});
</script>

2 ответа

Решение

Лучше всего будет проверить форму через AJAX, чтобы избежать полной перезагрузки страницы. Затем вы проверите ответ вашего AJAX-запроса на наличие ошибок и покажите их внутри модальных, если они существуют.

Вы также можете добавить проверку на стороне клиента, чтобы предотвратить выполнение запроса до тех пор, пока не будут соблюдены правила. Я бы не рекомендовал использовать этот INSTEAD для проверки на стороне сервера, но использовать его ASWELL, как это обычно довольно желательно.

Для этого вам нужно сделать что-то вроде этого:

Javascript:

Поймайте отправку события вашей формы и сделайте запрос AJAX.

$(document).on('submit', 'form', function(event){
    event.preventDefault();

    var data = { avatar_src: $("#avatar_src").val(); };

    $.ajax({
        url: "/dashboard/avatar",
        data: data
        type: "POST",
    }).done(function(response) {
        if(response.errors)
        {
            // Add error to Modal Body
        }
        else
        {
            // Show success message, close modal?
        }
    });
});

Backend:

Измените метод контроллера, чтобы определить, является ли текущий запрос запросом AJAX, и если да, вернуть ответ в JSON вместо перенаправления. Например:

if(Request::ajax())
{
    return Response::json(array('errors' => $validator->messages()));
}
else
{
    return Redirect::back()->withErrors($validator);
}

Я не тестировал этот код, поэтому может содержать некоторые опечатки / ошибки, но, надеюсь, это поможет вам!

Я столкнулся с той же проблемой. После исследования Интернета я обнаружил, что Laravel не поддерживает метод withSuccess('success_msg').

     return Redirect::to('dashboard')->withSuccess("Success: avatar updated."); 

Вот полное обсуждение этой темы: https://github.com/laravel/framework/issues/906.

Но вы можете решить эту проблему с помощью этого подхода:

- Для сообщения об ошибке:-

[код должен быть добавлен в контроллер]

return Redirect::to('view')->withErrors('your error message.');

[код должен быть добавлен в поле зрения]

@if(isset($errors) && count($errors->all())>0)
<ul>
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
@endif

- для успешного сообщения:-

[code has to be added in controller]

$success_msg='your success message.';
Session::flash('successMsg', $success_msg);
return Redirect::to('view');

[code has to be added in view]

@if (Session::has('successMsg'))
{{ Session::get('successMsg') }}
@endif

This approach is working fine for me. For better display of your errors you can use bootstrap css.

Другие вопросы по тегам