Update данных без перезагрузки страницы

@Владимир23 · Регистрация: 01.11.2009

Author24 — интернет-сервис помощи студентам

Добрый день. помогите написать обработку.
Есть список идей, у каждой идеи указан этап, мне нужно поменять этап в БД.
Идея выводится во всплывающем окне Jquery, я в этом окне хочу сделать несколько кнопок - изменение этапа, добавление комментариев и пр. Но не силен в Jquery, помогите сделать, а то сроки "горят".
кнопку нужно вставить после 232 строки.
я в ПХП форму-то накидал..
нашел инфу, но понять пока не могу как мне сделать.
http://javascript.ru/ajax/intr... -deystviya
http://roothelp.ru/lessons/izm... rezagruski

Кликните здесь для просмотра всего текста

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Подключаем jquery -->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Таблицы</title>
  <style type="text/css">
 
  </style>
 </head>
 <body>
 
<!-- Функция для jquery окна -->
<script>
 
$(function () {
    //script for popups
    $('a.show_popup').click(function () {
        $('div.'+$(this).attr("rel")).fadeIn(500);
        $("body").append("<div id='overlay'></div>");
        $('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
        return false;               
    }); 
    $('a.close').click(function () {
        $(this).parent().fadeOut(100);
        $('#overlay').remove('#overlay');
        return false;
    });
    
    //script for tabs
    $("div.selectTabs").each(function () {
        var tmp = $(this);
        $(tmp).find(".lineTabs li").each(function (i) {
            $(tmp).find(".lineTabs li:eq("+i+") a").click(function(){
                var tab_id=i+1;
                $(tmp).find(".lineTabs li").removeClass("active");
                $(this).parent().addClass("active");
                $(tmp).find(".tab_content div").stop(false,false).hide();
                $(tmp).find(".tab"+tab_id).stop(false,false).fadeIn(300);
                return false;
            });
        });
    });
}); 
 
</script>
 
 
 
<?php
 
//Получаем id пользователся из сессии Joomla
$user = JFactory::getUser();
$u = $user->id;
//Получаем текущую дату
$date = date("Y-m-d");
 
try{
//Подключаемся к БД
$dbh = new PDO('mysql:host=localhost;dbname=uvpz; charset=utf8', 'root', '');
//Запрос на получение этапов
$stmt = $dbh->query("SELECT uvpz.stage.id, uvpz.stage.title FROM uvpz.stage;");
//Получаем типы идей
$stmt1 = $dbh->query("SELECT uvpz.ideas_type.id, uvpz.ideas_type.idea_name FROM uvpz.ideas_type;");
 
 
while($stage = $stmt->fetch(PDO::FETCH_ASSOC)){
$stage_ideas[] = $stage['title'];
$stage_ideas_id[] = $stage['id'];
}
//помещаем а переменную типы идей
while($i_type = $stmt1->fetch(PDO::FETCH_ASSOC)){
$ideas_type_id[] = $i_type['id'];
$ideas_type_name[] = $i_type['idea_name'];
}
 
//Заливка этапов цветом
$stage_color = array("eb9175", "ffdb8b", "aaf0d1", "c5e384"); 
 
?>
 
<!-- Кнопка добавления новой идеи -->
<div id="new_ideas">
                <a class="show_popup" rel="tabs_info"  href="#">Новая идея</a>
            
    </div>
    <div class="popup tabs_info" id="new_ideas_id" >
        <a class="close" href="#">Close</a>
        <h2>Новая идея</h2>    
        
        <div class="selectTabs">
            <!-- <ul class="lineTabs">
                <li class="active"><a href="#">Удобства вкладок</a></li>
    
            </ul> -->
            <div class="tab_content">
                <div class="tab1">
                <form name="new_ideas" method="post" action="">
 
                     <p><b>Название:</b><br>
                       <input type="text" name="id_name" size="200">
                     </p>
                      <p><b>Тип:</b><br>
                       <select name="id_type" size="1">
                       <?php
                       //делаем список выбора типов идей
                    for ($i= 0; $i < count($ideas_type_id); $i++) 
                    { ?>
                         <option value="<?php echo $ideas_type_id[$i];?>"><?php echo $ideas_type_name[$i];?></option>
                    <?php };
                        ?>
                         </select>
                     </p>
                      <p>Описание:<Br>
                    <textarea name="description" cols="200" rows="3"></textarea></p>
 
                     <p>Цель:<Br>
                    <textarea name="target" cols="200" rows="3"></textarea></p>
                    
                      <p><b>Вовлеченные подразделения:</b><br>
                       <input type="text"  name="subdivision" size="200">
                     </p>
                    <input type="submit" value="Отправить"></p> 
                </form>
                </div>
            
            </div>
        </div>          
    </div>
    
<?php
//Выполняем инсерт новой идеи в БД.
 
//Получаем данные
if(isset($_POST['id_name'])) {$id_name = $_POST['id_name'];}
if(isset($_POST['id_type'])) {$id_type = $_POST['id_type'];}
if(isset($_POST['description'])) {$description = $_POST['description'];}
if(isset($_POST['target'])) {$target = $_POST['target'];}
if(isset($_POST['subdivision'])) {$subdivision = $_POST['subdivision'];}
 
 
if(isset($_POST['id_name']) & isset($_POST['id_type']) & isset($_POST['description']) & isset($_POST['target'])
 & isset($_POST['subdivision']))
 {
 $stmt2 = $dbh->prepare("Insert into uvpz.idea(uvpz.idea.id_author, uvpz.idea.date_create, uvpz.idea.name, uvpz.idea.type, uvpz.idea.description,
uvpz.idea.target, uvpz.idea.subdivision, uvpz.idea.stage) values ($u, '$date','$id_name',$id_type,'$description','$target', '$subdivision',0);"); 
 
 $stmt2->execute();
 unset($id_name, $id_type,$description,$target,$subdivision);
 
 }
?>  
    
    
 
<!--            Формаруем таблицу идей          -->
<table class="ideas";> 
 
<tr>
<?php
//Выводим столбцы - этапы идеи
for($i=0;$i<count($stage_ideas);$i++)
    {
        
        echo "<td class='td_stage".$i."'><table><thead><tr><th scope='col'>".$stage_ideas[$i]."</th></tr></thead></table>";
 
        //Запрос на выборку идей по этапу
        $stmt2 = $dbh->query("SELECT uvpz.idea.stage, uvpz.stage.title ,uvpz.idea.id, uvpz.idea.id_author, uvpz.idea.name, uvpz.idea.type, uvpz.idea.description,
            uvpz.idea.target, uvpz.idea.subdivision, uvpz.ideas_type.idea_name as ideas_type, uvpz.idea.date_create FROM uvpz.idea 
            Left Join uvpz.ideas_type On uvpz.ideas_type.id = uvpz.idea.type
            Left Join uvpz.stage On uvpz.idea.stage = uvpz.stage.id
            where uvpz.idea.stage = ".$i."
            Order By uvpz.idea.date_create DESC");
        
        while($ideas = $stmt2->fetch(PDO::FETCH_ASSOC)){
            $ideas_id[] = $ideas['id'];
            $ideas_id_author[] = $ideas['id_author'];
            $ideas_name[] = $ideas['name'];
            $ideas_type[] = $ideas['ideas_type'];
            $ideas_target[] = $ideas['target'];
            $descrip[] = $ideas['description'];
            $subdivis[] = $ideas['subdivision'];
            $ideas_date[] = $ideas['date_create'];
            $ideas_stage[] = $ideas['title'];
        }
        if(isset($ideas_name)){
        for($q=0;$q<count($ideas_name);$q++)
        {?> 
            <!--<table>
            <!-- <tr></tr> -->
            <!--<tr><th> -->
                <table id = "tbl_idea"> <!-- class="ideas_st"> -->
            <!--    <tbody> -->
                <tr><th colspan="3" id = "th"><?php echo $ideas_name[$q];?></th></tr>
                <tr><th colspan="3"><?php echo $ideas_type[$q];?></th></tr>
                <tr>
                <th>icon</th>
                <th>icon</th>
                <th>
                    <div class="link_group">
                    <a class="show_popup" rel="tabs_info<?=$q.$i; ?>"  href="#">Open</a>
                </th>
                </tr>
                <!-- </tbody> -->
                </table>
        <!--    </th>
            </tr>
            </table>
            -->
    </div>
    <!-- <div class="popup tabs_info<?//=$q.$i; ?>" > -->
    <div id="tabs_info" class="popup tabs_info<?=$q.$i; ?>"> <!-- id="new_ideas_id"   id="tabs_info" -->
        <a class="close" href="#">Close</a>
        <h2><?=$ideas_name[$q]; ?> </h2>    
        
        <div class="selectTabs">
            <ul class="lineTabs">
                <li class="active"><a href="#">Основная информация</a></li>
                <li><a href="#">История</a></li>
                <li><a href="#">Комментарии</a></li>
            </ul>
            <div class="tab_content">
                <div class="tab1">
                    Полное описание:<br> <p><?php echo $descrip[$i];?></p>
                    Вовлеченные подразделения:<br> <p><?php echo $subdivis[$i];?></p>
                    Дата создания:<br> <p><?php echo $ideas_date[$i];?></p>
                    
                    Текущий этап: <?php echo $ideas_stage[$i];?><br><br>
                    Переместиь на этап:<br>
                                                    
                    <form action="" method="get">
                         <select name="new_stage_id" size="1">
                           <?php
                           //делаем список выбора типов идей
                        for ($k= 0; $k < count($stage_ideas_id); $k++) 
                        { ?>
                            <option value="<?php echo $stage_ideas_id[$k];?>"><?php echo $stage_ideas[$k];?></option>
                            
                            <?php };
                                ?>
                              </select>
                     <p><input type="submit" name="stage_repair" value="Переместить"></p> 
                     </form>
                     
                     <script>
                     jQuery(document).ready(function($) {
                        $(".pub").click(function() {
                        var publicTitle = $(this).attr("title");
                        var titleID = $(this).attr("id");
                        var nameId = $(this);
                            $.ajax(
                                { 
                                    url:'pub.php',
                                    type:'post',
                                    data:{"id": publicTitle},  
                                    success:function (publicObj,test) {
                                    var result = $.parseJSON(publicObj);                
                                    $(nameId).html(result.title).hide().fadeIn(1000); 
                                    }
                                    }
                                );                  
                            }); 
                        });
                    </script>
                     
                     
                     
                     
                     </div>
                <div class="tab2">
                    <p>История ведения идеи</p>
                    Отображать историю идеи: в mysql написать процедуру, которая будет при 
                    каждом изменении в таблице идей создавать запись. Все записи по выбранной идеи отображать в списке тут.
                </div>
                <div class="tab3">
                    <p>Комментарии к идеи</p>
                    
                    <form>
                        <p><input type="submit" value="Добавить комментарий">
                    </form>
 
                </div>
            
            </div>
        </div>          
    </div>
                    
        <?php } 
        }
//      else {echo "нет идей";}?>
        
        </td>
        
    <?php   
    unset($ideas_name);
    }
?>  
</tr>
</table>
<?php
}
 
catch(PDOException $e){
echo 'Error : '.$e->getMessage();
exit();
}
?>
 
</body>
</html>

Добавлено через 3 часа 22 минуты
help!

@Silver22 · 06.10.2015, 16:04

Владимир23, как поменять этап в PHP знаете?

@Владимир23 · 07.10.2015, 09:41 **[ТС]**

Сообщение от Silver22

Владимир23, как поменять этап в PHP знаете?

ну да: передать постом id нового этапа, поймать его и сделать update. - так я сделать могу, но страница обновится.

@Silver22 · 07.10.2015, 09:44

Владимир23, тогда на клике мышки вешаете ajax запрос с POSTом которым передаёте id этапа и на бэке уже его обрабатываете.

@Владимир23 · 07.10.2015, 12:18 **[ТС]**

Сообщение от Silver22

ajax запрос с POSTом которым передаёте id этапа и на бэке уже его обрабатываете.

вот в этом -то и проблема - не могу понять как это сделать. можно пример, пожалуйста.

@Silver22 · 07.10.2015, 12:23

Владимир23, ну например создайте кнопку с id=change_idea

HTML5

1	<button id="change_idea">Изменить этап</button>

и обработчик на неё

Javascript

#('#change_idea').click(function(event) {
    event.preventDefault();
    $.ajax({
        url: '/path/to/file',
        type: 'POST',
        data: {id: 'id_place_here', action:'change'}
    })
    .done(function() {
        console.log("success");
    })
    .fail(function() {
        console.log("error");
    })
});

