Asynchronous Ajax save from a modal with no page refresh Laravel 5.2

Question

Using Laravel 5.2.45

I have a database set up with a few tables, like "users", "categories" and "contacts".

An User can create a contact and attribute some category to it.

In the contacts table, I have this schema:

public function up()
    {
        Schema::create('contacts', function (Blueprint $table) 
        {
            $table->engine = 'InnoDB';

            $table->integer('id')->unsigned()->autoIncrement();
            $table->integer('user_id')->unsigned();            
            $table->string('image');
            $table->string('name');
            $table->string('lastname');
            $table->string('email', 191);
            $table->string('phone',191);
            $table->string('address');
            $table->string('description', 255);
            $table->integer('category_id')->unsigned()->nullable();

        });

        Schema::table('contacts', function (Blueprint $table)
        {
            $table->foreign('user_id')->references('id')->on('users');
            $table->foreign('category_id')->references('id')->on('categories');

        });
    }

Note there is a column that fetches the ID of the category you choose for your contact.

This is the schema for the categories table:

public function up()
    {
        Schema::create('categories', function (Blueprint $table) 
        {
            $table->engine = 'InnoDB';

            $table->integer('id')->unsigned()->autoIncrement();
            $table->string('category')->required()->unique()->index();
        });
    }

To enter the attributes in the contacts table, I have the following in the ContactsController controller:

public function create(CreateContactRequest $request)
    {
        $contact                = new Contact;            
        $contact-> name         = $request->get('name');
        $contact-> lastname     = $request->get('lastname');
        $contact-> email        = $request->get('email');
        $contact-> phone        = $request->get('phone');
        $contact-> address      = $request->get('address');
        $contact-> description  = $request->get('description');
        $contact-> user_id      = \Auth::user()->id;
        $contact-> category_id  = $request->get('category');
        // $contact-> category     = $request->get('category');

        // Checking if input has a file
        if ($request->hasFile('image')) 
        {            
            // It does, so set name to a random string with 10 chars
            $fileName = str_random(10);

            // Get the extension of the file (.jpg, .png...)
            $fileName .= '.' . $request->file('image')->getClientOriginalExtension();

            // Move the file to the storage
            $request->file('image')->move(storage_path('app/public/uploads'), $fileName);

            $contact->image = $fileName;
        }

        $contact->save();

        $contacts = App\Contact::where('user_id', \Auth::user()->id)->get();
        return redirect(route('contacts', compact('contacts')));
    }

In the end, you'll get redirected to the contacts view, where you'll simply see the contacts table with all columns.

The form to enter the contact is like this:

