Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: JQuery AJAX и анимация

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): [1] 2 »   

> Без описания
Поиск в теме | Версия для печати
Зверь
Отправлено: 04 Января, 2012 - 16:22:23
Post Id



Частый гость


Покинул форум
Сообщений всего: 243
Дата рег-ции: Окт. 2011  


Помог: 7 раз(а)
Всем привет

Помогите решить проблему, есть некий HTML блок и внутри него картинка

CODE (html):
скопировать код в буфер обмена
  1. <div class='background'><img class='delete' src='img.jpg'></div>


При клике по картинке должен плавно скрыться блок и выполниться AJAX-запрос.

Так вот, проблема в том, что блок скрывается, но после выполнения AJAX он появляется снова.
Я уже битый час не могу понять как заставить его не появляться заново.
CODE (javascript):
скопировать код в буфер обмена
  1. $(document).ready(function(){
  2.        $('.delete').live('click',function(){
  3.           $(this).parents(".background").animate({ opacity: 'hide' }, "slow",function(){
  4.                 $.post('script.php','post=1');
  5.            });
  6.         });
  7. });


Если надо могу предоставить живой пример на сервере
(Добавление)
Без ajax анимация отрабатывает нормально

(Отредактировано автором: 04 Января, 2012 - 16:24:07)

 
 Top
tuareg
Отправлено: 04 Января, 2012 - 17:23:35
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
Давайте живой пример на сервере
 
 Top
Зверь
Отправлено: 04 Января, 2012 - 17:49:24
Post Id



Частый гость


Покинул форум
Сообщений всего: 243
Дата рег-ции: Окт. 2011  


Помог: 7 раз(а)
Вот http://booklight[dot]tk кликните по кнопке удаления сообщения
 
 Top
tuareg
Отправлено: 04 Января, 2012 - 18:12:19
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
Попробуйте поменять конструкцию функции, т.е сначала посылать запрос, а потом удалять.
Кстати это будет более логичным.
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).ready(function(){
  3.        $('.delete').live('click',function(){
  4.           var thisDel=$(this).parents("div.background");
  5.           /*Здесь для проверки сделайте*/
  6.           thisDel.addClass('test');
  7.           $.post('script.php','post=1',function(){
  8.             thisDel.animate({ opacity: 'hide' }, "slow");
  9.           });
  10.         });
  11. });
  12.  
 
 Top
Зверь
Отправлено: 04 Января, 2012 - 18:22:27
Post Id



Частый гость


Покинул форум
Сообщений всего: 243
Дата рег-ции: Окт. 2011  


Помог: 7 раз(а)
Да я всяко уже перепробовал и до и после

А ваш код вообще не вызывает анимацию, как ни странно.
Только запрос посылается
 
 Top
tuareg
Отправлено: 04 Января, 2012 - 18:28:59
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
Попробуйте что-нибудь вернуть при запросе. типа ок. Или удаляйте это сообщение.
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).ready(function(){
  3.        $('.delete').live('click',function(){
  4.           $(this).parents(".background").animate({ opacity: 'hide' }, "slow",function(){
  5.                 $(this).remove();
  6.                 $.post('script.php','post=1');
  7.            });
  8.         });
  9. });
 
 Top
IllusionMH
Отправлено: 04 Января, 2012 - 18:31:36
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Зверь, а сервер что-то возвращает на удаление? Если ничего не возвращает, то анимации на успешное завершение запроса так и не будет.

А если попробовать в качестве функции обратного вызова этот вариант:
CODE (javascript):
скопировать код в буфер обмена
  1. function() {console.log("disappeared");}

При нем тоже появляется обратно?
 
 Top
Зверь
Отправлено: 04 Января, 2012 - 18:45:22
Post Id



Частый гость


Покинул форум
Сообщений всего: 243
Дата рег-ции: Окт. 2011  


Помог: 7 раз(а)
tuareg пишет:
Попробуйте что-нибудь вернуть при запросе. типа ок. Или удаляйте это сообщение.
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).ready(function(){
  3.        $('.delete').live('click',function(){
  4.           $(this).parents(".background").animate({ opacity: 'hide' }, "slow",function(){
  5.                 $(this).remove();
  6.                 $.post('script.php','post=1');
  7.            });
  8.         });
  9. });

remove уже пробовал отрабатывает анимация=>удаляется=>запрос=>блок как ни в чем не бывало появляется снова
IllusionMH пишет:
Зверь, а сервер что-то возвращает на удаление? Если ничего не возвращает, то анимации на успешное завершение запроса так и не будет.

А если попробовать в качестве функции обратного вызова этот вариант:
CODE (javascript):
скопировать код в буфер обмена
  1. function() {console.log("disappeared");}

При нем тоже появляется обратно?

Да >_<

Сейчас попробую что-нибудь вернуть и в зависимости от этого делать или нет анимацию
 
 Top
tuareg
Отправлено: 04 Января, 2012 - 18:49:08
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
Если и при удалении он появляется. То происходит рефреш этого блока. Только я не смог отловить этот момент. Другого варианта тут нет.
 
 Top
IllusionMH
Отправлено: 04 Января, 2012 - 18:57:22
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Зверь, нашел, что в примере по ссылке выше есть код
CODE (javascript):
скопировать код в буфер обмена
  1. $("#container").ajaxComplete(function(event, request, settings)
  2. {
  3.   loading_hide();  //<--place breakpoint here
  4.   $("#container").html(msg);
  5. });

Который выполняется, после нажатия на кнопку удаления.
Возможно это и есть проблема. Нужно либо поменять логику, либо добавить проверку на возвращаемый ответ.

P.S. правда не пойму как он вызывается, если запрос заменить на console.log()

(Отредактировано автором: 04 Января, 2012 - 18:58:35)

 
 Top
tuareg
Отправлено: 04 Января, 2012 - 19:02:38
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
Если это так, то тогда просто удаляйте
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $.ajax({
  3. ....
  4. ...
  5. global:false
  6. })
  7.  
 
 Top
Зверь
Отправлено: 04 Января, 2012 - 19:07:36
Post Id



Частый гость


Покинул форум
Сообщений всего: 243
Дата рег-ции: Окт. 2011  


Помог: 7 раз(а)
Нет, он выполняется только после клика по элементу постраничной навигации, иначе бы в консоли был виден еще 1 запрос, но я все таки поставил проверку и все равно не работает.
(Добавление)
tuareg пишет:
Если это так, то тогда просто удаляйте
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $.ajax({
  3. ....
  4. ...
  5. global:false
  6. })
  7.  


Ура... Спасибо тебе огромное! Улыбка

Я бы ни разу не додумался...

Еще раз спасибо, проблема решена!
(Добавление)
В общем вот конечный вариант

CODE (javascript):
скопировать код в буфер обмена
  1. $('.delete').live('click',function(){
  2.         $(this).parents(".background").animate({ opacity: 'hide' }, "slow",function(){
  3.                 $.ajax({
  4.                         type: "POST",
  5.                         url: "message.php",
  6.                         data: "post=1",
  7.                         global: false
  8.             });
  9.         });
  10. });
 
 Top
IllusionMH
Отправлено: 04 Января, 2012 - 19:15:41
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Писал до сообщения о решении проблемы.
Затер.

(Отредактировано автором: 04 Января, 2012 - 19:17:13)

 
 Top
tuareg
Отправлено: 04 Января, 2012 - 19:16:45
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
в функции
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. function loadData...
  3. $("#container").ajaxComplete(function(event, request, settings)
  4. {
  5.   alert('что-то')
  6.   loading_hide();
  7.   $("#container").html(msg);
  8. });
  9.  

По- моему вот это срабатывает
(Добавление)
Попробуй то что я указал в последнем посте.
P.S Не надо так делать в ajax запросе.
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $("#container").ajaxComplete(function(event, request, settings)
  3.  

Это надо вынести отдельно.
 
 Top
Зверь
Отправлено: 04 Января, 2012 - 19:26:20
Post Id



Частый гость


Покинул форум
Сообщений всего: 243
Дата рег-ции: Окт. 2011  


Помог: 7 раз(а)
tuareg пишет:

P.S Не надо так делать в ajax запросе.
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $("#container").ajaxComplete(function(event, request, settings)
  3.  

Это надо вынести отдельно.

event, request, settings были для тестов, забыл убрать

А если вынести, то как тогда передать в html() то что пришло с сервера?

(Отредактировано автором: 04 Января, 2012 - 19:28:05)

 
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB