Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Обновление части данных на странице без её перезаг
йфцыув  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 21
Пользователь №: 40216
На форуме: 2 года, 3 месяца, 9 дней
Карма:




Всем привет!
У меня есть таблица `bg` в ней id name ext display.
display - это 1 или 0 (фон отображается или нет).
Есть страница управления фоном.
Там выводятся все фоновые изображения:
<?
$q = "SELECT * FROM `bg` ORDER BY `id` ASC";
$result = mysql_query($q);

while($ins = mysql_fetch_array($result)) {
echo '<div style="padding: 10;" class="articles" data-id="'.$ins['id'].'">';
echo '<img src="/images/bg/'.$ins['name'].$ins['ext'].'" width="150"';
if(!$ins['display']) echo ' style="opacity: 0.25;"';
echo '>';
echo '</div>';
}
?>

Те, которые не отображаются (display = 0), полупрозрачные.
Мне надо, чтобы при нажатии на картинку скрипт обращался к БД и меня значение поля display на противоположное. Чтобы это всё без перезагрузки стрнаицы. Для этого у меня есть такой код:
<script type="text/javascript" language="javascript">
$(function(){
$('.articles').on('click', function(){
var artId = $(this).data('id'); // id статьи в базе данных
$.ajax({
url: 'mods/a1.php', // путь к обработчику
type: 'POST', // метод передачи данных
dataType: 'json', // формат данных ожидаемых в ответе
data: {article_id: artId}, // передаваемые данные {ключ1 : значение1, ключ2 : значение2}
success: function(data){
if(data){
$('#output').html(data); // выводим статью в нужный блок
} else {
$('#output').html('Ошибка!'); // сообщение об ошибке
}
}
}
);
});
});
</
script>

Сам этот скрипт обращается к обработчику:
<?

include_once('../config.php');

$q = "SELECT * FROM `bg` WHERE `id` = ".$_POST['article_id'];
$result = mysql_query($q);
$num = mysql_num_rows($result);
if($num > 0) {
$bg = mysql_fetch_array($result);
if($bg['display'] == '0') {
mysql_query("UPDATE `bg` SET `display` = '1' WHERE `id` = ".$_POST['article_id']);
} else {
mysql_query("UPDATE `bg` SET `display` = '0' WHERE `id` = ".$_POST['article_id']);
}
$article_data = 'Изменено '.$_POST['article_id'];
} else {
$article_data = 'Нет '.$_POST['article_id'];
}

echo json_encode($article_data);

?>

Сам этот скрипт работает. При нажатии на картинку через аякс идёт запрос и в БД данные изменяются нормально. Внизу страницы под всеми картинками в блоке <div id="output"></div> выводится текст что "Изменено ID".

Но, мне надо, чтобы картинка тоже менялась. Чтобы она становилась полупрозрачной если поле display было изменено на 0 и наоборот. И чтобы это делалось так же без перезагрузки страницы.

Как это сделать? Заранее спасибо!

Я подобным образом хочу так же реализовать такую штуку, чтобы отмечать флажком письма приходящие с сайта. Например, список писем есть на странице как в обычном почтовом сервисе типа яндекса. От кого, дата и т.д. и Рядом серенький флажок. Нажимаешь на него, без перезагрузки стрнаицы флажок становится красным а в БД для этого письма в поле вносится изменения, что письмо помечено как важное.

Подскажите пожалуйста как это реализовать?
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Kusss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1355
Пользователь №: 28976
На форуме: 5 лет, 4 месяца, 7 дней
Карма: 77