Contact Form
**Basically, inputs for the columns name, lastname, email, phone, address and description.** 


    
        
            
                 Contact Form 
            
            {!! Form::open(['route' => ['contacts.create'], 'method' => 'POST', 'enctype' => 'multipart/form-data']) !!}
                
                    
                        
                            
                                {!! Form::label('category', 'Choose Your Contact Category') !!}
                                
                                    
                                
                            
                        
                        
                            
                                Create Your Contact Category
                            

                            
                        
                    

                    
                        
                             
                                {!! Form::label('name', 'Name *') !!}
                                {!! Form::text('name', old('name'),['class'=>'form-control', 'placeholder' => 'Name of your contact']) !!}
                                @if($errors->has('name')) 
                                    Warning {{ $errors->first('name') }}
                                @endif
                            
                        
                        
                             
                                {!! Form::label('lastname', 'Lastname') !!}
                                {!! Form::text('lastname', old('lastname'),['class'=>'form-control', 'placeholder' => 'Lastname of your contact']) !!}                
                                @if($errors->has('lastname'))
                                    Warning {{ $errors->first('lastname') }}
                                @endif
                            
                        
                    

                    
                        
                            
                                {!! Form::label('email', 'E-Mail *') !!}
                                {!! Form::text('email', null,['class'=>'form-control', 'placeholder' => 'If your contact does not have one use contactName@email.com']) !!}
                                @if($errors->has('email'))
                                    Warning {{ $errors->first('email') }}
                                @endif
                            
                        
                        
                            
                                {!! Form::label('phone', 'Phone Number *') !!}
                                {!! Form::text('phone', null,['class'=>'form-control', 'placeholder' => 'If your contact does not have one, just insert three numbers at random']) !!}
                                @if($errors->has('phone'))
                                    Warning {{ $errors->first('phone') }}
                                @endif
                            
                        
                    

                    
                        
                            
                                {!! Form::label('address', 'Address') !!}
                                {!! Form::text('address', old('address'),['class'=>'form-control', 'placeholder' => 'Street name, number, neighborhood, city, state initials, country']) !!}
                            
                        
                        
                            
                                {!! Form::label('description', 'Description') !!}
                                {!! Form::text('description', old('description'),['class'=>'form-control', 'placeholder' => 'Something to describe your contact. Use a simple word, like family, work, friend and such']) !!}
                            
                        
                    
                    
                        
                            
                                {!! Form::label('image', 'Upload an image!') !!}
                                {!! Form::file('image')!!}
                            
                        
                                    
                    
                        
                            
                                 * = Required field (Can't be blank) 
                            
                        
                    
                
                
                    
                        {!! Form::button(' Submit Information', ['type' => 'submit', 'class' => 'btn btn-primary fa fa-plus-circle']) !!}
                    
                
            {!! Form::close() !!}

Please note that the category is inserted from a dropdown select tag, where the options are permeated using option tags.

If you need to create a new category for your contact, you press the Create Category button, which loads a modal with a form to create your category.

**Modal for category**


    
        
            
                
                
                    Create Category
                
            

            {!! Form::open(['route'=>['category.create'], 'method'=>'POST', 'class'=>'modalForm', 'id'=>'modalForm', 'name'=>'modalForm']) !!}
                
                    
                        
                            
                                {!! Form::label('category', 'Category') !!}
                                {!! Form::text('category', NULL, ['placeholder'=>'Category Name', 'class'=>'form-control']) !!}
                            
                        
                    
                
                
                    {!! Form::button('Close', ['type' => 'button', 'class' => 'btn btn-default', 'data-dismiss'=>'modal']) !!}
                    {!! Form::submit('Save Category', ['type' => 'submit', 'class' => 'btn btn-primary modalSave', 'name' => 'modalSave', 'id' => 'modalSave']) !!}
                
            {!! Form::close() !!}

When you insert the category name and click the Save Category button, the form will go through the route setup as:

Route::post('category/create', [
    'as'=>'category.create', 'uses'=>'CategoryController@create', 'redirects'=>'phonebook', 'with'=>'input'
]);

The route calls the parameters at the CategoryController's method create, which is:

public function create(CreateCategoryRequest $request)
    {
        $category           = new Category;
        $category->category = $request->get('category');

        $category->save();

        return redirect('phonebook');
    }

Everything so far is working fine, no errors are thrown.

The contact is inserted in the right table with the right inputs, even with the category id, which, by the way, is created in the categories table without any problem as well.

But the thing is, I want to create the category from the modal, but WITHOUT refreshing the page, because let's imagine an user is creating the contact, permeating all input fields and letting the category select for last.

And imagine this user has to create the category for his contact. He'll pop up the modal, input something and click the send button, which will redirect him to the form, but WITHOUT all of his inputs.

Note that in the route for the category creation, I tried to pass the parameter to keep the inputs, but it didn't happened.

MAYBE IMPORTANT

My view is set up using the @include syntax provided by Laravel, so it looks like this

INSERT CONTACT VIEW

phonebook.blade.php



    
        

        
        
        
        
        
        
        

        
        
        
        
        

         
            Phonebook - Add a new contact
        
    

            
        @include('partials.header')

        @if(Auth::check())
            


            @include('partials.contactForm')
        @else
            @include('partials.info')
        @endif

The partials.contactForm partial is where the form to input the contact info and the modal bit are located.

SO I tried AJAX, and, being new to this, I couldn't work something.

Also, note that I have jquery-2.2.1 in a minified file.

These are my tries, which, by the way, are in a separate .js file (modalSaver.js) from the view:

**function 1**

var $form = $("#demo-default-modal");

$form.submit(function(e)
{
    $.ajax({
        method: 'POST',
        url: 'category.create',
        data: $form.serialize(),
    });
    e.preventDefault();
});




**function 2**

var form = 'demo-default-modal';

$("form").submit(function(e)
{
    e.preventDefault()
    {
        $.ajax({
            method: 'POST',
            url: 'category.create',
            data: $form.serialize(),
        });
    }
});



**function 3**

$('form.modalForm').submit(function(event)
{
    event.preventDefault();
    $.post($(this).attr("action"),
    $(this).serialize(),
    function(info)
    {
        $("#result").html(info);
    });
});

As stated before, none of these functions seemed to work.

Here is my question, finally (sorry for the long post, but I tried to be really meticulous about it):

How to make an AJAX function to save the category in my database, in the categories table, show the category I just inserted listed in the dropdown select tag list, located in the form, and do all of this without refreshing the page, but simply hiding the modal?

Thanks in advance.

bhill77 · Accepted Answer

change the create category controller to return $category instead return redirect.

than change your ajax script to this

$('#modalForm').submit(function(e) {
  e.preventDefault();
  var $form = $(this);

  // get url from action attribute
  var $url = $(this).attr('action');

  $.ajax({
      method: 'POST',
      url: $url,
      data: $form.serialize(),
    })
    .done(function(res) {
      // make new option based on ajax response
      var option = '';

      // append option to catogory select
      $('#category').append(option);
    });
})

Asynchronous Ajax save from a modal with no page refresh Laravel 5.2

Answers (1)

Related Questions