Ajax is passing the data in the URL and doesn't work

Question

i'm trying to pass some data with ajax but isn't working.

I do it before and it works i think it's something about cache.

I have this view:

@extends('cms.public.layouts.default')
@section('content')
<div class="col-md-10">
    <h3 style="letter-spacing:40px;text-align:center;color:f15d5e;">PROYECTOS</h3>
</div>

<div id="listall"> <!-- DIV TO LIST ALL THE PROJECTS START HERE -->
        <div class="col-md-2" style="padding:20px;">
          <button type="button" id="buttoncreate" class="btn btn-danger">Crear Proyecto</button>

        </div>
                      <table class="table">
                  <thead style="color:white">
                    <tr>
                      <th>Id</th>
                      <th>Slug</th>
                      <th>Order</th>
                      <th>Public</th>
                      <th>Fecha creación</th>
                      <th>Fecha ultima actualización</th>
                      <th><span class="glyphicon glyphicon-cog"></span></th>
                    </tr>
                  </thead>
                  <tbody style="color:white">
                  @foreach ($projects as $key => $project)
                    <tr>
                      <th>{{$project->id}}</th>
                      <td>{{$project->slug}}</td>
                      <td>{{$project->order}}</td>
                      <td>{{$project->public}}</td>
                      <td>{{ date('M j, Y', strtotime($project->created_at))}}</td>
                      <td>{{ date('M j, Y', strtotime($project->updated_at))}}</td>
                      <td><a href="{{ route('admin.projects.show', $project->id)}}" class="btn btn-info btn-sm">View</a> <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm">Edit</a>
                  @endforeach
                    </tr>
                  </tbody>
                </table>
  <br><br>
</div>  <!-- DIV TO LIST ALL THE PROJECTS END HERE -->

<div id="form1" style="display:none;" class="col-md-8"> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 START HERE-->
    <div>
    <h3>Crear nuevo proyecto</h3>
    </div>
    <div id="formcreateproject">
        <form  enctype="multipart/form-data" id="myForm" name="myForm">
         <input type="hidden" name="_token" value="{{ Session::token() }}">

          <div class="form-group">
            <label name="title">Slug:</label>
            <input type="text" id="slug" name="slug" placeholder="ejemplo-de-slug" class="form-control form-control-sm">
            <label name="order">Order:</label>
            <input type="number" id="order" name="order" class="form-control form-control-sm">
            <label name="public">Public:</label>
            <input type="number" id="public" name="public" class="form-control form-control-sm">
             <label name="body">Header</label>
            <input type="file" name="pathheader" id="pathheader"  class="form-control-file" aria-describedby="fileHelp"><br>
            <label name="body">Home</label>
            <input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp"><br>
            <input type="submit" value="Crear Proyecto" id="createprojectsubmit" class="btn btn-danger btn-md">
            <br><br><br>

          </div>
        </form>

      </div>
</div> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 END HERE-->

<div id="form2" style="display:none;" class="col-md-6"> 
  <div class="col-md-"> 
      <h3>Crear nueva traduccion</h3>
        <form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE -->
        <input type="hidden" name="_token" value="{{ Session::token() }}">
            <div class="form-group">
              <label name="Language">Language:</label>
              <input type="text" id="locale" name="locale" value="en" disabled class="form-control form-control-sm">
              <label name="Project">Project id:</label>
              <input type="number" id="project" name="project" class="form-control form-control-sm">
              <label name="Title">Title:</label>
              <input type="text" id="title" name="title" class="form-control form-control-sm">
              <label name="Caption">Caption:</label>
              <input type="text" id="caption" name="caption" class="form-control form-control-sm"><br>
              <input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md">
              <br><br><br>

            </div>
          </form> <!-- FIRST FORM TO TRANSLATE END HERE -->
          <form enctype="multipart/form-data" id="myFormTraduccion2" name="myFormTraduccion2"> <!--SECOND FORM TO TRANSLATE -->
           <input type="hidden" name="_token" value="{{ Session::token() }}">
            <div class="form-group">
              <label name="title">Language:</label>
              <input type="text" id="locale" name="locale" value="es" disabled class="form-control form-control-sm">
              <label name="order">Project id:</label>
              <input type="number" id="project" name="project" class="form-control form-control-sm">
              <label name="public">Title:</label>
              <input type="text" id="title" name="title" class="form-control form-control-sm">
              <label name="caption">Caption:</label>
              <input type="text" id="caption" name="caption" class="form-control form-control-sm"><br>
              <input type="submit" value="Crear Traduccion" id="createtranslatesubmit2" class="btn btn-danger btn-md">
              <br><br><br>

            </div>
          </form>  <!--SECOND FORM TO TRANSLATE END HERE -->
  </div>
</div>
@stop

Div with id="form" works.

When i try to create the translate don't give me any error, but don't work correctly. As you can see the submit button have id createtranslatesubmit and the id of the form is myFormTradducion. Here i put the ajax code:

//Javascript view /projects/menu.blade.php
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$(document).ready(function(){
    $("#buttoncreate").click(function(){
        $("#listall").hide();
        $("#form1").fadeIn(1000);

    });

    $("#createprojectsubmit").click(function(){
        $("#myForm").submit();
    });

    $("#myForm").submit(function(e){
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        $.ajax({
            url:'/admin/projects/postUpload',
            type:'POST',
            data: formData,
            success: function(){
                $("#form1").fadeOut(1000);
                $("#form2").fadeIn(1000);
                $("#form3").fadeIn(1000);

            },
            cache: false,
            contentType: false,
            processData: false
        });
        return false;
    });

    $("#createtranslatesubmit").click(function(){
        $("#myFormTraduccion").submit();
    });

    $("myFormTraduccion").submit(function(e){
        e.preventDefault();
        $.ajax({
            url:'/admin/projects/postUploadTranslation',
            type:'post',
            data:$('#myFormTraduccion').serializeArray(),
            success: function(){
                $("#form2").fadeOut(1000);
            }
        });
    });

});

Routes are this:

 //Proyectos
    Route::get('project/listall', ['uses' => 'AdminController@listAll', 'as' => 'admin.projects.listall']);
    Route::get('project/create', ['uses' => 'AdminController@createProject', 'as' => 'admin.projects.formupload']);
    Route::post('projects/postUpload', ['uses' => 'AdminController@storeProject', 'as' => 'admin.projects.store']);
    **Route::post('projects/postUploadTranslation', ['uses' => 'Web\ProjectsTranslationController@storeTranslation', 'as' => 'admin.projectstranslation.store']);**
    Route::get('project/{id}/edit', ['uses' => 'AdminController@editProject', 'as' => 'admin.project.edit']);
    Route::put('projects/{id}', ['uses' => 'AdminController@updateProject', 'as' => 'admin.project.update']);
    Route::delete('project/{id}', ['uses' => 'AdminController@destroyProject', 'as' => 'admin.projects.destroy']);
    Route::get('project/{id}/delete', ['uses' => 'AdminController@delete', 'as' => 'admin.projects.delete']);
    Route::get('project/{id}', ['uses' => 'AdminController@showProject', 'as' => 'admin.projects.show']);

Controller is in a folder called Web, controller looks like here:

use App\Models\ProjectTranslation;
class ProjectsTranslationController extends Controller
{
        public function storeTranslation(Request $request)
        {
        $projecttranslation = new ProjectTranslation();
        $projecttranslation->locale = $request->input("locale");
        $projecttranslation->project_id = $request->input("project");
        $projecttranslation->title = $request->input("title");
        $projecttranslation->caption = $request->input("caption");
        $projecttranslation->save();
        }
}

So when i click on submit with id createtranslatesubmit url change and looks like this:

http://test.loc/admin/projects?_token=ymzuWLO6I0nl7z5CQEriftjP1swWmH&project=40&title=1&caption=1

Know what's wrong?

If need more info, please ask it.

Thanks a lot

Answer 1

try to clear the cache by below command in your project folder

php artisan cache:clear

then try again

Answer 2

I think you forgot #

$("myFormTraduccion").submit(function(e){
    e.preventDefault();
    $.ajax({
        url:'/admin/projects/postUploadTranslation',
        type:'post',
        data:$('#myFormTraduccion').serializeArray(),
        success: function(){
            $("#form2").fadeOut(1000);
        }
    });
});

Updated code:

$("#myFormTraduccion").submit(function(e){
    e.preventDefault();
    $.ajax({
        url:'/admin/projects/postUploadTranslation',
        type:'post',
        data:$('#myFormTraduccion').serializeArray(),
        success: function(){
            $("#form2").fadeOut(1000);
        }
    });
});