Show popup message on ajax edit

Question

I want to know how can I show popup message after user changed field and updated data by AJAX?

here is my code:

public function UpdateorderbuyerByAjax(Request $request) 
{
    try {
        $id = $request->input('pk');
        $field = $request->input('name');
        $value = $request->input('value');

        $order = Order::findOrFail($id);
        $order->{$field} = $value;
        $order->save();
    } catch (Exception $e) {
        return response($e->getMessage(), 400);
    }

    return response('', 200);
}

PS: Using Laravel 5.

update

my full java script code, i need to show custom message to user only when he/she changed // buyer update part.

<script type="text/javascript">
$(function() {

  $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // buyer update
    $('.user').editable({
        source: [
            @foreach($users as $user)
                { value: '{{ $user->id }}', text: '{{ $user->name }}' }
                @unless ($loop->last)
                    ,
                @endunless
            @endforeach
        ]
    });

    // update status
    $(function() {
      $('.status').editable({
          source: [
              @foreach($orderstatuses as $status)
                  { value: '{{ $status->id }}', text: '{{ $status->title }}' }
                  @unless ($loop->last)
                      ,
                  @endunless
              @endforeach
          ]
      });
    });


    // transaction code
    product_id = $(this).data('pk');
    url = $(this).data('url');

    $('.transaction').editable({
      url: url,
      pk: product_id,
      type:"text",
      validate:function(value){
        if($.trim(value) === '')
        {
          return 'This field is required';
        }
      }
    });
});
</script>

UPDATE 2

my latest code

<script type="text/javascript">
$(function() {

  $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (response) {
          alert(
            'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam eius odio eum soluta atque voluptatibus ducimus, debitis corrupti! Enim pariatur voluptates, dolor doloremque dignissimos cum amet veritatis deleniti voluptatibus sunt!'
            );
        }
    });

    // buyer update
    $('.user').editable({
        source: [
            @foreach($users as $user)
                { value: '{{ $user->id }}', text: '{{ $user->name }}' }
                @unless ($loop->last)
                    ,
                @endunless
            @endforeach
        ]
    });

    // update status
    $(function() {
      $('.status').editable({
          source: [
              @foreach($orderstatuses as $status)
                  { value: '{{ $status->id }}', text: '{{ $status->title }}' }
                  @unless ($loop->last)
                      ,
                  @endunless
              @endforeach
          ]
      });
    });


    // transaction code
    product_id = $(this).data('pk');
    url = $(this).data('url');

    $('.transaction').editable({
      url: url,
      pk: product_id,
      type:"text",
      validate:function(value){
        if($.trim(value) === '')
        {
          return 'This field is required';
        }
      }
    });
});
</script>

Answer 1

For your needs you have to catch the response from your server. The way you do it realy depends on the way you make your ajax-call on the frontend (using jQuery, VueJS, Axios etc). Using jQuery something like this should do the trick:

$.ajax({
    method: "POST",
    url: "some.php",
    data: { pk: 456, name: "John", value: "Boston" },
    statusCode: {
      400: function() {
        alert( "error" );
      }
    }
}).done(function( msg ) {
    alert( "Status updated!" );
}).fail(function() {
    alert( "error" );
});

More about Jquery $.ajax.

If you use Laravel with Axios (which is preinstalled in Laravel 5.5), your ajax-call could look something like this:

axios.post('/your-url', {
    pk: 456,
    name: 'John',
    value: 'Boston'
}).then(function (response) {
    alert("Status updated!");
}).catch(function (error) {
    console.log(error);
});

More about axios.

Update

This is the code you should use:

// buyer update
$('.user').editable({
    source: [
        @foreach($users as $user)
            { value: '{{ $user->id }}', text: '{{ $user->name }}' }
            @unless ($loop->last)
                ,
            @endunless
        @endforeach
    ]
});

$.ajax({
    method: "POST",
    url: "/your-target-url",
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: JSON.stringify(source),
    statusCode: {
      400: function() {
        alert( "error" );
      }
    }
}).done(function( msg ) {
    alert( "Status updated!" );
}).fail(function() {
    alert( "error" );
});

Headers are now set directly in the ajax-call. JSON.stringify is neccessary to transform your data-array into an json-string (more to read here).

Now you can wrap your code in some event-fired-function (on click or something else).

Answer 2

jQuery had success and error method on AJAX. You can read more about it on here.

The following is to work on your code.

When users click the update_button you send ajax request to your_target_url with data and when ajax request is successful, you show the alert.

$('update_button').click(function() {
  $.ajax({
    url: your_target_url,
    data: 'data',
    success: function (response) {
      // show your alter on here
    }
  });
});