Поменяйте только путь к файлу куда отправлять запрос, ну и id нужно откуда-то взять, смотря где он у вас выводится

@Владимир23 · 07.10.2015, 12:33 **[ТС]**

а

Сообщение от Silver22

<button id="change_idea">Изменить этап</button>

в <form></form> нужно вкладывать? тогда событие в форме будет action='' и method='post' как обычно?
а тут будет:

PHP

#('#change_idea').click(function(event) {
    event.preventDefault();
    $.ajax({
        url: 'C://блаблабла',
        type: 'POST',
        data: {id: $id_etapa, action:'change'}
    })
    .done(function() {
        console.log("success");
    })
    .fail(function() {
        console.log("error");
    })
});

или обработчик без формы определит событие click?

@Silver22 · 07.10.2015, 12:35

Владимир23, это конкретно событие на клик, форма здесь не обязательна

Javascript

1	url: 'C://блаблабла',

я надеюсь вы не серьёзно?

Javascript

1	data: {id: $id_etapa, action:'change'}

это вы не переменную PHP сюда вписали случайно?

@Владимир23 · 07.10.2015, 12:43 **[ТС]**

Сообщение от Silver22

1
data: {id: $id_etapa, action:'change'}
это вы не переменную PHP сюда вписали случайно?

я понял, что тут id нового этапа должно быть, а оно у меня в переменной, если это не так, тогда что это 'id_place_here'?

