CODEWITHSUNDEEP
phpajaxlaravel
user10748394
user10748394

Reputation:

how to show flash message with ajax request on view?

when i add text in summernote it saves in database and it reloads page. i want to show message on top after page refresh "Send Successfully". How i can add flash message with ajax request? I have posted my view ajax and controller code. how i get message on view??

view: 

 @if (Session::has('error'))
    <div class="alert alert-danger">
        {{ Session::get('error') }}
    </div>
@endif
@if (Session::has('success'))
    <div class="alert alert-success">
        {{ Session::get('success') }}
    </div>
@endif

<div class="row">
    <div class="col-xl-12 col-md-12 col-sm-12">
        <div class="card">
            <div class="card-header">

                <h4 class="card-title">Contact Driver</h4>
                @if($successmessage = Session::get('allsuccess'))
                    <div class="alert alert-success alert-block" style="width:300px;">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>{{ $successmessage }} </strong>
                    </div>

                @endif
            </div>

Ajax:

     $.ajax({
            url: "{{url('/add_contact_driver')}}",
            type: 'POST',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (response) {
                console.log('response', response)
                window.location.reload();
            }, error: function (error) {
                console.log('create article error', error);
            }
        });

Controller: 

     public function contactDriver(Request $request)
{

    $opn = $request->input('search_opn');
    $name = $request->input('search_name');
    $city = $request->input('search_city');
    $editor = $request->input('editor');
    $validation = Validator::make($request->all(), [
        'select_reason' => 'required'
    ]);
    if ($validation->fails()) {
        $response = (new ApiMessageController())->validatemessage($validation->errors()->first());
    } else {
        $contact = new ContactDriver();
        $contact->opn = $opn;
        $contact->name = $name;
        $contact->city = $city;
        $contact->text = $editor;
        $saveContact = $contact->save();

        if ($saveContact) {
            $response = (new ApiMessageController())->saveresponse("Send Successfully");
        } else {
            $response = (new ApiMessageController())->failedresponse(" Failed to send");
        }
    }
    return $response;

}

Upvotes: 1

Views: 9843

Answers (4)

Ketan Solanki
Ketan Solanki

Reputation: 11

There are 2 ways to do it.

1) In case if you want to reload the page then set Success Message from the Controller itself, Like this :

Session::flash('success', 'This is a message!');

Then access this success message in the view file, like this :

2) By Returning the message from the controller and just Displaying it with the help of Jquery(In the Success Function of Ajax).

$.ajax({
    url: "{{url('/add_contact_driver')}}",
    type: 'POST',
    data: formData,
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function (response) {
        console.log('response', response)
        //window.location.reload();
        $("#YOUR MESSAGE DIV").html(response.message);//Assuming the response object contains the Variable as message.
    }, error: function (error) {
        console.log('create article error', error);
    }
});

Upvotes: 1

Naveen K
Naveen K

Reputation: 889

What you can do is

    <div class="alert alert-danger" id="error-div" {{ Session::has('error') ? style="display:block" : style="display:none" }}>
        {{ Session::get('error') }}
    </div>

    <div class="alert alert-success" id="success-div" {{ Session::has('success') ? style="display:block" : style="display:none" }}>
        {{ Session::get('success') }}
    </div>

Set the response to the div like

            success: function (response) {
                console.log('response', response)
                $('#success-div').show();
                $('#success-div').html(response);
            }, error: function (error) {
                console.log('create article error', error);
                $('#error-div').show();
                $('#error-div').html
            }

Upvotes: 0

Sagar Gautam
Sagar Gautam

Reputation: 9369

You can return error/success message like this in controller

return response()->json(['status'=>'error','message'=>'Error Occured']);

or

return response()->json(['status'=>'error','message'=>'Succesfully Send']);

Now in your ajax code,

Append error message box on ajax call.

 $.ajax({
        url: "{{url('/add_contact_driver')}}",
        type: 'POST',
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function(result) {
              console.log(result);
              $('#message').html('');
              if(result.status=='success'){
                $('#message').append(
                  '<div class="alert alert-success alert-dismissable">'+
                    '<button type="button" class="close" data-dismiss="alert">'+
                        '<span aria-hidden="true">&times;</span>'+
                        '<span class="sr-only">Close</span>'+
                    '</button>'+
                    result.message+
                  '</div>'
                );
              }else{
                $('#message').append(
                  '<div class="alert alert-danger alert-dismissable">'+
                    '<button type="button" class="close" data-dismiss="alert">'+
                        '<span aria-hidden="true">&times;</span>'+
                        '<span class="sr-only">Close</span>'+
                    '</button>'+
                    result.message+
                  '</div>'
                );
              }
          },
          error: function(result){
              console.log(result);
              alert('Something went wrong');
          }
      });

Add following html where you want to display error,

<div id="message"></div>

I hope you will understand.

Upvotes: 0

Shibon
Shibon

Reputation: 1574

You can do like this

 success: function (response) {
            console.log('response', response);
            $(".alert-success").css("display", "block");
            $(".alert-success").append("<P>This is a message");
        }

<div class="alert alert-success" style="display:none">
    {{ Session::get('success') }}
</div>

Upvotes: 0

Related Questions