Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2015, 23:05
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

Одинаковые эффекты на разные объекты jQuery
Доброго дня

Производится Ajax запрос

$.get( "ajax/load.php", function(data) {
  if(data){ 
     if(btn.is('[data-type="price"]')){
       modal_main.html(data.price).hide().show("fade", 1000 );
     } else if(btn.is('[data-type="callme"]')){
       modal_main.html(data.callme).hide().show("fade", 1000);
     }
  }
});


modal_main = DIV в который выгружаем data.
Как можно об играть .hide().show("fade", 1000 ); данную часть?
Что бы не прописывать к каждой выгрузке, а сделать в одном месте.
Ответить с цитированием
  #2 (permalink)  
Старый 31.03.2015, 04:33
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

А зачем тогда if(who is button)?
modal_main.html(data[btn.data('type')]).hide().show("fade", 1000 );
Ответить с цитированием
  #3 (permalink)  
Старый 31.03.2015, 05:03
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

$.get( "ajax/load.php", function(data) {
  if(data){ 
     if(btn.is('[data-type="price"]')){
       modal_main.html(data.price).hide().show("fade", 1000 );
     } else if(btn.is('[data-type="callme"]')){
       modal_main.html(data.callme).hide().show("fade", 1000);
     }
  }
});


ajax/load.php - PHP файл, в нем список TPL файлов + GET параметры к шаблону
btn - это кнопка в HTML
<!-- пример кнопки -->
<a href="#" 
     class="fc_btn icon-phone-squared"
     data-ajax="ajax_btn" 
     data-header="Заказать звонок" 
     data-type="callme">
     Заказать звонок
</a>


т.е. суть какая:
есть web-сайт, на нем "N" кол-во форм (заказать звонок, купить в один клик, обратная связь, оставить комментарий и т.п.)..
Практически все формы должны быть в модальном окне.
Логика происходящего:
1. HTML скелет модального окна
<div class="box-modal" id="ajax_modal">
   <div class="box-modal_header">
      <div class="box-modal_name"></div>
        <div class="box-modal_close">x</div>
      </div>
   <div class="box-modal_content"></div>
</div>

2. JS функция вызывающая модальное окно
$(document).on('click', '[data-ajax="ajax_btn"]', function(){
  var modal_name = $(this).attr('data-header');
  var modal_main = $('#ajax_modal').find('.box-modal_content');
  $('#ajax_modal').find('.box-modal_name').html(modal_name);
  $('#ajax_modal').modal({ /*.. тут GET AJAX ..*/});
  return false;
});

3. Ajax GET загружаем в .box-modal_content нужную нам форму в зависимости от нажатой кнопки

В зависимости от атрибутов кнопки (по которой кликнули) у нас происходит заполнение модального окна и соответственно показывается нужная форма.

- - - - - - - - -
А теперь еще возвращаемся к вопросу! Как можно записать применяемые эффекты к data.* что бы было по принцепу:
var str = $(this);

?
Ответить с цитированием
  #4 (permalink)  
Старый 31.03.2015, 05:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Лучше вернитесь к первоначальному. Что у вас записано, а записано следующее:

1) есть объект А на клиенте
2) определяется что за кнопка активировала запрос, и по значению этой кнопки определяется свойство возвращенного объекта, который надо поместить в А

Возникает вопрос - а зачем этот огород вообще нужен?

Если возвращенные данные загружаются в один и тот же объект на клиенте, а инициаторами запроса сервера выступают N кнопок, то надо полагать, что параметры запроса будут различны.
Если параметры запроса различны, а значит и север возвращает соответствующие им данные, то каким образом он может возвратить помимо нужных еще и лишние данные?
А если сервер возвращает только необходимые данные, то никаких проверок на клиенте быть не должно.

Если А - объект принимающий формы, то запрос от bt1, bt2... вернет только нужную форму (если все грамотно построено), а значит

A.html(data) - все, и к чему эти if()?

Другое дело, если по ответу сервера возвращенные данные могут загружаться в N объектов на клиенте, то свойства возвращенного объекта могут идентифицировать эти N объектов, тогда:
for(k in data) $('#'+k).html(data[k])
Ответить с цитированием
  #5 (permalink)  
Старый 31.03.2015, 06:33
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

$.get( "ajax/load.php", function(data) {
      for (key in data) {
         modal_main.html(data[key]).hide().show("fade", 1000 );
     }
});


что то подобное должно получится?

я правильно понимаю?
При клике получаем "ключ" который собственно используем в php для вызова нужного tpl?
Ответить с цитированием
  #6 (permalink)  
Старый 31.03.2015, 06:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

А у вас что сразу несколько форм сервер возвращает? Вы же пишите, что они в один объект всегда помещаются, а в момент времени запрашивается и возвращается одна форма, и зачем data[key], можно ведь html вернуть и modal_main.html(data).
А вот для обмена данными формы с сервером тут удобнее будет JSON, так как нужно будет обрабатывать ошибки в полях и отображать их.
Ответить с цитированием
  #7 (permalink)  
Старый 31.03.2015, 07:33
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187


запрос на получения шаблона формы - производится в один файл (php) он уже из массива берет нужный по (data.xxx)
а на post формы уже у каждой свой обработчик
Ответить с цитированием
  #8 (permalink)  
Старый 31.03.2015, 07:38
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

$result = array( 
  'callme' => $api->design->fetch('ajax/ajax.modal_callme.tpl'),
  'price'   =>$api->design->fetch('ajax/ajax.modal_price.tpl'));


вот собственно каким образом распределение.. в php.

Но вы навели меня на нужную линию)) комфортней будет при нажатие:
берем (скажем data-key) общаемся в load.php - вставляем наш key в result подбираем TPL файл и вставляем уже просто .html(data)
Ответить с цитированием
  #9 (permalink)  
Старый 31.03.2015, 07:53
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

laimas,
Профессор! Огроменнейшая благодарность за идею!

Вопрос снят с производства )))

Итог, ключевое:
php
$result = $api->design->fetch('ajax/ajax.modal_'.$key.'.tpl');


js
$.get( "ajax/load.php", function(data) {
  modal_main.html(data).hide().show("fade", 1000 );
});
Ответить с цитированием
  #10 (permalink)  
Старый 31.03.2015, 08:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Ну вообще можно было бы и проще:
exit($api->design->fetch('ajax/ajax.modal_'.$key.'.tpl'))

если $key определяемая POST-запросом определена условием или набором.

А на мысль должно наводить содержание вашего сайта и задачи его обслуживаемые. Например, почему бы и нет, если Ajax success всех запросов будет ссылаться всегда на один и тот же объект описывающий набор различных функций. А обмен данными всегда JSON, свойства которого определяют функцию (функции), которые будут выполнены. А это может быть помещение данных в объекты, вывод сообщений, обработка ошибок, определение значений установленным переменным, и т.п.

В общем некий диспетчер, и без всяких IF. И один запрос/ответ может определять выполнение нескольких функций на клиенте, например, поместить данные в объектах и вывеси сообщение. Но чтобы возвращалось сразу N-форм, это нонсенс.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery CSS в Chrome и FF разные Infinity178 jQuery 0 21.03.2015 15:24
Jquery post. объекты и методы-обработчики ArtJS AJAX и COMET 2 29.12.2013 22:06
Разные версии jquery Олежко jQuery 4 23.01.2013 20:44
Объекты, сформированные Ajax запросом не попадают в выборки jQuery AdeL1ne AJAX и COMET 1 13.02.2012 09:44
Как заставить jQuery считать динамические объекты append'a "на лету"? walabyn jQuery 2 08.09.2011 12:07