Ajax CRUD

Ajax CRUD

Add jQuery and Rails UJS

bower install jquery --save
bower install jquery-ujs --save

Add template for ajax requests

nano resources/views/layouts/ajax.blade.php

@yield('content')

Create basic modal partial

nano resources/views/shared/modal.blade.php

<div class="modal" id="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body"></div>
        </div>
    </div>
</div>

Add modal and app scripts to HTML layout

nano resources/views/layouts/html.blade.php

        ...
        @include('shared.modal')
        <script type="text/javascript" src='/js/3rd-party.js'></script>
        <script type="text/javascript" src='/js/app.js'></script>
    </body>
</html>

Service provider / Add remote variable in ajax views / Change the boot method

nano app/Providers/AppServiceProvider.php

...
use Illuminate\Support\ServiceProvider;
use Request;

class AppServiceProvider extends ServiceProvider
{

    public function boot()
    {
        view()->composer('*', function ($view) {
            $remote = Request::ajax() ? true : null;
            $layout = $remote ? 'layouts.ajax' : 'layouts.html';
            $view->with(compact('remote', 'layout'));
        });
    }
    ...

Set data-remote true in the New Article button

nano resources/views/articles/index.blade.php

    ...
    <h1>Articles</h1>
    {!! link_to_route('articles.create', 'New Article', null, [
        'class' => 'btn btn-primary btn-lg',
        'data-remote' => 'true' ]) !!}
    ...

Set data-remote dynamically for create article form

nano resources/views/articles/create.blade.php

{!! Form::open(['route' => 'articles.store', 'data-remote' => $remote]) !!}

Create a directory for JavaScript files

mkdir resources/assets/js

Create script to load the remote content

nano resources/assets/js/loadRemoteContent.js

$(document).on('ajax:success', '.btn[data-remote]', function(e, data, status, xhr) {

  var target = $('#modal');
  target.find('.modal-body').html(xhr.responseText);
  target.modal('show');

  target.on('ajax:success', 'form[data-remote]', function(e, data, status, xhr) {
    $('#content').html(xhr.responseText);
    target.modal('hide');
  });

  target.on('ajax:error', 'form[data-remote]', function(e, data, status, xhr) {
    target.find('#alert-box')
      .show()
      .find('ul')
      .html(toList(data.responseJSON));
  });

});

function toList(messages) {
  var converted = '';
  $.each(messages, function(key, value)
  {
    converted += '<li>' + value + '</li>';
  });
  return converted;
}

Add scripts in the gulpfile

nano gulpfile.js

...
elixir(function(mix) {
    ...
    mix.scriptsIn('', 'public/js/app.js');
});

Compile assets

gulp

Run the server

php artisan serve

Open forms in the browser to check the results

open http://localhost:8000/articles

Add Ajax CRUD to Git

git add .
git commit -m "Add ajax CRUD"

Next step: Send Email