Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.09.2017, 01:10
Новичок на форуме
Отправить личное сообщение для Kosss Посмотреть профиль Найти все сообщения от Kosss
 
Регистрация: 26.09.2017
Сообщений: 4

Элементы добавляются в div только после обновления страницы
Помогите найти ошибку.
Есть простая 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>');
                    }
                });
            }
        });
    }
});

Так вот проекты по клику добавляет в бд как следует, а выводит полный список только после обновления страницы. Подскажите пожалуйста где ошибка.
Ответить с цитированием
  #2 (permalink)  
Старый 26.09.2017, 01:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Kosss,
где в строке 15 вывод в таблицу?
Ответить с цитированием
  #3 (permalink)  
Старый 26.09.2017, 08:14
Новичок на форуме
Отправить личное сообщение для Kosss Посмотреть профиль Найти все сообщения от Kosss
 
Регистрация: 26.09.2017
Сообщений: 4

Он в строке 34, строка 15 только сигнализирует об успешной записии названия проекта в бд
Ответить с цитированием
  #4 (permalink)  
Старый 26.09.2017, 08:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Kosss,
так сделайте чтобы было в строке 15
getProjects () ;alert ('Project succsessfully added');


проще без запроса добавить что нужно
Ответить с цитированием
  #5 (permalink)  
Старый 26.09.2017, 08:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Kosss,
для примера...
$("#addproject").click(function(){

        var project = $("#newproject").serialize(); //пока только название проекта, но будет ещё id юзера
        var projectname = $('[name="projectname"]').val();
       	$.ajax({
    		url: 'addproject.php', //добавляем проект из формы в бд (табл.: projectid, projectname, userid)
    		type: 'POST',
    		data: project,
    		success: function(data){ //при успешной записи в бд data = true
    			if (data) {
                    $('#projects').append('<tr> <td>' + ($('#projects tr').length+1) + '</td> <td>' + projectname + '</td> </tr>');
    				alert ('Project succsessfully added');
    			} else {
    				alert('Error');
    			}
    		}
    	});
    });
Ответить с цитированием
  #6 (permalink)  
Старый 26.09.2017, 09:11
Новичок на форуме
Отправить личное сообщение для Kosss Посмотреть профиль Найти все сообщения от Kosss
 
Регистрация: 26.09.2017
Сообщений: 4

Спасибо, буду пробовать
Ответить с цитированием
  #7 (permalink)  
Старый 27.09.2017, 13:35
Новичок на форуме
Отправить личное сообщение для Kosss Посмотреть профиль Найти все сообщения от Kosss
 
Регистрация: 26.09.2017
Сообщений: 4

рони,
еще раз спс за наводку. сделал так:
$("document").ready(function(){

    getProjects (); // выводим уже существующие проекты
    		
    $("#addproject").click(function(){

        var project = $("#newproject").serialize(); //добавляем проект из формы в бд (табл.: projectid, projectname, userid)

       	$.ajax({
    		url: 'addproject.php',
    		type: 'POST',
    		data: project,
    		success: function(data){
                getProjects ();
    			if (data) {
    				alert ('Project succsessfully added');
    			} else {
    				alert('Error');
    			}
    		}
    	});
    });


    var projectIds = []; //массив уникальных значений id проектов
        
    function getProjects () {
        $.ajax({
            url: 'getproject.php',
            type: 'POST',
            success: function(data){
                data = jQuery.parseJSON(data); // для каждого проекта массив вида: projectid, projectname, userid
                $.each(data, function(i, item){
                    if(jQuery.inArray(item.projectid, projectIds) == -1) { //выводим только новодобавленные проекты
                        projectIds.push(item.projectid);
                        $('#projects').append('<tr> <td>' + (i + 1) + '</td> <td>' + item.projectname + '</td> </tr>');
                    }
                });
            }
        });
    }
});

и все заработало как надо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запретить прокрутку страницы при грозонтальной прокрутке внутреннего div? shurik_shink Events/DOM/Window 1 26.04.2016 15:50
Сохранение правок кода после обновления страницы qero Firefox/Mozilla 5 21.02.2016 17:30
Восстановить состояние меню после обновления страницы. creep Angular.js 0 29.09.2015 18:09
В div не подгружается контент с другой страницы ms_AmneZia Общие вопросы Javascript 18 03.07.2013 17:23
firefox зависает после обновления страницы constantant Firefox/Mozilla 4 14.09.2009 12:30