PHP Classes

Modals, alerts and confirmation dialogs for Jaxon: Display Ajax modal, alert and confirmation dialogs

Recommend this page to a friend!
  Info   View files Documentation   View files View files (45)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 180 All time: 8,714 This week: 571Up
Version License PHP version Categories
jaxon-dialogs 1.2.1BSD License5PHP 5, Tools, Libraries, AJAX
Description 

Author

This packages can display modal, alert and confirmation dialogs in Jaxon-based PHP applications using various Javascript libraries.

The javascript library to be used for each type of dialogs (modal, alert or confirmation) is chosen by configuration. The package then loads the corresponding .js and .css files from a custom CDN or from a user-specified location.

The package provides a single API no matter the javascript library, making it easy to switch from one library to another, and to reuse PHP code.

16 Javascript libraries are currently supported.

Picture of Thierry Feuzeu
  Performance   Level  
Name: Thierry Feuzeu <contact>
Classes: 13 packages by
Country: Cameroon Cameroon
Age: 47
All time rank: 21801 in Cameroon Cameroon
Week rank: 106 Up1 in Cameroon Cameroon Equal
Innovation award
Innovation award
Nominee: 1x

Documentation

Dialogs for Jaxon

Modals, alerts and confirmation dialogs for Jaxon with various javascript libraries.

Features

This package provides modal, alert and confirmation dialogs to Jaxon applications with various javascript libraries. 16 libraries are currently supported.

The javascript library to use for each function is chosen by configuration, and the package takes care of loading the library files into the page and generating the javascript code.

The URL and version number can be set individually for each javascript library.

Installation

Add the following lines in the composer.json file, and run the composer update command.

"require": {
    "jaxon-php/jaxon-core": "~2.0",
    "jaxon-php/jaxon-dialogs": "~1.0"
}

Configuration

This package defines 3 config options in the default section to set the default library to be used resp. for modal, alert and confirmation dialogs. The libraries option allows to load additional libraries into the page. The confirm section defines options for the confirm dialog. The lib.uri option defines the URI where to download the libraries files from.

Specific options can also be set for each library.

    'dialogs' => array(
        'default' => array(
            'modal' => 'bootstrap',  // Default library for modal dialogs
            'alert' => 'jconfirm',   // Default library for alerts
            'confirm' => 'noty',     // Default library for confirmation
        ),
        'libraries' => array('pgwjs', 'toastr'), // Additional libraries
        'lib' => array(
            'uri' => 'https://cdn.jaxon-php.org/libs',
        ),
        // Confirm options
        'confirm' => array(
            'title' => 'Question',   // The confirm dialog
            'yes' => 'Oh Yes',       // The text of the Yes button
            'no' => 'No way',        // The text of the No button
        ),
        // Options for the Toastr library
        'toastr' => array(
            'options' => array(
                'closeButton' => true,
                'positionClass' => 'toast-top-center'
            ),
        ),
        // Load a different version of the JQuery Confirm library from a different CDN
        'jconfirm' => array(
            'uri' => 'https://cdnjs.cloudflare.com/ajax/libs',
            'subdir' => 'jquery-confirm',
            'version' => '3.3.2',
        ),
    ),

Usage

Modal dialogs

This plugin provides functions to show and hide modal dialogs, with a title, a content and zero or more buttons.

/
 * Show a modal dialog.
 */
public function show($title, $content, array $buttons, array $options = array());

/
 * Hide the modal dialog.
 */
public function hide();

The parameters of the show() methods are described as follow:

  • `$title`: is a one line text to be printed at the top of the dialog.
  • `$content`: the HTML content of the dialog.
  • `$buttons`: a list of buttons to be printed in the dialog. Each button is an array with the following entries: - `title`: the text to be printed in the button. - `class`: the CSS class or classes to be applied on the button. - `click`: the javascript code to be executed on a click on this button. It can be defined using the Request Factory, or it can be set to `close` to close the dialog.
  • `$options`: an array of config options that are specific to the javascript library in use.

