Добавление HTML к элементу страницы с помощью ajax onclick

Чтобы иметь индикатор при выполнении запроса ajax, я получил информацию о том, что у меня должен быть индикатор с анимированным gif, помещенным в элемент страницы, а затем при успешном выполнении функции ajax заменить данные.

Если я добавлю источник индикатора с src="ajax-loader.html", вызов ajax оставит его на месте и не заменит данными. Если я добавлю источник индикатора с помощью .load("ajax-loader.html"), перед вызовом ajax он вообще не отображается. Если я добавлю его в вызов ajax в событии перед отправкой, он также не будет отображаться. Если я делаю два вызова ajax, один для загрузки индикатора, другой для загрузки данных, происходит то же самое. Должен быть способ показать индикатор в этом простом коде.

Это HTML для элемента страницы.

   <iframe id="lcupco" style="position: relative; top: 5px; width: 100%; height: 200px; border: 2px solid grey; margin-bottom: 15px;"></iframe>

Это HTML для индикатора.

<html>
<head></head>
<body>
    <img src='images/ajax-loader.gif'/>
</body>
</html>

это код

  1. Вызов .load

    $(document).ready(function(){
$('#lcupco').load("ajax-loader.html");});

$.ajax({   
    url: 'luxcal/index.php?cP=40',   
    cache: false,
    async: true,
    success: function(data) {
    $('#lcupco').html(data);   
    },
});

  2. Использование перед отправкой

` 

   $.ajax({
            url: 'luxcal/index.php?cP=40',   
            cache: false,
            async: true,
            beforeSend: function() { 
                $('#lcupco').load('ajax-loader.html');
                // $('#lcupco').html('<html>Initializing calendar...</html>'); //simple text didn't load either.
            },
            success: function(data) {
            $('#lcupco').html(data);   
            },
    });
  1. Использование двух вызовов ajax: один для индикатора и один для данных

`

$.ajax({   
    url: 'ajax-loader.html',   
    cache: false,
    async: true,
    success: function(data) {
    $('#lcupco').html(data);   
    },
});


$.ajax({   
    url: 'luxcal/index.php?cP=40',   
    cache: false,
    async: true,
    beforeSend: function() { 
        $('#lcupco').html('<html>Initializing calendar...</html>');
    },
    success: function(data) {
    $('#lcupco').html(data);   
    },
});

`


javascript ajax indicator
person user823527    schedule 27.12.2011    source источник
comment
Ммм, все это странно. Почему вы пытаетесь обновить содержимое iframe (у которого, кстати, нет src. Кроме того, если вы хотите пройти маршрут iframe, не могли бы вы просто обновить src iframe, чтобы получить контент (не требуется ajax) Кроме того, вы могли бы просто наложить img загрузчика, не вызывая отдельную страницу?   -  person JoeyP    schedule 27.12.2011

Ответы (3)


arrow_upward
0
arrow_downward

Вы можете добавить GIF-файл предварительного загрузчика на страницу индекса. Нет необходимости загружать его отдельно. Затем при загрузке iframe вы можете скрыть или удалить его. Демонстрацию можно посмотреть здесь: http://jsfiddle.net/diode/dAdtU/. Здесь источник iframe устанавливается при нажатии кнопки загрузки. Это можно сделать на готовой странице или даже указать источник напрямую. Когда загрузка даже срабатывает, предварительный загрузчик удаляется.

Используя ajax, вы можете загружать html-контент для замены/изменения внутреннего html определенного элемента на странице (div, p, ul и т. д.). Но использовать его для загрузки всей страницы не рекомендуется.

person Diode    schedule 27.12.2011
comment
Это правда, я мог бы поместить это изображение на первую страницу. Рассмотрю этот вариант как альтернативу. Но так как индикатор на самом деле будет отображаться на слайде, который не виден при загрузке страницы. Код для отображения и скрытия индикатора несколько запутан. Но если это сработает, мне, возможно, придется это сделать. - person user823527; 27.12.2011

arrow_upward
0
arrow_downward

Попробуй это:

$.ajax({
                url: 'luxcal/index.php?cP=40',   
                cache: false,
                async: true,
                beforeSend: function() { 
                    $('#lcupco').append($('<img class="indic" src="images/ajax-loader.gif"/>'));
                },
                success: function(data) {
                    $('#lcupco', '.indic').remove();
                    $('#lcupco').html(data);   
                },
        });

Также не забывайте, что атрибут src берет двойные кавычки (") вместо одинарных (')

person fso    schedule 27.12.2011
comment
Имеет смысл просто добавить изображение к элементу. Но это не решило проблему. Может быть, iframe не нравится это? Я добавил теги ‹html›‹/html› вокруг изображения, но это не помогло. Спасибо, что напомнили мне об атрибуте src. - person user823527; 27.12.2011

arrow_upward
0
arrow_downward

Возможным объяснением всех эффектов может быть просто то, что вы не можете установить внутренний HTML или загрузить содержимое iframe, потому что браузер определяет содержимое iframe на основе его атрибута src.

Обычно вы все равно не будете использовать iframe для асинхронного вызова, простой div должен работать. С div установка html перед (будь то с функциями html() или load()) и замена его в полном обработчике будет работать нормально.

person Tomas Vana    schedule 27.12.2011