Как корректно заменить async: false на async: true

@irkprin · Регистрация: 26.04.2017

Author24 — интернет-сервис помощи студентам

Проблема в том, что данный код устарел, блокирует браузер на время выполнения скрипта и выдает warning:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

я понимаю, что нужно использовать колбэки, но у меня не получается корректно внести изменения, все по цепочки начинает отваливаться(

Что за tooltip? config.tooltip в любом случае (async: false или async: true) равен true, но при async: true сразу ошибка:

Uncaught TypeError: Cannot read property 'tooltip' of null

Javascript

var JCART = (function() {
 
        // This script sends Ajax requests to config-loader.php and relay.php using the path below
        // We assume these files are in the 'jcart' directory, one level above this script
        // Edit as needed if using a different directory structure
        var path = 'jcart',
            container = $('#jcart'),
            token = $('[name=jcartToken]').val(),
            tip = $('#jcart-tooltip');
 
        var config = (function() {
            var config = null;
            $.ajax({
                url: path + '/config-loader.php',
                data: {
                    "ajax": "true"
                },
                dataType: 'json',
                async: false,
                success: function(response) {
                    config = response;
                },
                error: function() {
                    alert('Ajax error: Edit the path in jcart.js to fix.');
                }
            });
            return config;
        ;
        }());
 
        var setup = (function() {
            if(config.tooltip === true) {
 
                tip.text(config.text.itemAdded);
    
                // Tooltip is added to the DOM on mouseenter, but displayed only after a successful Ajax request
                $('.jcart [type=submit]').mouseenter(
                    function(e) {
                        var x = e.pageY + 25,
                            y = e.pageX + -10;
                        $('body').append(tip);
                        tip.css({top: y + 'px', left: x + 'px'});
                    }
                )
                .mousemove(
                    function(e) {
                        var y = e.pageY + 25,
                        x = e.pageX + -10;
                        tip.css({top: y + 'px', left: x + 'px'});
                    }
                )
                .mouseleave(
                    function() {
                        tip.hide();
                    }
                );
            }

@Balanaar · 26.04.2017, 12:16

Javascript

var JCART = (function() {
 
        // This script sends Ajax requests to config-loader.php and relay.php using the path below
        // We assume these files are in the 'jcart' directory, one level above this script
        // Edit as needed if using a different directory structure
        var path = 'jcart',
            container = $('#jcart'),
            token = $('[name=jcartToken]').val(),
            tip = $('#jcart-tooltip');
 
        var config = (function() {
            var config = null;
            $.ajax({
                url: path + '/config-loader.php',
                data: {
                    "ajax": "true"
                },
                dataType: 'json',
                success: function(response) {
                    config = response;
var setup = (function() {
            if(config.tooltip === true) {
 
                tip.text(config.text.itemAdded);
    
                // Tooltip is added to the DOM on mouseenter, but displayed only after a successful Ajax request
                $('.jcart [type=submit]').mouseenter(
                    function(e) {
                        var x = e.pageY + 25,
                            y = e.pageX + -10;
                        $('body').append(tip);
                        tip.css({top: y + 'px', left: x + 'px'});
                    }
                )
                .mousemove(
                    function(e) {
                        var y = e.pageY + 25,
                        x = e.pageX + -10;
                        tip.css({top: y + 'px', left: x + 'px'});
                    }
                )
                .mouseleave(
                    function() {
                        tip.hide();
                    }
                );
            }
                },
                error: function() {
                    alert('Ajax error: Edit the path in jcart.js to fix.');
                }
            });
        ;
        }());

Примерно так. С отступами не заморачивался.

Добавлено через 1 минуту
И скобки отредактируйте. Там явно будет ошибка.

@Padimanskas · 26.04.2017, 12:36

Сообщение от irkprin

Что за tooltip?

Javascript

1	tip = $('#jcart-tooltip');

Tooltip is added to the DOM on mouseenter, but displayed only after a successful Ajax request

Сообщение от irkprin

Uncaught TypeError: Cannot read property 'tooltip' of null

"Не возможно прочитать свойство tooltip в null". То есть он делает null.tooltip. Это значит что setup не определен, по крайней мере в том контексте где он используется

@irkprin · 26.04.2017, 12:53 **[ТС]**

Ошибка исчезла, но страница стала перезагружаться при выполнении скрипта, фактически ajax не работает.

Вот http://conceptlogic.com/jcart/ в исходнике скрипта пополнение корзины идет без перезагрузки страницы.

@Padimanskas · 26.04.2017, 12:58

irkprin, когда перезагружается страница это значит что срабатывает отправка html-формы. нужно отключить действие по умолчанию, то есть сделать event.preventDefault() в обработчике события submit формы

@irkprin · 26.04.2017, 13:07 **[ТС]**

Padimanskas, дык он там есть:

Javascript

        // Add an item to the cart
        $('.jcart').submit(function(e) {
            add($(this));
            e.preventDefault();
        });
 
        // Prevent enter key from submitting the cart
        container.keydown(function(e) {
            if(e.which === 13) {
                e.preventDefault();
            }
        });
 
        // Update an item in the cart
        container.delegate('[name="jcartItemQty[]"]', 'keyup', function(){
            update($(this));
        });
 
        // Remove an item from the cart
        container.delegate('.jcart-remove', 'click', function(e){
            remove($(this));
            e.preventDefault();
        });

@senyaarseniy · 26.04.2017, 21:23

Javascript

var config = (function() {
            var config = null;
            $.ajax({
                url: path + '/config-loader.php',
                data: {
                    "ajax": "true"
                },
                dataType: 'json',
                async: false,
                success: function(response) {
                    config = response;
                },
                error: function() {
                    alert('Ajax error: Edit the path in jcart.js to fix.');
                }
            });
            return config;
        ;
        }());

этот код в любом случаем возвращает null дальше не стал смотреть так как тут всё падает)

@irkprin · 26.04.2017, 22:36 **[ТС]**

Убрал все лишнее, ошибок нет, товар в корзину добавляется. Но ajax не работает, страница перезагружается. Вот весь код без лишней лабуды:

Javascript

// jCart v1.3
// [url]http://conceptlogic.com/jcart/[/url]
 
$(function() {
    var JCART = (function() {
        var path = 'jcart',
            container = $('#jcart'),
            token = $('[name=jcartToken]').val(),
            tip = $('#jcart-tooltip');
 
        var config = (function() {
            var config = null;
            $.ajax({
                url: path + '/config-loader.php',
                data: {
                    "ajax": "true"
                },
                dataType: 'json',
                success: function(response) {
                    config = response;
                    var setup = (function() {
                    // Remove the update and empty buttons since they're only used when javascript is disabled
                    $('#jcart-buttons').remove();
        
                    // Default settings for Ajax requests
                    $.ajaxSetup({
                        type: 'POST',
                        url: path + '/relay.php',
                        success: function(response) {
                            // Refresh the cart display after a successful Ajax request
                            container.html(response);
                            $('#jcart-buttons').remove();
                        },
                        // See: [url]http://www.maheshchari.com/jquery-ajax-error-handling/[/url]
                        error: function(x, e) {
                            var s = x.status, 
                                m = 'Ajax error: ' ; 
                            if (s === 0) {
                                m += 'Check your network connection.';
                            }
                            if (s === 404 || s === 500) {
                                m += s;
                            }
                            if (e === 'parsererror' || e === 'timeout') {
                                m += e;
                            }
                            alert(m);
                        }
                    });
                }());
                },
                error: function() {
                    alert('Ajax error: Edit the path in jcart.js to fix.');
                }
            });
        ;
        }());
 
        
        // If this is not the checkout the hidden input doesn't exist and no value is set
        var isCheckout = $('#jcart-is-checkout').val();
 
        function add(form) {
            // Input values for use in Ajax post
            var itemQty = form.find('[name=' + config.item.qty + ']'),
                itemAdd = form.find('[name=' + config.item.add + ']');
            // Add the item and refresh cart display
            $.ajax({
                data: form.serialize() + '&' + config.item.add + '=' + itemAdd.val(),
                success: function(response) {
                    // Momentarily display tooltip over the add-to-cart button
                    if (itemQty.val() > 0 && tip.css('display') === 'none') {
                        tip.fadeIn('100').delay('400').fadeOut('100');
                    }
                    container.html(response);
                    $('#jcart-buttons').remove();
                }
            });
        }
        // Add an item to the cart
        $('.jcart').submit(function(e) {
            add($(this));       
            e.preventDefault();
        });
    }()); // End JCART namespace
}); // End the document ready function

@irkprin 0 / 0 / 0 Регистрация: 26.04.2017 Сообщений: 4
	26.04.2017, 12:53 [ТС]	4
	Ошибка исчезла, но страница стала перезагружаться при выполнении скрипта, фактически ajax не работает. Вот http://conceptlogic.com/jcart/ в исходнике скрипта пополнение корзины идет без перезагрузки страницы. 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	26.04.2017, 12:58	5
	irkprin, когда перезагружается страница это значит что срабатывает отправка html-формы. нужно отключить действие по умолчанию, то есть сделать event.preventDefault() в обработчике события submit формы 0

	26.04.2017, 22:36

Опции темы