@Silver22 · 07.10.2015, 12:51

Владимир23, как вариант

HTML5

1	<button id="change_idea" data-id=<?php здесь выведете свой id средствами php ?>>Изменить этап</button>

Javascript

#('#change_idea').click(function(event) {
    event.preventDefault();
    var id  = $(this).data('id');
    $.ajax({
        url: '/path/to/file',
        type: 'POST',
        data: {'id':id, 'action':'change'}
    })
    .done(function() {
        console.log("success");
    })
    .fail(function() {
        console.log("error");
    })
});

@Владимир23 · 07.10.2015, 13:11 **[ТС]**

тут url: '/path/to/file', должен быть конкретный скрипт php, так? типа script.php

Сообщение от Silver22

вешаете ajax запрос с POSTом которым передаёте id этапа и на бэке уже его обрабатываете.

И в script.php на чистом php выполнять update, или тоже нужно как-то через ajax?

@Silver22 · 07.10.2015, 13:13

Владимир23,

Сообщение от Владимир23

И в script.php на чистом php выполнять update, или тоже нужно как-то через ajax?

Да, там вы просто отлавливаете POST запрос, достаёте из него данные и делаете с ними что хотите

Сообщение от Владимир23

тут url: '/path/to/file', должен быть конкретный скрипт php, так? типа script.php

