Configure sweetalert2 outputting raw json

JSON format for displaying messages I want to show sweetalert message if registration succeeds or fails (I wrote sweetalert code in jquery file) and included it in registration view page (it is included in master.blade.php which propagates to all pages) but displaying instead sweetness message or success message, it keeps displaying parsed json message.

These are the generated files.

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');
            });
    });

      

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;
    }

}

      

+3


source to share


1 answer


Here are some test codes:

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));

      

It's fine! Compare it to your code to see if there is a bug somewhere.

0


source







All Articles