在jquery中，如何显示ajax进度图像而不将控件向右移动

发布于 2024-11-02 03:38:05 字数 500 浏览 4 评论 0原文

我有一个网页，其中有两个相邻的下拉菜单。当您更改一个下拉列表时，我会转到服务器并更新第二个下拉列表中的值。由于这需要几秒钟的时间，我下面的代码显示了等待时的 ajax 加载图像。

这个问题是，由于我使用的是插入后，当它运行时，它将第二个下拉菜单推到几个像素上，当它完成时，下拉菜单会移回来。

避免这种情况的最佳方法是什么。我以某种方式需要保留一个与图像宽度相同的占位符，这样当我显示它时，它会阻止其他所有内容移动。

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();
});

原文

i have a web page where there are 2 dropdowns next to each other. when you change one dropdown i go to the server and update the value in the second dropdown. Since this takes a few seconds, i have this code below that shows a ajax loading image while its waiting.

this issue is that since i am using insert after, when this runs, it pushes the second dropdown over a few pixels and when its complete, teh dropdown shifts back.

what is the best way to avoid this. i somehow need to keep a placeholder with the same wdith as the image so when i show it, it keeps everying else from moving.

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();
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月野兔 2024-11-09 03:38:05

位置：绝对在容器中的旋转器上，高于一切，这就是我总是这样做的。

<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>

基本上将带有ajax加载器的div放在文档中的第一个位置，并根据需要隐藏和显示它。

position:absolute on the spinner in a container above everything, is how I always do it.

<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>

Basically put the div with the ajax loader first in your document and hide and show it as necessary.

回复收藏 0 原文

高速公鹿 2024-11-09 03:38:05

如果您使用的是 jQuery UI，则可以使用 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);

If you're using jQuery UI, you can use the position method to absolutely position the spinner relative to the dropdown:

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

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

spinner.insertAfter(item);

回复收藏 0 原文

~没有更多了~