Да, если у вас нет никакого роутинга. Либо если вы всё пишите в одном index.php можете оставить пустое значение

@Владимир23 · 07.10.2015, 13:30 **[ТС]**

Сообщение от Silver22

Silver22

кстати, мне нужно выбрать этап сначала, а потом выбранный уже передавать, как мне связать button с

PHP

<select name="new_stage_id" size="1">
                           <?php
                           //делаем список выбора этапов идей
                        for ($k= 0; $k < count($stage_ideas_id); $k++) 
                        { ?>
                            <option value="<?php echo $stage_ideas_id[$k];?>"><?php echo $stage_ideas[$k];?></option>
                            
                            <?php };
                                ?>
            </select>

@Silver22 · 07.10.2015, 13:44

Владимир23, не совсем понимаю как это всё вместе должно работать, вы можете на хостинг выложить?

@Владимир23 · 07.10.2015, 13:48 **[ТС]**

Сообщение от Silver22

Владимир23, не совсем понимаю как это всё вместе должно работать, вы можете на хостинг выложить?

к сожалению нет.
У администратора должна быть возможность менять этапы идеи с выпадающего списка или как-то иначе.

@Silver22 · 07.10.2015, 13:52

Владимир23, получается после выбора этапа, нужно нажать на кнопку изменить и скрипту должен улететь id идеи и id этапа?

