如何使用ajax在另一个页面中滑动表单

Posted 2023-03-27

【中文标题】如何使用ajax在另一个页面中滑动表单

【英文标题】：How can i slide a form in another page using ajax

【发布时间】：2021-10-24 09:04:41

【问题描述】：

我想通过单击按钮在我的主页中滑动包含一些内容的表单。 我正在使用 asp.net razor 页面。

这是我的场景。当我点击突出显示的按钮时

一个带有表单的 div 应该从页面的右侧滑动。该表单将允许用户添加他们的 cmets，并且 div 将添加以前的 cmets。

这是按钮点击的代码

<button type="button" title="Comments" id="RequestFormChatBox" data-id="100" class="btn btn-warning btn-sm">
                        <i class="far fa-comment" style="color:white;"></i>
                    </button>

这里是 RequestFormChatBox 页面

<div class="user-info">
    <div class="user-info-in">
        <div class="cc">Close</div>
        Comments
        <ul class="list-group">
            <li class="list-group-item">
                <b>User 1</b>
                <p>This is for testing</p>
            </li>
            <li class="list-group-item">
                <b>User 2</b>
                <p>This is for testing</p>
            </li>
            <li class="list-group-item">
                <b>User 2</b>
                <p>This is for testing</p>
            </li>
            <li class="list-group-item">
                <b>User 2</b>
                <p>This is for testing</p>
            </li>
            <li class="list-group-item">
                <b>User 2</b>
                <p>This is for testing</p>
            </li>
        </ul>
        <form>
            <textarea>Please Enter Your Comments</textarea>
            <input type="submit"/>
        </form>
    </div>
</div>

我想在 ajax 调用中滑动这个页面（div）。这样每次用户添加cmets时都会显示出来。

这是我的 Ajax 代码。但是当单击按钮时，div 显示完全破坏了设计，而不是从页面右侧滑动。

$.ajax(
    url: '/RequestFormChatBox',
    success: function (result) 
        $("#RequestFormChatBox").click(function () 
            $("#RequestFormChatBox").html(result);
            //$(".user-info").fadeIn().find(".user-info-in").animate( "right": 0 , 200);
        );
       //$("#RequestFormChatBox").html(result);
    
);

任何帮助将不胜感激。

【参考方案1】：

$("#RequestFormChatBox").html(result); 会将聊天框页面加载到按钮中。这没有意义……

试试这样的：

$("#RequestFormChatBox").click(function () 
    $.ajax(
        url: '/RequestFormChatBox',
        success: function (result) 
            $("body").append(result);
        
    );
);

您也可以在预加载的容器中使用 .html() 加载它。

【讨论】：

嗨@Alex，感谢您的回复。我试过你的代码，结果附加到正文中。我希望结果从页面右侧滑出。我尝试了淡入淡出（）选项，但它只是向下滑动并占据整个页面宽度。有没有从右边滑出的选项？

@Teena，我知道 jquery 中的 .slideUp() 和 .slideDown ，但没有向侧面滑动的命令。也许你应该看看 .animate()。是的，我的代码将其附加到正文中。您也可以使用准备好的容器将其装入。您还需要应用一些 css 将其放在正确的位置...