https://github.com/mustafakhaleddev/jquery-actions
https://github.com/mustafakhaleddev/jquery-actions
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mustafakhaleddev/jquery-actions
- Owner: mustafakhaleddev
- License: mit
- Created: 2020-03-18T21:06:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-24T07:59:18.000Z (over 6 years ago)
- Last Synced: 2025-01-26T18:47:49.634Z (over 1 year ago)
- Language: PHP
- Size: 23.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Turn jQuery into magic with php
[](https://packagist.org/packages/laravel-creative/jquery-actions)
[](https://travis-ci.org/laravel-creative/jquery-actions)
[](https://scrutinizer-ci.com/g/laravel-creative/jquery-actions)
[](https://packagist.org/packages/laravel-creative/jquery-actions)
Tired of jquery ajax ? and laravel blades , now all of those things has been turned into magic , with this creative package you can do all ajax stuff without writing any javascript code.
also if you want to write fast laravel function without routes or controllers you can do it , i told u its magic :)
## Installation
You can install the package via composer:
```bash
composer require laravel-creative/jquery-actions
```
[jQuery Actions](#usage)
* [onClick()](#usage)
* [on()](#on)
* [static()](#static)
* [jqueryForm()](#form)
* [$options array](#options)
[JqueryHelpers](#jqueryhelpers)
* [append()](#append)
* [remove()](#remove)
* [hide()](#hide)
* [show()](#show)
* [html()](#html)
* [console()](#console)
* [alerts()](#alerts)
## requires
This package requires ``jquery
and jquery-confirm``
you can install by cdn
```html
```
## Usage
### jQuery Actions
Jquery actions is static class with ``facades`` you can use it on ``laravel blades`` to do the magic.
all functions are based on jquery ajax and secured hashed urls , of course you can use your own ``routes``
#### onClick()
```php
JqueryAction::onClick($function, $options = [])
```
when you use this function in blades like this and don`t forget to add ``@jqueryScripts`` blade directive in the end of your file after jquery scripts.
```php
Say Hello
```
when the user click the ``Say Hello`` button , an ajax request will go to secured hashed url and the response will be ``Hello``
* Ok Great , but i want to run the function from controller ?
Then you have to mention the controller and the actions like this.
```
Say Hello
```
* that`s awesome, but i want to use custom url
then you can use ``$options`` array to make the magic.
```php
$options = [
'url'=>null, //Ajax Request Url
'method'=>'POST', //Ajax Request Method
'onetime'=>false, //Allow One Time Request to this secured url, only work with built in urls.
'jquerySuccessCallback'=>null, //The callback when success response, you can write jquery codes here and use the data as response, or use JqueryHelpers
'jqueryErrorCallback'=>null, //The callback when error response, you can write jquery codes here and use the data as response, or use JqueryHelpers
'onLoadCallback'=>null, // The javascript call back when function started
'expires'=>20 //Function Expires after 20 second , only work with built in urls.
];
```
so for custom urls your code would be like this
```html
route('name'),
'method'=>'POST'
])}}>Say Hello
```
* all methods work the same way as function and options
#### on()
```php
JqueryAction::on($attribute,$function,$options=[])
```
in javascript you can use ``$('#id').on('onmouseenter',function(e){})`` to run a method when mouse enter div with id ``#id``
you can use the same with this package.
```html
route('name'),
'method'=>'POST'
])}}>Say Hello
```
with all ``onClick()`` magic too. you can use all html attributes on the first parameter
#### static()
```php
JqueryAction::static($selector,$method,$function,$options=[])
```
You can make your own static javascript function without inline tag method,
in javascript you can use ``$('#id').on('hover',function(e){})`` to run a method when mouse hover a div with id ``#id``
you can use the same with this method. its ajax too.
```html
{{JqueryAction::static('#id','hover',null,[
'url'=>route('name'),
'method'=>'POST'
])}}
```
#### jqueryForm()
you can do the magic with forms too.
start your form tag
```html
{{JqueryAction::jqueryForm(function (\Illuminate\Http\Request $request){
$post=new \App\Post();
$post->text=$request->text;
$post->user_id=$request->user()->id;
$post->save();
return $post->text;
},[
'onetime'=>false,
'expires'=>1200,
'jquerySuccessCallback'=>\LaravelCreative\JqueryAction\Helpers\JqueryHelper::append('#posts','
'onLoadCallback'=>\LaravelCreative\JqueryAction\Helpers\JqueryHelper::jqueryAlert('Loading','Form Is Sending...'),
])}}
```
then add your fields and close the form
```html
{!! JqueryAction::closeForm() !!}
```
### JqueryHelpers
You saw those keys in ``$options`` array above
```
'jquerySuccessCallback'=>null, //The callback when success response, you can write jquery codes here and use the data as response, or use JqueryHelpers
'jqueryErrorCallback'=>null, //The callback when error response, you can write jquery codes here and use the data as response, or use JqueryHelpers
'onLoadCallback'=>null,
```
how can you use them.
1- you can use pure javascript or jquery functions as `text` instead of `null` to control the ajax response.
```
'jquerySuccessCallback'=>'alert("success :"+ data)',
'jqueryErrorCallback'=>'console.log(error.status)',
'onLoadCallback'=>'alert("loading..")',
```
2-or you can use our ``jqueryHelper`` functions.
#### append($selector, $openTag, $msg, $closedTag)
uses jquery ``append`` function
```
'jquerySuccessCallback'=>jqueryHelper::append("#status",'
','Success Status : {data.status}','
'),'jqueryErrorCallback'=>jqueryHelper::append("#status",'
','Error Status : {error.status}','
'),'onLoadCallback'=>jqueryHelper::append("#status",'
','Loading....','
'),```
you can use ``{data}`` to access javascript data object ``{data.msg}``
#### remove($selector)
uses jquery ``remove`` method to remove element
```
'jquerySuccessCallback'=>jqueryHelper::remove("#loading"),
```
#### hide($selector)
```
'jquerySuccessCallback'=>jqueryHelper::hide("#loading"),
```
#### show($selector)
```
'onLoadCallback'=>jqueryHelper::show("#loading"),
```
#### html($selector,$msg)
change element html
```
'jquerySuccessCallback'=>jqueryHelper::html("#msg",'Success'),
```
#### console($msg)
write to the console
```
'jquerySuccessCallback'=>jqueryHelper::console('{data.users}'),
```
#### static function function($selector, $function, $msg)
this would print `` $('$selector').$function('$msg');"; ``
for example i want to change html of div when success.
```
'jquerySuccessCallback'=>jqueryHelper::function('#text','html','{data.text}'),
```
so the result would be
```javascript
$('#text').html(data.text);
```
#### jqueryAlert($title, $msg)
we uses ``jquery confirm`` alerts to display alerts messages.
```
'jqueryErrorCallback'=>jqueryHelper::jqueryAlert("Error !","cant reach : {error}"),
```
### Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
### Security
If you discover any security related issues, please email mustafakhaled.dev@gmail.com instead of using the issue tracker.
## Credits
- [Mustafa Khaled](https://github.com/laravel-creative)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.