Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Передача переменной

Автор: Prontit 10.10.2013, 13:56

Добрый день!

Использую для разработки Bootstrap. Рисую таблицу:

Код


<div class="well">
    <table class="table">
      <thead>
        <tr>
          <th>Номер</th>
          <th>Имя</th>
          <th>Фамилия</th>
          <th>Возраст</th>
          <th>Статус</th>
          <th style="width: 36px;"></th>
        </tr>
      </thead>
      
                <?php
                $i = 0;
                    $data = mysql_query("SELECT id, last_name, first_name, age, status FROM `peoples` WHERE `king`='".mysql_real_escape_string($_COOKIE['id'])."' LIMIT 10");
                    $num = mysql_num_rows($data);
                    
                    
                ?>
            
      <tbody>
      
      <?php
        for($i=0;$i<$num;$i++)
        {
        $id = mysql_result($data, $i, "id");
        $last_name = mysql_result($data, $i, "last_name");
        $first_name = mysql_result($data, $i, "first_name");
        $age = mysql_result($data, $i, "age");
        $status = mysql_result($data, $i, "status");
        ?>
            <tr>
                <td><?= $id; ?></td>
                <td><?= $first_name; ?></td>
                <td><?= $last_name; ?></td>
                <td><?= $age; ?></td>
                <td><?= $status; ?></td>
                <td>
                    <a href="user.html"><i class="icon-pencil"></i></a>
                    <a href="#myModal" role="button" data-toggle="modal"><i class="icon-remove"></i></a>
                </td>
        </tr>
<?php
}    
?>
      
      </tbody>
    </table>
</div>

необходимо сделать возможность удаления/изменения информации о пользователе, при нажатии на

Код


<a href="user.html"><i class="icon-pencil"></i></a>
<a href="#myModal" role="button" data-toggle="modal"><i class="icon-remove"></i></a>

Модальное окно вот такое:

Код


<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Удаление пользователя</h3>
    </div>
    <div class="modal-body">
        <p class="error-text">Вы уверены что хотите удалить этого пользователя ?</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Отмена</button>
        <button class="btn btn-danger" data-dismiss="modal">Удалить</button>
    </div>
</div>

Собственно вопрос: как передать в это модальное окно переменную с id пользователя, ну или другую информацию о нем?

Когда таблица была статичная, просто html, сделал так:

Код


<a href="#myModal" role="button" data-toggle="modal"><i class="icon-remove"></i><?php $user=1 ?></a>

т.е. перезаписывал переменную при нажатии на ссылку, и там ее ловил. Как теперь сделать, не могу сообразить. Может както через функцию, так же передать при нажатии объект, ловить его там и обращаться к его id или value?

Заранее благодарю!

Автор: Nett 10.10.2013, 22:58

Можно подкладывать data атрибут в тэг <i> или в саму ссылку (он есть у Вас в ссылке).
На jQuery завесить событие, 'click'.
В callback метода обращаться к $(this) - собственно текущий элемент.
Например:

Код


$('body').on('click', 'a.modalWindow', function() {
    var userId = $(this).data('uid');
    ...
});

Далее используя ajax можно обмениваться данными с сервером, и манипулировать с DOM без перезагрузки страницы.

Этот ответ добавлен с нового Винграда - http://ru.vingrad.com/Передача-переменной-id525687ffae2015a05d000001#findElement_E7045_525706feae2015fb1300038c_0

Автор: Prontit 11.10.2013, 07:20

Цитата(Nett @ 10.10.2013, 22:58)

Код


$('body').on('click', 'a.modalWindow', function() {
    var userId = $(this).data('uid');
    ...
});

Спасибо попробую! И еще такой момент, я вот получу эту переменную, передам в PHP скрипт, там обработаю и DELETE в базу. Можно потом без перезагрузки страницы "обновить" таблицу?

Достаточно ли будет просто сделать:

Код


$("#some_button").click(function()
            {
                $("#stroka1").html("");
            });

Автор: Nett 11.10.2013, 23:45

Конечно можно.
при помощи того-же jQuery, это достаточно легко сделать.
Например через метод closest().
Примерно так

var currentElement = $(this);

Запишите текущий элемент в функции, где выполняется ajax запрос, до самого запроса, затем в callback :success или как сейчас
.done(function(response) {
    if(response) {
        $(currentElement).closest('tr').remove();
    }
});

http://api.jquery.com/jQuery.ajax/

Этот ответ добавлен с нового Винграда - http://ru.vingrad.com/Передача-переменной-id525687ffae2015a05d000001#findElement_E7045_5258636cae2015573f000481_0