@Владимир23 · 07.10.2015, 13:55 **[ТС]**

Сообщение от Silver22

Владимир23, получается после выбора этапа, нужно нажать на кнопку изменить и скрипту должен улететь id идеи и id этапа?

Так точно

@Silver22 · 07.10.2015, 14:09

Владимир23, тогда не надо добавлять новую кнопку.

HTML5

1	<p><input type="submit" name="stage_repair" value="Переместить"></p>

меняем на

HTML5

1	<p><input type="submit" name="stage_repair" data-id=<?php здесь выведете id идеи средствами php ?> id="replace_idea" value="Переместить"></p>

JS получается

Javascript

$('#replace_idea').click(function(event){
   event.preventDefault();
   var stage_id = $('select[name="new_stage_id"] option:selected').val());
   var id  = $(this).data('id');
     $.ajax({
        url: '/path/to/file',
        type: 'POST',
        data: {'id':id, 'action':'change'}
    })
    .done(function() {
        console.log("success");
    })
    .fail(function() {
        console.log("error");
    })
})

в каждой опции селекта в value должен быть id этапа

@Владимир23 · 07.10.2015, 14:45 **[ТС]**

Сообщение от Silver22

в каждой опции селекта в value должен быть id этапа

что-то я запутался.
вот мой код

PHP

<form action="" method="get">
                         <select name="new_stage_id" size="1">
                           <?php
                           //делаем список выбора этапов идей
                        for ($k= 0; $k < count($stage_ideas_id); $k++) 
                        { ?>
                            <option value="<?php echo $stage_ideas_id[$k];?>"><?php echo $stage_ideas[$k];?></option>
                            
                            <?php };
                                ?>
                              </select>
                      <p><input type="submit" name="stage_repair" value="Переместить"></p>
                     </form> 
            
<p><input type="submit" name="stage_repair" data-id=<?php //здесь выведете id идеи средствами php ?> id="replace_idea" value="Переместить"></p>  
 
            <script>
                $('#replace_idea').click(function(event){
                   event.preventDefault();
                   var stage_id = $('select[name="new_stage_id"] option:selected').val());
                   var id  = $(this).data('id');
                     $.ajax({
                        url: 'C:\xampp\htdocs\uvpz\Board_ideas\update_stage_ideas.php',
                        type: 'POST',
                        data: {'id':id, 'action':'change'}
                    })
                    .done(function() {
                        console.log("success");
                    })
                    .fail(function() {
                        console.log("error");
                    })
                })
            </script>

в форме в опцию селекта (в цикле) value запихивается id нового этапа. Мне button, который, Вы указали куда все-таки пихать? в форму или нет, и если без формы делать, просто <select></select> то как мне поймать id выбранного этапа.
В 'C:\xampp\htdocs\uvpz\Board_ideas\update_stage_ideas.php' у меня:

PHP

<?php
if($_POST['data-id']){
 
     //$sql = "UPDATE uvpz.idea SET uvpz.idea.stage = $_POST['data-id'] WHERE uvpz.idea.id = 24";
    echo $_POST['data-id'];
}
?>

@Silver22 · 07.10.2015, 14:50

Владимир23, во-первых у вас неправильно указан url

Javascript

1	url: 'C:\xampp\htdocs\uvpz\Board_ideas\update_stage_ideas.php',

во-вторых

HTML5

1	<p><input type="submit" name="stage_repair" data-id=<?php //здесь выведете id идеи средствами php ?> id="replace_idea" value="Переместить"></p>

здесь вы не вывели id вашей идеи

Сообщение от Владимир23

в форме в опцию селекта (в цикле) value запихивается id нового этапа. Мне button, который, Вы указали куда все-таки пихать? в форму или нет, и если без формы делать, просто <select></select> то как мне поймать id выбранного этапа.