Example.

    public function showDialog()
    {
        // The dialog buttons
        $buttons = array(
            array(
                'title' => 'Close',
                'class' => 'btn',
                'click' => 'close'
            )
        );
        // The HTML content of the dialog
        $content = "This modal dialog depends on application settings!!";
        // The dialog specific options
        $options = array('width' => 500);
        // Show the dialog
        $this->response->dialog->show("Modal Dialog", $content, $buttons, $options);

        return $this->response;
    }

Alerts or notifications

This plugin provides functions to show 4 different types of alerts or notification messages.

/
 * Print a success message.
 */
public function success($message, $title = null);

/
 * Print an information message.
 */
public function info($message, $title = null);

/
 * Print a warning message.
 */
public function warning($message, $title = null);

/
 * Print an error message.
 */
public function error($message, $title = null);

Example.

    public function save($formValues)
    {
        if(!$this->validator->valid($formValues))
        {
            $this->response->dialog->error("Invalid input", "Error");
            return $this->response;
        }
        $this->repository->save($formValues);
        $this->response->dialog->success("Data saved!", "Success");
        return $this->response;
    }

Confirmation question

The confirm() function adds a confirmation question to a Jaxon request, which will then be called only if the user answers yes to the given question.

/
 * Add a confirmation question to the request
 */
public function confirm($question, ...);

The first parameter, which is mandatory, is the question to ask.

The next parameters are optional; they allow the insertion of content from the web page in the confirmation question, using Jaxon or jQuery selectors and positional placeholders. They are specially useful when pieces of information from the web page need to be inserted in translated strings.

In the example below, the user has to choose a color, and the selected color is inserted in the confirmation question.

Example with Jaxon selector.

<select class="form-control" id="colorselect" name="colorselect" onchange="<?php
    echo rq()->call('HelloWorld.setColor', rq()->select('colorselect'))
        ->confirm('Set color to {1}?', rq()->select('colorselect')) ?>; return false;">
    <option value="black" selected="selected">Black</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

Example with jQuery selector.

<select class="form-control" id="colorselect" name="colorselect" onchange="<?php
    echo rq()->call('HelloWorld.setColor', jq('#colorselect')->val())
        ->confirm('Set color to {1}?', jq('#colorselect')->val()) ?>; return false;">
    <option value="black" selected="selected">Black</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

Supported libraries

This package currently supports 16 javascript libraries, each implementing one or more interfaces.

Bootstrap Dialog: https://nakupanda.github.io/bootstrap3-dialog

  • Dialog id: bootstrap
  • Implements: Modal, Alert, Confirm
  • Versions: 1.35.3

Bootbox: http://bootboxjs.com

  • Dialog id: bootbox
  • Implements: Modal, Alert, Confirm
  • Versions: 4.3.0

jAlert: http://flwebsites.biz/jAlert/

  • Dialog id: jalert
  • Implements: Alert, Confirm
  • Versions: 4.5.1

PgwJS: http://pgwjs.com/pgwmodal/

  • Dialog id: pgwjs
  • Implements: Modal
  • Versions: 2.0.0

Toastr: https://codeseven.github.io/toastr/

  • Dialog id: toastr
  • Implements: Alert
  • Versions: 2.1.3

Tingle: http://robinparisi.github.io/tingle/

  • Dialog id: tingle
  • Implements: Modal
  • Versions: 0.8.4

Simply Toast: https://github.com/ericprieto/simply-toast

  • Dialog id: simply
  • Implements: Alert
  • Versions:

Noty: http://ned.im/noty/

  • Dialog id: noty
  • Implements: Alert, Confirm
  • Versions: 2.3.11

Notify: https://notifyjs.com

  • Dialog id: notify
  • Implements: Alert
  • Versions: 0.4.2

Lobibox: http://lobianijs.com/site/lobibox

  • Dialog id: lobibox
  • Implements: Modal, Alert, Confirm
  • Versions: 1.2.4

