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

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

0 голосов
/ 27 декабря 2011

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

Если я добавлю источник индикатора с помощью src = "ajax-loader.html", вызов ajax оставляет его на месте и не заменяет его данными.Если я добавлю источник индикатора с помощью .load («ajax-loader.html»), то перед вызовом ajax он вообще не будет показан.Если я добавлю его в вызов ajax в событии beforesend, он тоже не будет показан.Если я сделаю два вызова 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. Использование beforesend

`

   $.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);   
    },
});

`

Ответы [ 3 ]

0 голосов
/ 27 декабря 2011

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

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

0 голосов
/ 27 декабря 2011

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

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

0 голосов
/ 27 декабря 2011

Попробуйте: 

$.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 принимает двойные кавычки (") вместо одинарных (')

...