Форма не нужна, вот этот код:

Javascript

1	var stage_id = $('select[name="new_stage_id"] option:selected').val());

Будет брать id выбраного в селекте этапа и отправлять вам на сервер

@Silver22 90 / 74 / 49 Регистрация: 22.09.2015 Сообщений: 318
	06.10.2015, 16:04	2
	Владимир23, как поменять этап в PHP знаете? 0

@Владимир23 5 / 5 / 4 Регистрация: 01.11.2009 Сообщений: 576
	07.10.2015, 09:41 [ТС]	3
	Сообщение от Silver22 Владимир23, как поменять этап в PHP знаете? ну да: передать постом id нового этапа, поймать его и сделать update. - так я сделать могу, но страница обновится. 0

@Silver22 90 / 74 / 49 Регистрация: 22.09.2015 Сообщений: 318
	07.10.2015, 09:44	4
	Владимир23, тогда на клике мышки вешаете ajax запрос с POSTом которым передаёте id этапа и на бэке уже его обрабатываете. 0

@Владимир23 5 / 5 / 4 Регистрация: 01.11.2009 Сообщений: 576
	07.10.2015, 12:18 [ТС]	5
	Сообщение от Silver22 ajax запрос с POSTом которым передаёте id этапа и на бэке уже его обрабатываете. вот в этом -то и проблема - не могу понять как это сделать. можно пример, пожалуйста. 0

@Владимир23 5 / 5 / 4 Регистрация: 01.11.2009 Сообщений: 576
	07.10.2015, 12:43 [ТС]	9
	Сообщение от Silver22 1 data: {id: $id_etapa, action:'change'} это вы не переменную PHP сюда вписали случайно? я понял, что тут id нового этапа должно быть, а оно у меня в переменной, если это не так, тогда что это 'id_place_here'? 0

@Владимир23 5 / 5 / 4 Регистрация: 01.11.2009 Сообщений: 576
	07.10.2015, 13:11 [ТС]	11
	тут url: '/path/to/file', должен быть конкретный скрипт php, так? типа script.php Сообщение от Silver22 вешаете ajax запрос с POSTом которым передаёте id этапа и на бэке уже его обрабатываете. И в script.php на чистом php выполнять update, или тоже нужно как-то через ajax? 0

@Silver22 90 / 74 / 49 Регистрация: 22.09.2015 Сообщений: 318
	07.10.2015, 13:13	12
	Владимир23, Сообщение от Владимир23 И в script.php на чистом php выполнять update, или тоже нужно как-то через ajax? Да, там вы просто отлавливаете POST запрос, достаёте из него данные и делаете с ними что хотите Сообщение от Владимир23 тут url: '/path/to/file', должен быть конкретный скрипт php, так? типа script.php Да, если у вас нет никакого роутинга. Либо если вы всё пишите в одном index.php можете оставить пустое значение 0

@Silver22 90 / 74 / 49 Регистрация: 22.09.2015 Сообщений: 318
	07.10.2015, 13:44	14
	Владимир23, не совсем понимаю как это всё вместе должно работать, вы можете на хостинг выложить? 0

@Владимир23 5 / 5 / 4 Регистрация: 01.11.2009 Сообщений: 576
	07.10.2015, 13:48 [ТС]	15
	Сообщение от Silver22 Владимир23, не совсем понимаю как это всё вместе должно работать, вы можете на хостинг выложить? к сожалению нет. У администратора должна быть возможность менять этапы идеи с выпадающего списка или как-то иначе. Миниатюры 0

@Silver22 90 / 74 / 49 Регистрация: 22.09.2015 Сообщений: 318
	07.10.2015, 13:52	16
	Владимир23, получается после выбора этапа, нужно нажать на кнопку изменить и скрипту должен улететь id идеи и id этапа? 0

@Владимир23 5 / 5 / 4 Регистрация: 01.11.2009 Сообщений: 576
	07.10.2015, 13:55 [ТС]	17
	Сообщение от Silver22 Владимир23, получается после выбора этапа, нужно нажать на кнопку изменить и скрипту должен улететь id идеи и id этапа? Так точно 0