sideclick/bootstrap-modal-bundle

Bundle for Symfony 2.6+ that makes it easy to load pages into a Bootstrap modal window.

BootstrapModalBundle

Bundle for Symfony 2.6+ that makes it easy to load pages into a Bootstrap modal window. If a page loaded into a modal window contains a form, the form will submit via ajax., _(*1)

Version 0.* is compatible with symfony/symfony: ^2.6 | ^3.2, _(*2)

Version 1.* is compatible with symfony/framework-bundle: ^3.3 | ^4.0 | ^5.0, _(*3)

Installation

Step 1: Require the bundle using Composer

composer require sideclick/bootstrap-modal-bundle

Step 2: Enable the bundle

If you using Symfony 4 this step will be done automatically., _(*4)

Enable the bundle in the kernel:, _(*5)

``` php <?php // app/AppKernel.php, <sub>(*6)</sub>

public function registerBundles() { $bundles = array( // ... new Sideclick\BootstrapModalBundle\SideclickBootstrapModalBundle(), ); }, <sub>(*7)</sub>

### Step 3:
Include the JS file and the empty modal div just before your closing </body> tag on any page that you want to be able to open a modal window.

Check if sideclick-bootstrap-modal.js is added to your Bundles Assets folder. If not run please - php bin/console assets:install, <sub>(*8)</sub>

## Step 3 (Webpack Encore Alternative)
If you using Webpack Encore you can also import the the SideclickModal class in your global js file.

import SideclickModal from '../../public/bundles/sideclickbootstrapmodal/javascript/sideclick_modal';, <sub>(*9)</sub>

new SideclickModal();, <sub>(*10)</sub>

### Step 4:
This bundle relies on Bootstrap 3.x or Bootstrap 4.x & jQuery 1.x  You must include those two libraries on any page using this bundle.

## Usage
### Old way of usage (Deprecated)
To open a page in a modal you now simply prefix the href value of a URL with '#modal='.  For example:

Login, <sub>(*11)</sub>

This way is deprecated because it does not accommodate URL that already use hash values 

### New way of usage
To open a page in a modal you now simply add a data attribute - data-sideclick-modal-trigger and set href with the necessary URL .   For example:

Login, <sub>(*12)</sub>

This will cause the /login page to be loaded into the modal window instead of in the current tab.

## Optional: Suggested Structure of modal pages
The pages that you load into the modal window should follow the standard Bootstrap structure as described here http://getbootstrap.com/javascript/#modals

For quick reference here is the structure:

, <sub>(*13)</sub>

## Optional: Redirecting & Reloading
The JavaScript controlling the modal windows will respond to specific reload & redirect requests.  You may trigger a complete page reload or a redirect by loading a page into the modal window that is generated with a custom response from your controller.  An example of both is described below.

use Symfony\Bundle\FrameworkBundle\Controller\Controller; use Symfony\Component\HttpFoundation\Request;, <sub>(*15)</sub>

class DefaultController extends Controller { // implement the BootstrapModalBundle Controller Trait which will // bring three methods: redirectWithAjaxSupport(), reloadWithAjaxSupport() & redirectToRouteWithAjaxSupport() use \Sideclick\BootstrapModalBundle\Controller\ControllerTrait;, <sub>(*16)</sub>

public function thisActionWillRedirect(Request $request)
{
    return $this->redirectWithAjaxSupport($request, '/new/url')
}

public function thisActionWillReload(Request $request)
{
    return $this->reloadWithAjaxSupport($request)
}

public function thisActionWillReload(Request $request)
{
    return $this->redirectToRouteWithAjaxSupport($request,'route_name',['parameters'=>$parameters])
}

} ```, <sub>(*17)</sub>

If you are planning to use modals all over the place it is advisable to create a single 'base controller' from which all your other controllers extend., <sub>(*18)</sub>

And that's it!, <sub>(*19)</sub>