Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
igorek1991
0 / 0 / 1
Регистрация: 15.01.2011
Сообщений: 93
#1

Анимация ожидания Ajax ответа на кнопках - jQuery

18.12.2017, 19:52. Просмотров 294. Ответов 4
Метки нет (Все метки)

Добрый вечер форумчане.
Захотелось сделать универсальную функцию: после нажатия на кнопку (ДАННУЮ), сменить его содержимое анимацией, а при получении ответа AJAX вернуть изначальное значение. Тоесть кнопок может быть несколько на странице, но мы работаем с данной кнопкой.

HTML5
1
<button onclick="button();">Нажми на кнопку</button>
Javascript
1
2
3
4
5
6
7
8
function button() {
        var html = $(this).html();
    $(this).html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i><span class="sr-only">Loading...</span>');
    
                $.ajax({
             success: function(result) {$(this).html(html);}
                });
    }
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
18.12.2017, 19:52
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Анимация ожидания Ajax ответа на кнопках (jQuery):

Анимация ожидания ответа запроса от сервера
Помогите ребят Нигде не могу найти как сделать анимацию Допустим я ввожу...

Анимация ожидания ответа ajax запроса
Можно ли сделать анимацию загрузки такую как на этом видео: тыЦ это анимация...

После вставки ответа ajax в input запроса, ответ ajax не изменяется
Здравствуйте! В общем так, есть поле input, есть таблица с полем count....

Ожидания результата в ajax
У меня есть форма, после ввода в которую автоматически отправляется запрос...

ajax, нету ответа
Здравствуйте. Отправляю запрос на одну из страниц сайта, но в ответе ничего -...

Парсинг ответа сервера ajax
Здравствуйте, ответ от сервера приходит в формате json, вида:...

4
msheal
665 / 275 / 176
Регистрация: 05.03.2015
Сообщений: 746
18.12.2017, 22:52 #2
Ваш пример не возвращает старую разметку, наверное в этом и была проблема. Чтоб заработал ваш пример, сделать можно так:

HTML5
1
<button class="submitBtn">Нажми на кнопку</button>
Javascript
1
2
3
4
5
6
7
8
9
10
11
$('.submitBtn').on('click', function(){
   var button = $(this);
   var html = button.html();
   button.html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i><span class="sr-only">Loading...</span>');
    
    $.ajax({
        success: function(result) {
            button.html(html);
        }
    });
})
Такое было нужно?
0
igorek1991
0 / 0 / 1
Регистрация: 15.01.2011
Сообщений: 93
18.12.2017, 23:09  [ТС] #3
Цитата Сообщение от msheal Посмотреть сообщение
Такое было нужно?
Нет, у каждой кнопки есть событие onclick , где описана какая то функция. И эта функция должна получить текущий нажатый элемент и обработать его.

Функция у всех одна, но с разными переменными, допустим

Javascript
1
2
3
post_func('add');
post_func('edit');
post_func('del');
0
msheal
665 / 275 / 176
Регистрация: 05.03.2015
Сообщений: 746
18.12.2017, 23:22 #4
Инлайном ставить обработчики - это же полнейший моветон. Можно написать по-человечески:

HTML5
1
<button class="submitBtn" data-type="edit">Нажми на кнопку</button>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
$('.submitBtn').on('click', function(){
   var button = $(this);
   var type = button.data('type'); // получаем тип кнопки
   var html = button.html();
   button.html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i><span class="sr-only">Loading...</span>');
    
    $.ajax({
        success: function(result) {
            button.html(html);
        }
    });
})
Добавлено через 6 минут
Если очень хочется писать инлайном код, за который рано или поздно надают по рукам, то пишите так:

HTML5
1
<button onclick="button(this, 'edit');">Нажми на кнопку</button>
Javascript
1
2
3
4
5
6
7
8
9
function button(el, type){
  var button = $(el);
   var html = button.html();
  console.log(type)
   button.html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i><span class="sr-only">Loading...</span>');
    setTimeout(()=>{
      button.html(html);
    }, 1000)
}
0
igorek1991
0 / 0 / 1
Регистрация: 15.01.2011
Сообщений: 93
18.12.2017, 23:30  [ТС] #5
Цитата Сообщение от msheal Посмотреть сообщение
Можно написать по-человечески:
Это я привел пример на самом деле там будет что то подобное. Извиняюсь сразу за неясность, хотел узнать просто почему js не берет текущий элемент тем методом как я хочу.

HTML5
1
2
3
4
5
<button onclick="post_func('ajax','add','input1.input2.select3')">Нажми на кнопку</button>
 
ajax - это страница к которому будет отправлен запрос
add - метод
input1.input2.select3 - id форм ввода, для сбора данных
Добавлено через 5 минут
Цитата Сообщение от msheal Посмотреть сообщение
Если очень хочется писать инлайном код, за который рано или поздно надают по рукам, то пишите так:
То что надо) Благодарю
0
18.12.2017, 23:30
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.12.2017, 23:30
Привет! Вот еще темы с решениями:

Неверная обработка ответа Ajax
Доброго времени суток Обработчик в Аякс возвращает строку допустим ок. В...

Остановить скрипт после ответа от Ajax
Поставил себе плагин, Кнопку на которую нажимаешь и идет анимация загрузки. ...

Ajax, succes в зависимости от ответа html
Здравствуйте, Уважаемые! Помогите, пожалуйста в моей маленькой проблеме: ...

Ajax ожидание ответа от асинхронного запроса
Доброго времени суток. Возник вопрос. А знаний и гугла не хватает. Суть...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru