bertvthul/simplexhr

Simple xhr requests for Laravel

dev-master 2022-09-08 12:03 UTC

Requires

• php: ^7.0|^8.0

MIT

• Bert van t Hul

• ajax
• request
• xhr

README

This package provides a way to make XHR requests simple for your Laravel app.

<span class="btn" data-simplexhr="Product.addToCart" data-values="{'id': 1}">Order</span>

In data-simplexhr in the example code, provide the controllername and the functionname to call. The data-values can be used to provide values in the request. When added to a form, all the values in the form are automatically send.

Installation

You can install the package via composer:

composer require bertvthul/simplexhr

Add the service provider to the providers array in config\app.php;

Bertvthul\Simplexhr\SimplexhrServiceProvider::class,

And make sure the js is loaded by adding the following to your app.js;

require('./../../vendor/bertvthul/simplexhr/src/js/simplexhr.js');

Usage

In your blade files add data-simplexhr="Controller.function" to an element that is clickable or to a form. You'll need to provide a controller and a function, separated by a dot.

<span class="btn" data-simplexhr="Product.addToCart" data-values="{'id': 1}">Order</span>

Use the data-values to send variables in the request.

You can also add it to a form:

<form data-simplexhr="Product.addToCart" onchange>
	<input type="text" name="count">
	<input type="hidden" name="object" value="1">
</form>

You can use hidden fields to provide extra data. The onchange means the form is submitted on any change. Remove onchange to only send the form on a submit.

In the function in your controller you could do the following;

public function addToCart(Request $request) 
{
    session(['Product.cart.'.$request->input('object') => $request->input('count')]);
    $response = [
    	'msg' => 'Item added to your cart!',
        'html' => [
            '#book-btn'     => view('product.bookbutton')->render(),
            '#cart-items'   => view('cart.items')->render(),
        ],
    ];
    
    return response()->json($response);
}

The html response is handled by the package. The keys are the html elements to replace, the values the content to replace them with. You can also use :append or :prepend on the keys:

'html' => [
    '#blog-items:append' => view('blog.items')->withItems($items)->render(),
],

You can return whatever you like. The script calls the js function xhrCustomCallback when it exists. You can handle the other json response, like a message to show after the response:

$.xhrCustomCallback = function(data) {
	if ('msg' in data) {
		$('#toast').find('.toast-body').html(data.msg);
		$('#toast').toast('show');
	}
}

Config

Publish the config to make local changes:

php artisan vendor:publish --provider=Bertvthul\Simplexhr\SimplexhrServiceProvider

The config has the following settings:

• middleware: default is "web"

License

The MIT License (MIT).