标签: jquery-blockui

如何获得Method BeginRequest&EndRequestIn UpdatePanel？(在jquery中)

function onBeginRequest()
{
     //$.blockui;
} 

function onEndRequest()
{ 
     //$.unblockui;
}

我想在进行特定的 ajax 调用时阻止当前页面，并使用 blockUI 作为消息框。我不能只用$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

我的代码如下..

bc.find('.submit').click(function (e) {
    e.preventDefault();
    if ($(this).hasClass('lock'))
        return;
    $.blockUI();
    $(this).addClass('lock');
    bc.submit();
});

var validator;
validator = bc.validate({
    ignore: '',
    rules: {
        UserName: {
            required: true
        }
    },
    messages: {
        UserName: 'must have',
    },
    submitHandler: function (form) {
        $.ajax({
            url: '/yyyy/xxxx',
            type: 'POST',
            data: postdata,
            complete: function () {
                bc.find('.submit').removeClass('lock');
            },
            success: function (data) {
                if (data.status == 'OK') {
                    $.blockUI({ message: 'OK' });
                    ......
                }
                else {
                    switch (data.status) {
                        case 'xxx':
                        ......
                    } …

我正在尝试测试jquery帖子.我发布了一个表单,想要在ajax中更新并用div上的成功表单替换(看起来像一个常见的用例).

以下代码在Firefox中运行良好,但在IE中则不行.

一个问题是来自Firefox Request.IsAjaxRequest()是真的但来自IE,Request.IsAjaxRequest()返回false

注意:我在我的控制器操作中放入Thread.Sleep作为测试,以确保我可以看到发生了什么.

这是我的观看代码:

 <div id="contact">
   <form action="/Tracker/Add" method="post">
    <fieldset id="inputbox">
       <p>

        <label>Today's number</label>   <input class="inputText" id="weight" name="weight" type="text" value="208" /></p>
        <p><label>Today's Date</label>     <input class="inputText" id="datepicker" name="date" type="text" value="03-Mar-2010" /></p>
        <p><input type="submit" value="Enter" /></p>
    </fieldset>

这是javascript/jquery代码:

<script type="text/javascript" src="../../Scripts/jquery/1.3.2/jquery-1.3.2.min.js"></script>

 <script type="text/javascript">
    $(document).ready(function() {
    $('#contact form').live('submit', function() {

            //$("#Loading").fadeIn(); //show when submitting

            $.post($(this).attr('action'), $(this).serialize(), function(data) {
                $("#contact").replaceWith($(data));
            });
            return false;
        });
    });
</script>

这是我的控制器动作:

    public ActionResult Add()
    {
         if (if (Request.IsAjaxRequest())
         {
                  //firefox will hit this …

我创建了一个不可见的登录表单,我正在使用BlockUI来显示表单.

我可以打开表单并退出表单,但是当我单击"登录"按钮时,它不会回发到服务器.

关于如何使登录按钮回发的任何想法？

注意:登录功能起作用,因为我试图将它放在页面本身而没有blockui并且它回发了.

我的登录表单

<div id="LoginDiv" class="LoginDiv">
    <input type="image" id="CloseForm" src="../Images/SiteRelated/CloseForm.jpg" style="float: right;" />
    <div style="display: inline-block; margin-top: 15px">
        Username
    </div>
    <div class="InlineBlock">
        <asp:TextBox ID="UsernameTB" Text="Or" runat="server" Style="width: 90px"></asp:TextBox>
    </div>
    <div style="clear: both;">
    </div>
    <div class="InlineBlock">
        Password
    </div>
    <div class="InlineBlock">
        <asp:TextBox ID="PasswordTB" TextMode="Password" Text="123" runat="server" Style="width: 90px;
            margin-right: 18px"></asp:TextBox>
    </div>
    <asp:Panel ID="Panel1" HorizontalAlign="Center" runat="server">
        <asp:Button ID="LoginBtn" runat="server" Text="Login" Style="width: 150px;" OnClick="LoginBtn_Click" />
    </asp:Panel>
</div>

我的Javascript

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#CloseForm').click(function () {
            $.unblockUI();
        });

        $('#Login').click(function () { …

我正在尝试使用blockUI jQuery插件.我这样包括图书馆;

<script src="http://malsup.com/jquery/block/jquery.blockUI.1.33.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

但Chrome正在展示 TypeError

Uncaught TypeError: Object [object Object] has no method 'blockUI' 

我曾尝试$.blockUI和$.fn.blockUI没有成功!

谢谢

编辑:我从一个函数调用blockUI代码,这是从按钮单击触发;

$(function () {
   $('#btnAddIssue').click(function(){
   $.blockUI();
 )};
)};

我开始使用jQuery BlockUI 插件来阻止页面的用户活动，直到在 C#/ASP.NET 端完成按钮过程。

所以我写了这个；

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.io/min/jquery.blockUI.min.js" ></script> 
<script type="text/javascript">
    $(document).ready(function () {
        $('#MyButtonID').click(function () {
            $.blockUI({ message: '<h1>Please wait..</h1>' });
        });
    });
</script>

正如你所看到的，这是一个简单的代码，阻止用户界面，当我点击asp:button这ID是MyButtonID直到它完成它的过程。这很好用。

现在，我尝试在此点击过程中根据条件创建一些警报。如果我理解清楚，现在我需要首先取消阻止我的页面，显示警报并再次阻止它，直到完成按钮过程。

这就是为什么我写了两个函数（也许我可以调用这些$.unblockUI并$.blockUI直接不呢？在我的javascript侧为）;

function UnblockUI() {
    $.unblockUI();
}
function BlockUI() {
    $.blockUI({ message: '<h1>Please wait..</h1>' });
}

据我搜索，在服务器端调用 Javascript 函数的最常见方法是使用ClientScriptManager.RegisterStartupScriptC# 中的方法。所以我试图在 C# 方面提醒一些事情作为例子；

if(condition)
{
    string script = string.Format("alert('{0}');", "Some error message");
    Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "alert", script, true);
} …

我创建了一个CalendarViewerPortlet自定义对象JS对象.在这个对象中,我存储的东西,如portlet的id和它的上下文路径.该对象还有许多自定义方法,一些用于获取/设置成员变量,一些用于执行特定的操作.

当我尝试使用"this"引用对象的功能时.在jQuery函数内部,它会爆炸.我知道在这个上下文中的术语"this"可能指的是其他东西,但我不知道如何绕过这个问题并让它引用该对象,就像我想要的那样.

这是违规代码:

jQuery.ajax({
  url: jQuery(formSel).attr("action"), 
  type: "POST", 
  data: jQuery(formSel).serialize(), 
  beforeSend: function(xhr) {
  jQuery(msgSel).hide();
  jQuery(msgSel).html("");
  jQuery(tableSel).hide();
  jQuery(pagerSel).hide();
  jQuery(cpSelector).block({
  message: "<img src='"+this.getContextPath()+"/images/icon_loading.gif' align='absmiddle' alt='Loading...' /> Fetching events..."
  });
},

注意"this.getContextPath()".这就是代码失败的地方.我试图引用我的自定义对象的getContextPath()函数.我怎样才能做到这一点？

我一直在寻找一些基于 jQuery 的解决方案来阻止<div>基于“开始”按钮的单击，并在单击“停止”按钮时解除阻止。我知道 jQuery blockUI 插件，但我不想使用它。我查看了问题JavaScript：如何在等待 ajax 响应时阻止整个屏幕中提供的解决方案，但这对我没有帮助（阻止 div 没有完全隐藏我的 div）。