Помогите найти ошибку.
Есть простая html-форма, в которой юзер вводит название проекта, а ниже в div выводится список уже существующих проектов:
<body>
<form id="newproject">
<p> Project name: <input type="text" name="projectname"/>
<input type="button" id="addproject" value="Add project" /> </p>
</form>
<div id="container">
<table id="projects" border="1">
</table>
</div>
</body>
Проекты записываются в бд, а затем все извлекаются и выводятся в container следующим творчеством:
$("document").ready(function(){
getProjects (); // выводим уже существующие проекты
$("#addproject").click(function(){
var project = $("#newproject").serialize(); //пока только название проекта, но будет ещё id юзера
$.ajax({
url: 'addproject.php', //добавляем проект из формы в бд (табл.: projectid, projectname, userid)
type: 'POST',
data: project,
success: function(data){ //при успешной записи в бд data = true
if (data) {
alert ('Project succsessfully added');
} else {
alert('Error');
}
}
});
});
var projectIds = []; //массив уникальных значений id проектов
function getProjects () {
$.ajax({
url: 'getproject.php', // получаем для каждого проекта массив вида: projectid, projectname, userid
type: 'POST',
success: function(data){
data = jQuery.parseJSON(data);
$.each(data, function(i, item){
if(jQuery.inArray(item.projectid, projectIds) == -1) { //добавляем в div только новодобавленные проекты а не весь список
projectIds.push(item.projectid);
$('#projects').append('<tr> <td>' + (i + 1) + '</td> <td>' + item.projectname + '</td> </tr>');
}
});
}
});
}
});
Так вот проекты по клику добавляет в бд как следует, а выводит полный список только после обновления страницы. Подскажите пожалуйста где ошибка.