Question

我正在提交表单，有时我会向用户显示一些消息。我想在点击提交按钮后将这些消息发送到jQuery fadeIn。如果提交不涉及任何AJAX，是否可以实现？

以下是Django / Python代码示例：

# View code
message = 'feedback to user'

# Template
<div id="messages">{{ message }}</div>

以上的等效PHP代码可能是：

<?php
$message = 'feedback to user';
?>
<div id="messages"><?= $message ?></div>

我希望上面的#messages在POST后淡入。我怎样才能做到这一点？

Answer 1

只需将它放在document.ready事件处理程序中，就像这样：

$(function() {
  $("#messages").fadeIn();
});

如果有一个id="messages"，它会找到它并淡入它...如果它不在那里，那很好，它不会出错。如果你想在淡入之前检查它是否有任何测试，你也可以这样做：

$(function() {
  $("#messages").filter(function() { return $(this).text() != ""; }).fadeIn();
});

在这种方法中，<div id="messages">始终存在，但只有在其中包含一些文本时才会淡入。

Answer 2

您在发布表单后会导致页面刷新，这是Web上大多数表单的典型表现，对吗？

当然，那没关系。考虑到渐进增强功能，请使用CSS保持#messages可见，然后将其隐藏在jQuery中并将其淡入：

$(function()
{
    $('#messages').hide().fadeIn();
});

fadeIn()仅仅是您在网页上设置元素动画的功能。它与Ajax请求完全无关。

Answer 3

首先，我知道这不是“完全”你订购/要求的东西，我开始像你一样，然后我想为ajax调用显示一些“罐头”的东西以及其中的定时消息，用于不同的消息所以我提出了这个问题:(请注意，将errorMessage.show();更改为errorMessage.fadein();）

    <div class="myErrorContainer">
        <div class="myErrorStatus ajaxLoading " id="myErrorStatus">
            <span id="Errorstatus" class="ui-state-error-text myErrorStatusText"></span>
        </div>
    </div>

使用CSS

显示一点ajax加载（如果你想要的话）

.ajaxLoading
{
    width: 100%;
    background-image: url("../Images/ajax-loader.indicator.gif");
    background-repeat: no-repeat;
    background-position: left middle;
}
.myErrorStatus
{
    text-align: center;
    width: 100%;
}
.myErrorStatusText
{
    color: #FF0000;
    font-weight: bold;
}

/* show message for interval */
var saveMessageText = 'Saving...';
function ShowStatus(saveMessage, message, timeInMilliseconds)
{
    var errorMessage = $("#Errorstatus");
    if (saveMessage)
    {
        errorMessage.show();
        var myInterval = window.setInterval(function()
        {
            message = message + '...';
            errorMessage.text(message);
            errorMessage.show();
        }, 1000);
        window.setTimeout(function()
        {
            clearInterval(myInterval);
            errorMessage.hide();
        }, timeInMilliseconds);
    }
    else
    {
        errorMessage.text(message);
        errorMessage.show();
        window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds);
    };
};

然后，我把它放在所有ajax调用上:(其中myUserName javascript变量有用户名）

/ * Ajax方法* /

/* show the message that data is loading on every ajax call */
var loadingMessage = 'Please wait loading data for ' + myUserName;
$(function()
{
    $("#Errorstatus")
    .bind("ajaxSend", function()
    {
        $(this).text(loadingMessage);
        $(this).show();
    })
    .bind("ajaxComplete", function()
    {
        $(this).hide();
    });
});

然后，您可以这样使用它：

ShowStatus(true, 'Update Failed with unknown Error', 4000);

注意：如果您不想使用ajax背景指示符，则可以执行$('#myErrorStatus').removeClass('ajaxloading');，然后将其替换为$('#myErrorStatus').addClass('ajaxloading');。

没有AJAX，jQuery的fadeIn可以工作吗？

3 个答案: