i'm trying to add a post without the page refreshing the using the simplest way by using jquery ajax.
Its not posting to my mysql database, and i don't know why.
i was following along this tutorial
Vue.js Looks like something i can use in the future but i just cant wrap my head around it
Any Suggestions ?
Dashboard.blade.php
@extends('layouts.layout')
@section('title')
Dashboard
@endsection
@section('content')
<div class="dashboard eli-main">
<div class="container ">
<div class="row">
<div class="col-md-6 col-md-12">
<h1></h1>
<h4>What do you have to say?</h4>
<form>
<div class="form-group">
<textarea class="form-control" name="body" id="body" rows="5" placeholder="Your Post"></textarea>
</div>
<button type="submit" id="add" class="mybtn2">Create Post</button>
<input type="hidden" value="" name="_token">
</form>
@foreach($posts as $post)
<article class="post">
<h4></h4>
<p class="post-bod">
</p>
<div class="info">
made on
</div>
</article>
@endforeach
</div>
</div>
</div>
</div>
App.js
$("#add").click(function() {
$.ajax({
type: 'post',
url: '/addItem',
data: {
'_token': $('textarea[name=_token]').val(),
'name': $('textarea[name=body]').val()
},
success: function(data) {
if ((data.errors)) {
$('.error').removeClass('hidden');
$('.error').text(data.errors.name);
} else {
$('.error').remove();
$('#table').append("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.name + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
}
},
});
$('#body').val('');
});
PostController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
use App\User;
use Illuminate\Support\Facades\Auth;
use App\Http\Requests;
use Validator;
use Response;
use Illuminate\Support\Facades\Input;
class PostController extends Controller
{
public function getDashboard()
{
$posts = Post::orderBy('created_at', 'desc')->get();
$cookie = cookie('saw-dashboard', true, 15);
$users = User::all();
$user = new User();
// return view('dashboard', array('user'=> Auth::user()), compact('users'))->withCookie($cookie);
return view('dashboard',array('user'=> Auth::user(), 'posts' => $posts, compact('users')))->withCookie($cookie);
}
// public function postCreatePost(Request $request)
// {
// $this->validate($request,[
// 'body' => 'required|max:1000'
// ]);
// $post = new Post();
// $post->body = $request['body'];
// $message = 'There was an error';
// if($request->user()->posts()->save($post)){
// $message = 'Post Successfully Created';
// }
// return redirect()->route('dashboard');
// }
public function postCreatePost(Request $request) {
$rules = array (
'body' => 'required|max:1000'
);
$validator = Validator::make ( Input::all (), $rules );
if ($validator->fails ())
return Response::json ( array (
'errors' => $validator->getMessageBag ()->toArray ()
) );
else {
$post = new Post();
$post->body = $request->body;
$post->save();
return response ()->json( $post );
}
}
}
And the route is
Route::post ( '/addItem', 'PostController@postCreatePost' );
via Owl Man