I have a web application am building and am trying to implement posting and commenting with ajax(using jquery). I use php with laravel for the backend.
I have 3 JavaScript files I use to handle post, comments and infinite scrolling(pagination).... I have two problems, and after checking a series of questions and answers here on SO non really addresses my problem directly
1) When I click the post button the first time it works fine and the page is updated with ajax but when I post the second time it does not work.
2) Also after posting and the page updated with ajax clicking the comment button will only encode the content of the comment box to the browser url string like a get request and this refreshes the page before one can resume commenting normally again....
Please how can I solve this,thanks in advance
Here are the various js files
1)post.js
$(document).ready(function() {
var url = '';
var token = '';
var post = '';
$('#post-btn').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
post = $('#postContent').val();
url = $('#postUrl').val();
token = $('#token').val();
alert('url:' + url + '\n' + 'post:' + post);
if (post !== '')
var post_ajax = $.ajax({
url: url,
type: "POST",
data: {
body: post,
_token: token
},
success: function(data) {
//Clear post box
$('#postContent').val('');
alert(data.posts);
$('.posts').html(data.posts);
$('#nextPage').val(data.nextPage);
urlRefresh();
post_ajax.abort();
},
error: function(data, XMLHttpRequest, textStatus, errorThrown) {
// alert(data.errors);
alert("XMLHttpRequest: " + XMLHttpRequest);
alert("Status: " + textStatus);
alert("Error: " + errorThrown);
post_ajax.abort();
}
});
return false;
});
});
Here is comment.js
var post_id = 0;
var user_id = 0;
var comment = 'nothing yet';
var url = '';
var token = '';
$('body').find('.comment-form').find('.footer').on('click', '#comment-btn', function(e) {
e.preventDefault();
e.stopPropagation();
post_id = event.target.parentNode.parentNode.parentNode.parentNode.parentNode.dataset['postid'];
url = $('#url' + post_id).val();
token = $('#token').val();
comment = $('#commentbox' + post_id).val();
/* Test case print outs */
// alert('url:'+url+'\n'+'token:'+token+'\n'+'postID:'+post_id+'\n'+'comment:'+comment);
if (comment !== '')
var comment_ajax = $.ajax({
url: url,
type: "POST",
data: {
postId: post_id,
content: comment,
_token: token
},
success: function(data) {
//Clear comment box
//alert(data.comments);
$('#comment-wrapper' + post_id).html(data.comments);
$('#commentbox' + post_id).val('');
comment_ajax.abort();
},
error: function(data, XMLHttpRequest, textStatus, errorThrown) {
// alert(data.errors);
alert("XMLHttpRequest: " + XMLHttpRequest);
alert("Status: " + textStatus);
alert("Error: " + errorThrown);
post_ajax.abort();
}
});
return false;
});
Here is paginate.js for infinite scroll
$(window).scroll(fetchpost);
function fetchpost() {
var page = $('#nextPage').val();
if (page !== null) {
clearTimeout($.data(this, "scrollCheck"));
$.data(this, "scrollCheck", setTimeout(function() {
var scroll_height = $(window).height() + $(window).scrollTop() + 100;
if (scroll_height >= $(document).height()) {
// alert(page);
$.get(page, function(data) {
alert(page);
//alert('This is the data returned'+data.posts);
// alert('This is the data returned :'+data.next_page);
$('.posts').append(data.posts);
$('#nextPage').val(data.nextPage);
})
}
}), 350);
}
return false; }
Backend code for post
<?php
namespace App\Http\Controllers;
use App\Post;
use App\Comment;
use Illuminate\Http\Request;
// use App\Http\Requests;
// use App\Http\Controllers\Controller;
class PostController extends Controller{
public function createPost(Request $request) {
//validation
if($request->ajax()){
try {
$post = new Post();
$post->body=$request['body'];
$request->user()->posts()->save($post);
//get latest posts
$posts=Post::orderBy('created_at', 'desc')->paginate(5);
return ['posts' =>view('post')->with('posts',$posts)->render(),
'nextPage' => $posts->nextPageUrl()];
}
catch(Exception $exp) {
return ['errors'=>$exp];
}
}
}
public function postComment($id, $user, Request $request) {
if($request->ajax()) {
$post = Post::findOrFail($id);
$comment = new Comment();
$comment->user_id=$user;
$comment->content=$request['content'];
$post->comments()->save($comment);
return ['comments' => view('comment')->with('post',$post)->render()];
}
}
}
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire