data-* attributes not recognized?

[Johannes la Poutre]

In the example the destroy/delete link has the data-method=DELETE attribute and data-confirm attribute set. Apparently these are not used when embedding the gridview in a plain blade template.

Is this as intended and do I need to add the relevant Javascript from somewhere else or did I miss a requirement in my composer.json?

[Atanas Ginev]

Yes you should handle this at your own. Why? Because you could use confirm(...), Boostrap modal or whatever you want to ensure the user action. In fact this is just an example and has an error on it.

$grid = new \Datagrid($orders, $request->input('f'));

// Add some columns to datagrid
$grid
    // Some other columns goes here
    ->setActionColumn([
        'wrapper' => function ($value, $row) {
            return '<a href="' . action('OrderController@edit', $row->id) . '" class="btn btn-sm btn-success btn-edit" title="' . trans('general.edit') . '"><i class="fa fa-pencil"></i></a>
		    <a href="' . action('OrderController@destroy', $row->id) . '" data-method="DELETE" class="btn btn-sm btn-danger" title="' . trans('general.delete') . '" data-confirm="' . trans('order.confirm_delete') . '"><i class="fa fa-remove"></i></a>';
        },
    ]);

Note the action('OrderController@destroy', $row->id).

To be able to handle delete links you could use something similar to this:

(function () {

	var Restful = {
		initialize: function () {
			this.methodLinks = $('a[data-method]');

			this.registerEvents();
		},
		registerEvents: function () {
			//this.methodLinks.on('click', this.handleMethod);
			$('body').on('click', 'a[data-method]', this.handleMethod);
		},
		handleMethod: function (e) {
			var link = $(this);
			var httpMethod = link.data('method').toUpperCase();
			var form;

			// If the data-method attribute is not PUT or DELETE,
			// then we don't know what to do. Just ignore.
			if ($.inArray(httpMethod, ['PUT', 'DELETE']) === -1) {
				return;
			}

			// Allow user to optionally provide data-confirm="Are you sure?"
			if (link.data('confirm')) {
				// Set default message
				var message = 'Are you sure?';

				if (link.data('confirm').length > 0) {
					message = link.data('confirm');
				}

				// Set alert message
				$('#modal-confirm .modal-body').html(message);

				// Display alert modal
				$('#modal-confirm').modal();

				// Submit the form only if the Yes button is clicked
				$('#modal-confirm [data-confirm="yes"]').on('click', function() {
					form = Restful.createForm(link);
					form.submit();
				});
			} else {
				form = Restful.createForm(link);
				form.submit();
			}

			e.preventDefault();
		},
		verifyConfirm: function (link) {
			return confirm(link.data('confirm'));
		},
		createForm: function (link) {
			$('.restful-form').remove();

			var form =
				$('<form>', {
					'method': 'POST',
					'action': link.attr('href')
				}).addClass('restful-form');

			var token =
				$('<input>', {
					'type': 'hidden',
					'name': '_token',
					'value': Laravel._token
				});

			var hiddenInput =
				$('<input>', {
					'name': '_method',
					'type': 'hidden',
					'value': link.data('method')
				});

			return form.append(token, hiddenInput)
				.appendTo('body');
		}
	};

	Restful.initialize();

})();

In this case the JavaScript code depends on jQuery and Boostrap Modal. Note the Laravel._token as well. You should provide the Laravel's CSRF token as well. In that case I have following code at the beginning of all my script at the footer:

<script>
      var Laravel = Laravel || {};

      Laravel._token = '{!! csrf_token() !!}';
</script>
<!-- All you other scripts goes here... -->