Доброе время суток.
Учусь, не могу найти ментора, напишите что не так, на что нужно обратить внимание и что подучить.
Сам код, работа с ajax, вывод постов, редактирование, удаление, добавление нового поста и добавление мыла. И если есть возможность помочь с histori API, а точнее с обработкой нажатия клавиш в браузере, потому-что то решение которое сделал я, костыль, а как исправить пока-что не знаю. Спасибо за помощь.
//очистка контента-------------------------------------------------
function putContent(html){
$('#hidden-content').html(html);
};
//очистка контента -------------------------------------------------
//работа с histori API-------------------------------------------------
function histori(elem, link, title){
$(document).on('click', elem, function(event){
event.preventDefault();
$.ajax({
url: link,
method: 'GET',
dataType: 'HTML',
success: function(html){
history.pushState({}, title, link);
}
});
});
};
// работа с histori API-------------------------------------------------
// выводит главный контент---------------------------------------------
function addMainContent(){
$.ajax({
url: 'view/main.html',
type: 'GET',
dataType: 'HTML',
success: function (html) {
$('#hidden-content').html(html);
},
});
};
addMainContent();
// выводит главный контент---------------------------------------------
$(document).ready(function(){
// ссылка-------------------------------------------------------
var api_url = 'http://tranquil-gorge-63456.herokuapp.com/';
// ссылка-------------------------------------------------------
// работа с histori API----------------------------------------
histori('[data-action]', 'view/posts.html', 'Posts');
histori('.addPost', 'view/addpost.html', 'AddPosts');
// работа с histori API----------------------------------------
// выводим все посты в footer----------------------------------
function addAllPosts(){
$.ajax({
url: api_url +'api/posts',
method: 'GET',
dataType: 'JSON',
success: function(res){
$.each(res, function(index, val){
var postsStr = '<p class="postItem" data-action="posts" data-id="'+ val._id + '">' + val.title + '</p>';
$('.post').prepend(postsStr);
});
}
});
};
addAllPosts();
// выводим все посты в footer----------------------------------
// выводим пост на отдельной страницe--------------------------
$(document).on('click', '.postItem', function(event){
event.preventDefault();
var id = $(this).data('id');
console.log(id);
$.ajax({
url: api_url + 'api/posts/' + id,
method: 'GET',
dataType: 'JSON',
success: function(res){
putContent(' ');
$('#hidden-content').append('<div class="container"> </div>');
$('#hidden-content').find('.container').append('<div class="viewPost" data-id="' + id + '"></div>');
var html = '<h1>' + res.title + '</h1>';
html += '<p class="postContent">' + res.content + '</p>';
html += '<input type="submit" style="margin-right: 20px;" class="editPost edThisPost" value="Редактировать">';
html += '<input type="button" class="editPost delete" value="Удалить">';
$(document).find('.viewPost').append(html);
},
});
});
// выводим пост на отдельной странице--------------------------
// удаление поста----------------------------------------------
$(document).on('click', '.delete', function(event){
event.preventDefault();
var id = $('.viewPost').data('id');
$.ajax({
url: api_url + 'api/posts/' +id,
method: 'DELETE',
success: function(res){
putContent(' ');
alert('Пост удален');
$('#hidden-content').append('<div class="container"><a href="#" class="backToMain">Вернутся на главную страницу</a></div>');
},
});
});
// удаление поста----------------------------------------------
//создание нового поста----------------------------------------
$(document).on('click', '.addPost', function(event){
event.preventDefault();
$.ajax({
url: 'view/addpost.html',
method: 'GET',
dataType: 'HTML',
success: function(res){
putContent(res);
},
});
});
$(document).on('click', '.addNewPost', function(event){
event.preventDefault();
var newTitle = $('.addTitle').val();
var newContent = $('.addContent').val();
$.ajax({
url: api_url + 'api/posts',
method: 'POST',
data : {
title: newTitle,
content: newContent
},
success: function(res){
alert('Вы добавили новую запись');
},
});
});
//создание нового поста----------------------------------------
//add email----------------------------------------------------
$(document).on('click', '.add-email', function(event){
event.preventDefault();
var personEmail = $('.email').val();
$.ajax({
url: api_url + 'api/newsletter',
method: 'POST',
data: {
email: personEmail
},
success: function(){
$('.email').val(' ');
alert('Вы подписались на рассылку новостей');
},
});
});
//add email----------------------------------------------------
//редактирования поста-----------------------------------------
$(document).on('click', '.edThisPost', function(event){
event.preventDefault();
$('h1').after('<input type="text" class="editTitle">');
$('.postContent').after('<input type="text" class="editContent"><br>');
$('.edThisPost').replaceWith('<input type="submit" style="margin-right: 20px;" class="editPost editThisPost" value="Сохранить">');
$(document).on('click', '.editThisPost', function(){
var editTitle = $('.editTitle').val();
var editContent = $('.editContent').val();
var id = $('.viewPost').data('id');
$.ajax({
url: api_url + 'api/posts/' + id,
method: 'PUT',
data: {
title: editTitle,
content: editContent
},
success: function(res){
$('h1').replaceWith('<h1>' + res.title + '</h1>');
$('.postContent').replaceWith('<p class="postContent">' + res.content + '</p>');
$('.editTitle, .editContent').remove();
$('.editThisPost').replaceWith('<input type="submit" style="margin-right: 20px;" class="editPost edThisPost" value="Редактировать">');
},
});
});
});
window.onpopstate = function(event) {
putContent();
addMainContent();
addAllPosts();
};
});