обработчик возвращает значение 1 или 0
смотри что пришло, и меня opacity у текущей картинки.
			$('.articles').on('click', function(){
var img = $(this).find('img');
var artId = $(this).data('id'); // id статьи в базе данных
$.ajax({
...
success: function(data){
if(data){
if (data == 1)
opacity = 0.25;
if (data == 0)
opacity = 1;
$(img).css({'opacity':opacity});
} else {
$('#output').html('Ошибка!'); // сообщение об ошибке
}
}
}
}

PMПисьмо на e-mail пользователю
    1   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
йфцыув  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 21
Пользователь №: 40216
На форуме: 2 года, 3 месяца, 9 дней
Карма:




Kusss спасибо! Работает!

Я вставил только немного изменил код, вот так:

<script type="text/javascript" language="javascript">
$(function(){
$('.articles').on('click', function(){
var artId = $(this).data('id'); // id статьи в базе данных
var img = $(this).find('img'); //нов
$.ajax({
url: 'mods/a1.php', // путь к обработчику
type: 'POST', // метод передачи данных
dataType: 'json', // формат данных ожидаемых в ответе
data: {article_id: artId}, // передаваемые данные {ключ1 : значение1, ключ2 : значение2}
success: function(data){
if(data){
$('#output').html(data); // выводим статью в нужный блок
setTimeout(function(){$('#output').fadeOut('fast')},3000); // исчезает через 3 сек
} else {
$('#output').html('Ошибка!'); // сообщение об ошибке
}
//
if(data == "1")
opacity = 1;
if(data == "0")
opacity = 0.25;
$(img).css({'opacity':opacity});
}
}
);
});
});
</
script>

и обработчик вот так
<?

include_once('../config.php');

$q = "SELECT * FROM `bg` WHERE `id` = ".$_POST['article_id'];
$result = mysql_query($q);
$num = mysql_num_rows($result);
if($num > 0) {
$bg = mysql_fetch_array($result);
if($bg['display'] == '0') {
mysql_query("UPDATE `bg` SET `display` = '1' WHERE `id` = ".$_POST['article_id']);
$article_data = '1';
} else {
mysql_query("UPDATE `bg` SET `display` = '0' WHERE `id` = ".$_POST['article_id']);
$article_data = '0';
}
//$article_data = 'Изменено '.$_POST['article_id'];
} else {
//$article_data = 'Нет '.$_POST['article_id'];
}

echo json_encode($article_data);

?>


Небольшой подвопрос: я вставил вот такую строку
setTimeout(function(){$('#output').fadeOut('fast')},3000); // исчезает через 3 сек
чтобы блок <div id="output"></div> исчезал.
Но, это работает только 1 раз, далее нажимаешь, картинка прозрачной становится, а блок уже не появляется. Если перезагрузить страницу, нажать, снова 1 раз сработает и больше не появляется. Как допилить текст?

И второй вариант скрипта подскажите пожалуйста?
То есть если нужно картинку не прозрачнойц сделать, а совсем её поменять на другую.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Kusss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1355
Пользователь №: 28976
На форуме: 5 лет, 4 месяца, 7 дней
Карма: 77




При нажатии кнопки верни видимость
$('#output').html('').show();

а что бы изменить картинку, нужно поменять атрибут
$(img).attr('src' : 'тут пусть к картинке');
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
sergeiss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Сидел он, дум великих полон - и вдаль глядел
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 14969
Пользователь №: 4190
На форуме: 8 лет, 9 месяцев, 28 дней
Карма: 443




йфцыув, если уж используешь jQuery, то используй его по полной smile.gif Например, выставляй изменение прозрачности не просто так, скачком, а через анимацию. Например, за 500 мс. Красивее будет. И понятнее пользователю.


--------------------
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
PMICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
йфцыув  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 21
Пользователь №: 40216
На форуме: 2 года, 3 месяца, 9 дней
Карма:




Kusssблагодарю за все ответы, все сделал, все работает!
sergeiss хорошая идея кстати! smile.gif но я не знаю как)) Код jquery я утащил с другого сайта и просто немного переделал для себя. Там я подозреваю сложного ничего нет, тоже нужно какую-то строчку вставить?
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
йфцыув  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 21
Пользователь №: 40216
На форуме: 2 года, 3 месяца, 9 дней
Карма:




Kusss ещё такой чисто теоритический вопрос: таким образом можно менять только через скрипт параметры объекта? Можно допустим чтобы по нажатию менялся класс с .articles на какой-то другой например articles2 а там уже будет прописано и opacity и всё остальное? Я это спрашиваю к тому, что вот допустим $(img).attr('src' : 'тут пусть к картинке'); вот эта штука работает, но тут нужно иметь 2 картинки. А у меня есть 1 файл где все иконки в столбик и только с помощью background-image: url(/admin/skin/icon2.png); background-repeat: no-repeat; background-position: 0px -270px; меняется иконки, потому что все они 15*15 пикс.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Kusss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1355
Пользователь №: 28976
На форуме: 5 лет, 4 месяца, 7 дней
Карма: 77