Overhang: http://paulkr.github.io/overhang.js/ (requires jQuery and jQuery UI)

  • Dialog id: overhang
  • Implements: Alert, Confirm
  • Versions:

PNotify: http://sciactive.com/pnotify/ (requires jQuery and jQuery UI)

  • Dialog id: pnotify
  • Implements: Alert, Confirm
  • Versions: 3.0.0

Sweet Alert: http://t4t5.github.io/sweetalert/

  • Dialog id: sweetalert
  • Implements: Alert, Confirm
  • Versions: 1.1.1

JQuery-Confirm: https://craftpip.github.io/jquery-confirm/

  • Dialog id: jconfirm
  • Implements: Modal, Alert, Confirm
  • Versions: 3.0.1, 3.3.0, 3.3.1, 3.3.2

IziToast: http://izitoast.marcelodolce.com

  • Dialog id: izi.toast
  • Implements: Alert, Confirm
  • Versions: 1.1.1

YmzBox: https://github.com/returnphp/ymzbox

  • Dialog id: ymzbox
  • Implements: Alert, Confirm
  • Versions:

Adding a new library

In order to add a new javascript library to the Dialogs plugin, a new class needs to be defined and registered.

The class must inherit from Jaxon\Dialogs\Libraries\Library, and implement a few functions and interfaces. Starting from release 1.1.0, its constructor takes the default subdir and version number as parameters.

Functions

These optional functions can be defined in the class.

    /
     * Get the javascript header code and file includes
     *
     * @return string
     */
    public function getJs(){}

    /
     * Get the CSS header code and file includes
     *
     * @return string
     */
    public function getCss(){}

    /
     * Get the javascript code to be printed into the page
     *
     * @return string
     */
    public function getScript(){}

The getJs() and getCss() methods return the HTML header code for loading javascript and CSS files of the library. The getScript() method returns the javascript code to be executed after the page is loaded to initialize the library.

Interfaces

Depending on the javascript library features, the class must implement one or more of the following three interfaces.

namespace Jaxon\Dialogs\Interfaces;

Interface Modal
{
    /
     * Show a modal dialog.
     */
    public function show($title, $content, array $buttons, array $options = array());

    /
     * Hide the modal dialog.
     */
    public function hide();
}

namespace Jaxon\Request\Interfaces;

Interface Alert
{
    /
     * Print a success message.
     */
    public function success($message, $title = null);

    /
     * Print an information message.
     */
    public function info($message, $title = null);

    /
     * Print a warning message.
     */
    public function warning($message, $title = null);

    /
     * Print an error message.
     */
    public function error($message, $title = null);
}

namespace Jaxon\Request\Interfaces;

interface Confirm
{
    /
     * Return a script which makes a call only if the user answers yes to the given question
     */
    public function confirm($question, $yesScript, $noScript);
}

Config options

The getOption($sName) method provided by the Jaxon\Dialogs\Libraries\Library class returns the value of a config option of the library. The parameter $sName is the name of the option without the dialogs.<library_name> prefix.

In the example below, a call to $this->getOption('options.position') will return the value center.

Registration

After it is defined, the library class needs to be configured and registered before it can be used in the application.

First, declare the class in the Dialogs plugin configuration.

    'dialogs' => array(
        'default' => array(
            'modal' => 'myplugin',   // Default library for modal dialogs
            'alert' => 'myplugin',   // Default library for alerts
            'confirm' => 'myplugin', // Default library for confirmation
        ),
        'classes' => array(
            'myplugin' => \Path\To\My\Plugin::class,
        ),
        'myplugin' => array(         // Plugin config options
            'options' => array(
               'position' => 'center',
            ),
        ),
    ),

If you are not using Armada or a framework integration package, make sure to register the classes, after the configuration options are set.

$jaxon->plugin('dialog')->registerClasses();

Contribute

  • Issue Tracker: github.com/jaxon-php/jaxon-dialogs/issues
  • Source Code: github.com/jaxon-php/jaxon-dialogs

License

The package is licensed under the BSD license.


  Files folder image Files  
File Role Description
Files folder imagesrc (2 files, 2 directories)
Files folder imagetemplates (16 directories)
Accessible without login Plain text file .styleci.yml Data Auxiliary data
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  src  
File Role Description
Files folder imageInterfaces (2 files)
Files folder imageLibraries (1 file, 16 directories)
  Accessible without login Plain text file Dialog.php Class Class source
  Accessible without login Plain text file start.php Example Example script

  Files folder image Files  /  src  /  Interfaces  
File Role Description
  Accessible without login Plain text file Modal.php Class Class source
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  
File Role Description
Files folder imageBootbox (1 file)
Files folder imageBootstrap (1 file)
Files folder imageIzi (2 files)
Files folder imageJAlert (1 file)
Files folder imageJQueryConfirm (1 file)
Files folder imageLobibox (1 file)
Files folder imageNotify (1 file)
Files folder imageNoty (1 file)
Files folder imageOverhang (1 file)
Files folder imagePgwJS (1 file)
Files folder imagePNotify (1 file)
Files folder imageSimplyToast (1 file)
Files folder imageSweetAlert (1 file)
Files folder imageTingle (1 file)
Files folder imageToastr (1 file)
Files folder imageYmzBox (1 file)
  Accessible without login Plain text file Library.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  Bootbox  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  Bootstrap  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  Izi  
File Role Description
  Accessible without login Plain text file Modal.php Class Class source
  Accessible without login Plain text file Toast.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  JAlert  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  JQueryConfirm  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  Lobibox  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  Notify  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  Noty  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  Overhang  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  PgwJS  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  PNotify  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  SimplyToast  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  SweetAlert  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  Tingle  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  Toastr  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  src  /  Libraries  /  YmzBox  
File Role Description
  Accessible without login Plain text file Plugin.php Class Class source

  Files folder image Files  /  templates  
File Role Description
Files folder imagebootbox (2 files)
Files folder imagebootstrap (1 file)
Files folder imageizi (2 files)
Files folder imagejalert (1 file)
Files folder imagejqueryconfirm (1 file)
Files folder imagelobibox (1 file)
Files folder imagenotify (1 file)
Files folder imagenoty (1 file)
Files folder imageoverhang (1 file)
Files folder imagepgwjs (2 files)
Files folder imagepnotify (1 file)
Files folder imagesimplytoast (1 file)
Files folder imagesweetalert (1 file)
Files folder imagetingle (1 file)
Files folder imagetoastr (1 file)
Files folder imageymzbox (1 file)

  Files folder image Files  /  templates  /  bootbox  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data
  Accessible without login HTML file dialog.html Doc. Documentation

  Files folder image Files  /  templates  /  bootstrap  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  izi  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data
  Accessible without login Plain text file modal.js Data Auxiliary data

  Files folder image Files  /  templates  /  jalert  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  jqueryconfirm  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  lobibox  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  notify  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  noty  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  overhang  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  pgwjs  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data
  Accessible without login HTML file dialog.html Doc. Documentation

  Files folder image Files  /  templates  /  pnotify  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  simplytoast  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  sweetalert  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  tingle  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  toastr  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

  Files folder image Files  /  templates  /  ymzbox  
File Role Description
  Accessible without login Plain text file alert.js Data Auxiliary data

Downloadjaxon-dialogs-2018-02-28.zip 45KB
Downloadjaxon-dialogs-2018-02-28.tar.gz 19KB
Install with ComposerInstall with Composer
Needed packages  
Class DownloadWhy it is needed Dependency
Jaxon Download .zip .tar.gz Uses the provided features Required
 Version Control Unique User Downloads Download Rankings  
 100%
Total:180
This week:0
All time:8,714
This week:571Up