Laravel 5: How do I display a message and redirect after an Ajax post

Question

I have a simple blog post page that is submitting data through ajax jquery. It works fine, but at the moment, it returns the json response after submission.

What I need it to do is display the success message to the user on the submit page and then redirect him to the main articles page.

If I comment out return Response::json($response); I get a blank page but I don't wanna redirect him to another view automatically, I want to show him a message for 5 seconds and then redirect him.

And $("#ajaxResponse").append(msg); isn't doing anything.

This is my controller

public function store(Requests\ArticleRequest $request)
    {

        $article = new Article($request->all());
        Auth::user()->articles()->save($article);

        $response = array(
            'status' => 'success',
            'msg' => 'Setting created successfully',
        );

        return \Response::json($response);
    }

This is AJAX request

$(document).ready(function() {
    $('#submit').on('submit', function (e) {
        e.preventDefault();
        var title = $('#title').val();
        var body = $('#body').val();
        var published_at = $('#published_at').val();
        $.ajax({
            type: "POST",
            url: host + '/articles/create',
            data: {title: title, body: body, published_at: published_at},
            success: function( msg ) {
                $("#ajaxResponse").append(msg);
            }
        });
    });
});

And this is the view

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<h1>Write a New Article</h1>

<hr>

{!! Form::open(['url' => 'articles']) !!}
    <p>
        {!! Form::label('title', 'Title:') !!}
        {!! Form::text('title') !!}
    </p>

    <p>
        {!! Form::label('body', 'Body:') !!}
        {!! Form::textarea('body') !!}
    </p>

    <p>
        {!! Form::label('published_at', 'Date:') !!}
        {!! Form::input('date', 'published_at', date('Y-m-d'), ['class' => 'form-control']) !!}
    </p>

    <p>
        {!! Form::submit('Submit Article', ['id' => 'submit']) !!}
    </p>
{!! Form::close() !!}

<h3 id="ajaxResponse"></h3>

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

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="{{ URL::asset('assets/js/ArticleCreate.js') }}"></script>

Since $response is an array, msg will be an object, so I'm pretty sure the append should be append(msg.msg), as you will also be able to access the status (using msg.status) — Karl
– Karl, Commented Aug 27, 2015 at 16:28

mdamia · Accepted Answer · 2015-08-27 17:27:41Z

2

you need to set a timeout after you get your response back from the server. try this and adjust as needed. see example below.

return \Response::json($response);

in your js

$(document).ready(function() {
  $('#submit').on('submit', function (e) {
    e.preventDefault();
    var title = $('#title').val();
    var body = $('#body').val();
    var published_at = $('#published_at').val();
    $.ajax({
        type: "POST",
        url: host + '/articles/create',
        data: {title: title, body: body, published_at: published_at},
        success: function( data) {
            console.log(data);
            if(data.status == 'success') {
              alert(data.msg);
               setInterval(function () {
                alert("Hello");
               }, 3000);

            }else{
                alert('error');
                console.log(msg);
            }
        }
    });
  });
});

adjust as needed to adpat to your code.

js fiddle example

$(document).ready(function () {
  $('.alert-me').click(function () {
    setInterval(function () {
        alert("Hello");
    }, 3000);
  });

});

edited Aug 27, 2015 at 17:27

answered Aug 27, 2015 at 17:21

mdamia

4,5571 gold badge27 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Halnex Over a year ago

I don't think this is the problem. My code isn't working anyway, the ajax request is not being sent.

mdamia Over a year ago

@Halnex You said it 's returning "returns the json response after submission." You script works just fine if you are getting response from the server?

Halnex Over a year ago

Yes I am, but I deleted the content of ArticleCreate.js just to see if I would get a different error or message, but no, I got the same json response and it's because in my controller, I'm returning return Response::json($response); so the JS wasn't taking place. I then re-added the js content and edited $('#frm').on('submit', function (e) { because earlier I had the wrong ID. So now, I'm getting POST http://localhost/laravel-5/public/articles/create 500 (Internal Server Error) in the console.

Halnex Over a year ago

I re-worked my code to get the data through and then I tried setInterval and it works like charm. Thanks :)

Collectives™ on Stack Overflow

Laravel 5: How do I display a message and redirect after an Ajax post

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related