В jquery, как показать изображение прогресса AJAX без управления сдвигом вправо - PullRequest
Новая
       30

В jquery, как показать изображение прогресса AJAX без управления сдвигом вправо

3 голосов
/ 18 апреля 2011

У меня есть веб-страница, где есть 2 выпадающих рядом друг с другом. когда вы меняете одно раскрывающееся меню, я иду на сервер и обновляю значение во втором раскрывающемся списке. Так как это занимает несколько секунд, у меня есть этот код ниже, который показывает изображение загрузки ajax во время ожидания.

эта проблема заключается в том, что, поскольку я использую вставку после, при запуске она выдвигает второе раскрывающееся меню на несколько пикселей, а когда оно завершается, раскрывающееся меню сдвигается назад.

каков наилучший способ избежать этого. Мне как-то нужно сохранить заполнитель с тем же wdith, что и на изображении, поэтому, когда я его показываю, он не дает двигаться никому другому. 

var spinner = $("<img src='/Content/images/ajax-loader.gif' />").insertAfter(item);

$.getJSON("/GetId/" + item.val(), function (data) {
    if (data.Id > 0) {
        $("#SecondDropdown").val(data.Id);
    }
    spinner.remove();
});

Ответы [ 2 ]

2 голосов
/ 18 апреля 2011

позиция: абсолютная на счетчике в контейнере над всем, как я всегда это делаю. 

<body>
    <div id='ajax_loader'></div>
    <div>
        <select name='1'>
            <option value='yes'>Yes</option>
            <option value='no'>No</option>
        </select>
        <select name='2'>
            <option value='yes'>Yes</option>
            <option value='no'>No</option>
        </select>
    </div>
</body>

Сначала поместите div с загрузчиком ajax в ваш документ, спрячьте и покажите его по необходимости.

0 голосов
/ 18 апреля 2011

Если вы используете пользовательский интерфейс jQuery, вы можете использовать метод position для абсолютного позиционирования счетчика относительно выпадающего списка: 

var spinner = $('<img src="/Content/images/ajax-loader.gif" />');

spinner.position({
    my: "left top",
    at: "right top",
    of: item,
    collision: "fit"
});

spinner.insertAfter(item);
...