laravel-creative/jquery-actions

Turn jQuery into magic with php

v1.0 2020-03-24 07:58 UTC

Requires

• php: ^7.1
• illuminate/support: 5.1.* || 5.2.* || 5.3.* || 5.4.* || 5.5.*|| 5.6.* || 5.7.* || 6.* || 7.*
• jeremeamia/superclosure: ^2.0

Requires (Dev)

• orchestra/testbench: ^4.0
• phpunit/phpunit: ^8.0

MIT

• Mustafa Khaled

• laravel-creative
• jquery-actions

README

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:

composer require laravel-creative/jquery-actions

jQuery Actions

• onClick()
• on()
• static()
• jqueryForm()
• $options array

JqueryHelpers

• append()
• remove()
• hide()
• show()
• html()
• console()
• alerts()

requires

This package requires jquery and jquery-confirm you can install by cdn

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">           

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

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()

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.

<button {{JqueryAction::onClick(function($request){ echo 'Hello'; })}}>Say Hello</button>

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.

$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

    <button {{JqueryAction::onClick(null,[
    'url'=>route('name'),
    'method'=>'POST'
    ])}}>Say Hello</button>

• all methods work the same way as function and options

on()

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.

    <button {{JqueryAction::on('onmouseenter',null,[
    'url'=>route('name'),
    'method'=>'POST'
    ])}}>Say Hello</button>

with all onClick() magic too. you can use all html attributes on the first parameter

static()

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.

{{JqueryAction::static('#id','hover',null,[
    'url'=>route('name'),
    'method'=>'POST'
    ])}}

jqueryForm()

you can do the magic with forms too.
start your form tag

  {{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','<li>','New Post {data}','</li>'),
    'onLoadCallback'=>\LaravelCreative\JqueryAction\Helpers\JqueryHelper::jqueryAlert('Loading','Form Is Sending...'),
])}}

then add your fields and close the form

  {!! 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",'<p>','Success Status : {data.status}','</p>'), 
'jqueryErrorCallback'=>jqueryHelper::append("#status",'<p>','Error Status : {error.status}','</p>'), 
'onLoadCallback'=>jqueryHelper::append("#status",'<p>','Loading....','</p>'), 

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

$('#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 for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [e-mail] instead of using the issue tracker.

Credits

• Mustafa Khaled
• All Contributors

License

The MIT License (MIT). Please see License File for more information.