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

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

Форум программистов > JavaScript: для новичков > THIS для AJAX как правильно написать?

Автор: Cheizer 9.9.2016, 20:37

Дорогие друзья, подскажите как реализовать THIS на JS.

Ситуация такая, есть JS файл обработчик формы. Который обрабатывает данные с формы и отправляет их методом AJAX на php файл для отправки.
У формы после отправки, функция showFu() показывает текст при удачной отправке, мол все отправилось бла бла бла.

Но вот от момента отправки и ответом от сервера, есть секунды ожидания.  Которые я решил занять гифкой загрузки.
Добавил в js обработчик две функции stopLoader  и startLoader. Которые показывают и скрывают gif. Вызвал эти функцию в AJAX запросе.

Но вот проблема, форм на странице много, и когда GIF показывается для одной, он так же показывает и для другой формы.

ВОПРОС, как добавить в JS код THIS? Что бы это все работало для текущей формы?????

вот HTML форма с блоком loadImg, и таких форм несколько на странице.

Код


  <form id="form1" class="arctform">    
        
                    <div class="loadImg"></div>

                    <div class="success_wrapper">
                        <div class="success" style="display:none;">
                            <strong>ЗАЯВКА ОТПРАВЛЕНА!</strong>
                        </div>
                    </div>

 <input type="text" value="" placeholder="Введите ваше имя:">
<a href="#" data-type="submit">ОТПРАВИТЬ</a>
</form>

Вот код, он большой, но оставил только необходимое, код не мой. Пытаюсь добавить в него функционал и никак :( подскажите куда копать?

Код


(function ($) {
    $.fn.forms = function (o) {
        return this.each(function () {
            var th = $(this),
                _ = th.data('forms') || {
                    successCl: 'success',
                    successShow: '6000',
                    mailHandlerURL: '/js/Handler.php',
                  
                    submitFu: function () {
                            $.ajax({
                                type: "POST",
                                url: _.mailHandlerURL,
                                data: {
                                    start: _.startLoader($(_.form))
                                },
                                 
                                success: function () {
                                    _.stopLoader(_.form)
                                    _.showFu()
                                }
                            })
                            
                    },
                    showFu: function () {
                        _.success.slideDown(function () {
                            setTimeout(function () {
                                _.success.slideUp()
                                _.form.trigger('reset')
                            }, _.successShow)
                        })
                    },
                    
                     init: function () {
                        _.form = _.me
                        _.labels = $('label', _.form)
                        _.preFu()
                        _.controlsFu()
                        _.form
                            .bind('submit', function () {
                                if (_.validate)
                                    _.submitFu()
                                else
                                    _.form[0].submit()
                                return false
                            })
                    }
                    
stopLoader: function () 
{$(".loadImg").hide()}, 
           
startLoader: function () 
{var imgObj = $(".loadImg")imgObj.show()},

           }
        })
    }
})(jQuery)

Автор: ksnk 10.9.2016, 12:14

У тебя в объекте есть переменная _, которая показывает на сам объект. Вот он и есть тот самый this, который тебе нужен.