Post with Ajax and Bootstrap Modal

I am using code.jquery.com/jquery-3.5.0.js in my application, and trying to post data without reload. It posts fine without ajax, but not with ajax script. Controllers:

 public function index()
    {
      $tasks = Task::orderBy('id','desc')->paginate(9);
      return view('empmodel', compact('tasks'));
    }
  public function store(Request $request)
    {
       $tasks = new Task;
       $tasks->t_title = $request->input('t_title');
       $tasks->project_id = $request->input('project_id');
       $tasks->save();
       return view('secondp');
    }

Ajax:

<script type="text/javascript">
$(dcument).ready(function () {
  $('#addform').on('submit', function(e){
    e.preventDefault();

    $.ajax({
      type: "POST",
      url: "/addstudent",
      data: $('#addform').serialize(),
      success: function (response) {
        console.log(response)
        $('#studentaddmodal').modal('hide')
        alert("data saved");
      },
      error: function(error) {
        console.log(error)
        alert("Data not saved");
      }
    });
  });
});
    
</script>
</body>

Routes:

Route::get('/tasks', 'projects\ProjectpController@index');
Route::post('/addstudent', 'projects\ProjectpController@store');

CSRF token is also not missing, so what could be the error? It seems not even showing console logs. Update: typo "dcument" changed to "document".

Iljido

6 years ago

Level 1

in Ajax : second line -> $(dcument) should not be : $(document) ???

flightsimmer668

6 years ago

Level 11

In the routes file:

Route::get('/tasks', 'projects\ProjectpController@index');
Route::post('/addstudent', 'projects\ProjectpController@store');

Maybe a long shot since you already mentioned it posts fine without AJAX. Just making sure that there is no typo: ProjectpController -- the p is supposed to be there? And projects\ is in the correct namespace, as in, there is a folder called projects inside your app\Http\Controllers directory?

TomasAm

6 years ago

Level 1

yes, the folder exists, no typo. Maybe the error is in html?

<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#studentaddmodal">
  Launch demo modal
</button></div> 

<!-- Modal -->
<div class="modal fade" id="studentaddmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="addform">
      <div class="modal-body">
      
     @CSRF
  <div class="form-group">
    <label>Title</label>
    <input type="text" name="t_title" class="form-control"  placeholder="Title">
  </div>
  <div class="form-group">
    <label>Description</label>
    <input type="text" name="project_id" class="form-control"  placeholder="Description">
  </div>
  
 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
   
  </div>
</div>
   </form>

TomasAm

6 years ago

Level 1

I changed accordingly and URL goes after submit to:

http://project2.test/tasks?_token=C7H5HUPu4DCWSHsreYaA8Wm3qT5LxPQ9z1Guc5dZ&t_title=fdgfds&project_id=3

but data not saved.

If I try to enter two text values, then get alert "data saved", if I enter project_id as intiger like 1,2,3.. it says "data saved", but it does not appear in database.

TomasAm

6 years ago

Best Answer

Level 1

Change to

data: {
    formData: $('#addform').serialize()
}

and in Controller method

public function store(Request $request)
{
    parse_str($request->formData, $output);
    $tasks = new Task;
    $tasks->t_title = $output['t_title'];
    $tasks->project_id = $output['project_id'];
    $tasks->save();
}

Please or to participate in this conversation.