Цитата
Можно допустим чтобы по нажатию менялся класс с .articles на какой-то другой например articles2 а там уже будет прописано и opacity и всё остальное?

так даже лучше будет. добавлять класс.
$(img).addClass('тут класс'). /* removeClass toggleClass */


По поводу анимации : сюда загляни
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
sergeiss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Сидел он, дум великих полон - и вдаль глядел
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 14969
Пользователь №: 4190
На форуме: 8 лет, 9 месяцев, 28 дней
Карма: 443




Цитата (йфцыув @ 9.11.2015 - 00:58)
хорошая идея кстати! smile.gif но я не знаю как))

Сходи сюда http://api.jquery.com/animate/ и всё поймешь. И вообще - там весь jQuery, все его фичи. И вот тут http://api.jqueryui.com/ много полезного найдешь.


--------------------
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
PMICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
йфцыув  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 21
Пользователь №: 40216
На форуме: 2 года, 3 месяца, 9 дней
Карма:




Kusss что-то не получается со сменой класса

<script type="text/javascript" language="javascript">
$(function(){
$('.articles').on('click', function(){
var artId = $(this).data('id');
var div = $(this).find('div');
$.ajax({
url: 'mods/a1.php',
type: 'POST',
dataType: 'json',
data: {article_id: artId},
success: function(data){
if(data == "1") {
$(div).addClass('articles');
}
if(data == "0") {
$(div).addClass('articles2');
}
}
}
);
});
});
</
script>

<
style>
.
articles img {
width: 200px;
opacity: 1;
}
.articles2 img {
width: 200px;
opacity: 0.2;
}
</style>

<?
$q = "SELECT * FROM `bg` ORDER BY `id` ASC LIMIT 1";
$result = mysql_query($q);

while($ins = mysql_fetch_array($result)) {
echo '<div class="articles" data-id="'.$ins['id'].'">';
echo '<img src="/images/bg/'.$ins['name'].$ins['ext'].'">';
echo '</div>';
}
?>


Это сообщение отредактировал йфцыув - 9.11.2015 - 18:02
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
йфцыув  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 21
Пользователь №: 40216
На форуме: 2 года, 3 месяца, 9 дней
Карма:




Попробовал вот так но тоже не работает

<script type="text/javascript" language="javascript">
$(function(){
$('.articles').on('click', function(){
var artId = $(this).data('id');
var div = $(this).find('div');
$.ajax({
url: 'mods/a1.php',
type: 'POST',
dataType: 'json',
data: {article_id: artId},
success: function(data){
if(data == "1") {
$(div).addClass('articles1');
}
if(data == "0") {
$(div).addClass('articles2');
}
}
}
);
});
});
</
script>

<
style>
.
articles img {
width: 200px;
}
.articles1 img {
opacity: 1;
}
.articles2 img {
opacity: 0.2;
}
</style>

<?
$q = "SELECT * FROM `bg` ORDER BY `id` ASC LIMIT 1";
$result = mysql_query($q);

while($ins = mysql_fetch_array($result)) {
echo '<div class="articles" data-id="'.$ins['id'].'"><div>';
echo '<img src="/images/bg/'.$ins['name'].$ins['ext'].'">';
echo '</div></div>';
}
?>
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Kusss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1355
Пользователь №: 28976
На форуме: 5 лет, 4 месяца, 7 дней
Карма: 77




йфцыув
порядок выполнения у тебя совсем не правильный.
Должен быть такой (примерно): php, css , html, js

https://jsfiddle.net/58as6vtv/
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
йфцыув  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 21
Пользователь №: 40216
На форуме: 2 года, 3 месяца, 9 дней
Карма:




Kusss
что-то я не пойму сути. Скопировал код с примера один в один и не работает.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса