customize sweetalert2 outputting raw json

Question

I want to display a sweetalert message if registration is successful or fail (I wrote the sweetalert code in a jquery file) and included it inside the registration view page (it is included in the master.blade.php which all pages extend) but instead of displaying the sweetalert error or success message, it keeps displaying parsed json format message.

These are the files created.

custom_file.js

$(document).ready(function () {

    var form = $('#registration');

    form.submit(function (e) {
        e.preventDefault();

        $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: form.serialize(),
                dataType: "json"
            })
            .done(function (response) {
                if (response.success) {
                    swal({
                        title: "Hi " + response.name,
                        text: response.success,
                        timer: 5000,
                        showConfirmButton: false,
                        type: "success"
                    });

                    window.location.replace(response.url);

                } else {
                    swal("Oops!", response.errors, 'error');
                }
            })
            .fail(function () {
                swal("Fail!", "Cannot register now!", 'error');
            });
    });

the registraion.blade.php file

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">AJAX Register</div>
                    <div class="panel-body">
                        <form class="form-horizontal" id="registration" method="POST" action="{{ url('users/register') }}" data-parsley-validate="">
                            {!! csrf_field() !!}

                            <div class="form-group">
                                <label class="col-md-4 control-label">Name</label>

                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="name" id="name" required="">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">E-Mail Address</label>

                                <div class="col-md-6">
                                    <input type="email" class="form-control" name="email" id="email" required="">

                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">Password</label>

                                <div class="col-md-6">
                                    <input type="password" class="form-control" name="password" id="password" required="">

                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">Confirm Password</label>

                                <div class="col-md-6">
                                    <input type="password" class="form-control" name="password_confirmation" id="password_confirmation" data-parsley-equalto="#password" required="">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-6 col-md-offset-4">
                                    <button type="submit" class="btn btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="green">
                                        <i class="fa fa-btn fa-user"></i> Register
                                    </button>
                                    <a href="{!! asset('login/facebook') !!}"> <div class="btn btn-md btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="blue"> <i class="fa fa-facebook"></i> Login with Facebook </div></a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

and this is the RegisterController.php script

public function postRegister(Request $request)
    {

        $validator = Validator::make($request->all(), [
            'email' => 'required|email|unique:users,email',
            'name' => 'required|min:2',
            'password' => 'required|alphaNum|min:6|same:password_confirmation',
        ]);

        if ($validator->fails()) {
            $message = ['errors' => $validator->messages()->all()];
            $response = Response::json($message, 202);
        } else {

            // Create a new user

            $user = new User([
                'name' => $request->name,
                'email' => $request->email,
                'password' => $request->password,
                'facebook_id' => $request->email
            ]);
            $user->save();

            Auth::login($user);

            $message = ['success' => 'Thank you for joining us!', 'url' => '/', 'name' => $request->name];
            $response = Response::json($message, 200);
        }
        return $response;
    }

}

Answer 1

Here's some test code:

index.php

<!DOCTYPE html>
<html>
<head>
  <title>SweetAlert2 test</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">
</head>
<body>
  <form id="myForm" method="post" action="ajax.php">
    <input type="text" name="uname">
    <input type="submit" value="Submit">
  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
  <script>
    $(document).ready(function () {

      var form = $('#myForm');

      form.submit(function (e) {
        e.preventDefault();

        $.ajax({
            url: form.attr('action'),
            type: "POST",
            data: form.serialize(),
            dataType: "json"
          })
          .done(function (response) {
            if (response.data) {
              swal({
                title: "Message",
                text: response.data,
                timer: 5000,
                showConfirmButton: false,
                type: "success"
              })
              .then(function() {}, function() {
                // redirect after alert has been displayed
                window.location.replace("https://google.com");
              });
            } else {
              swal("Oops!", "Registration error!", 'error');
            }
          })
          .fail(function () {
            swal("Fail!", "Network/Server error!", 'error');
          });
      });
    });
  </script>
</body>
</html>

ajax.php

<?php
  $user = isset($_POST['uname']) ? $_POST['uname'] : "Anonymous";
  $myJson = ["data" => "Hi " . $user . "! Thank you for joining us!"];
  echo(json_encode($myJson));

This works fine! Compare it with your code to see if there's an error somewhere.