How to return views upon Ajax requests in Laravel

Question

Let me start off by saying I am a moderate at Laravel/JQuery so please bear with my question.

I would like to return a view when the user clicks a button, using ajax. Whenever I click the button, I receive no error but also do not get any html. Any help is appreciated.

I defined my routes web.php as:

Route::get('ajax', function() {
    return view('test');
});

Route::post('/getmsg', function() {
     $msg = "<strong>This is a simple message.</strong>";
     $returnHTML=view('form1_sections/section2_form')->render();
     return response()->json(array('html'=>$returnHTML, 'msg'=>$msg));
});

My test.blade.php looks like:

<html>
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Ajax Example</title>

    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>

    <script>
        function getMessage() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'POST',
                url: '/getmsg',
                data: '_token = <?php echo csrf_token() ?>',
                success: function (data) {

                    $("#msg").html(data.html);
                }
            });
        }
    </script>
</head>

<body>
    <div id = 'msg'>This message will be replaced using Ajax. 
        Click the button to replace the message.</div>
    <form>
        <button onclick="getMessage()">Replace Message</button>
    </form>
</body>

My section2_form view looks like:

<div class="well">
<div class="row">
    <div class="col-xs-12">

        <h4>Date of Previous Research Leave</h4>
        <br>
        <label>Start Date:</label>
        <label>
            <input class="form-control" name="startDate" id="startDate" placeholder="Start Date" type="date">
        </label>
        <br><br>
        <label>End Date:</label>
        <label>
            <input class="form-control" name="endDate" id="endDate" placeholder="End Date" type="date">
        </label>
    </div>
</div>

what is the result of console.log(data) inside success function? — Mahesh Singh Chouhan
– Mahesh Singh Chouhan, Commented May 30, 2017 at 17:16

Ohgodwhy · Accepted Answer · 2017-05-30 17:17:40Z

2

Set the dataType of your request to json. Also your construction of your token is, well it's not incorrect, but there's a better way, observe the following for the complete answer:

$.ajax({
    type: 'POST',
    url: '/getmsg',
    data: {
        token: $('meta[name="csrf-token"]').content()
    },
    dataType: 'json',
    success: function (data) {
        $("#msg").html(data.html);
    }
});

The reason it needs to be json is otherwise the request assumes the response is text/html. This means that it won't call JSON.parse() on the returned data, so you won't have an object that you can access properties from.

answered May 30, 2017 at 17:17

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

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

2 Comments

Muhammad Over a year ago

No luck :/ it does not load anything.

Waqas Altaf Over a year ago

Remove dataType from request. it will resolve as i was stuck in same problem but when i commented dataType than it console whole HTML.In controller use return view('form1_sections/section2_form');

Collectives™ on Stack Overflow

How to return views upon Ajax requests in Laravel

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related