Вызов функции jquery из кода в asp.net не работает

Я вызываю функцию jquery после вставки записи в базу данных...

ScriptManager.RegisterClientScriptBlock(LbOk, typeof(LinkButton), "json",
                             "topBar('Successfully Inserted');", true);

Я включил это на моей главной странице для выполнения функции jquery после обратной передачи,

<script type="text/javascript">
    function load() {
 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
      }
    function EndRequestHandler()
       {
           topBar(message);
     }


 function topBar(message) {
    alert(a);
    var alert = $('<div id="alert">' + message + '</div>');
    $(document.body).append(alert);
    var $alert = $('#alert');
    if ($alert.length) {
        var alerttimer = window.setTimeout(function() {
            $alert.trigger('click');
        }, 5000);
        $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function() {
            window.clearTimeout(alerttimer);
            $alert.animate({ height: '0' }, 200);
        });
    }
}
    </script>

<body onload="load();">

Но это, похоже, не работает... Любое предложение..

Ответ 1

Вот полный рабочий пример:

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" %>
<script type="text/C#" runat="server">
    protected void BtnUpdate_Click(object sender, EventArgs e)
    {
        // when the button is clicked invoke the topBar function
        // Notice the HtmlEncode to make sure you are properly escaping strings
        ScriptManager.RegisterStartupScript(
            this, 
            GetType(), 
            "key", 
            string.Format(
                "topBar({0});", 
                Server.HtmlEncode("Successfully Inserted")
            ), 
            true
        );
    }    
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        function topBar(message) {
            var alert = $('<div id="alert">' + message + '</div>');
            $(document.body).append(alert);
            var $alert = $('#alert');
            if ($alert.length) {
                var alerttimer = window.setTimeout(function () {
                    $alert.trigger('click');
                }, 5000);
                $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
                    window.clearTimeout(alerttimer);
                    $alert.animate({ height: '0' }, 200);
                });
            }
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">

    <asp:ScriptManager ID="scm" runat="server" />

    <asp:UpdatePanel ID="up" runat="server">
        <ContentTemplate>
            <!-- 
                 You could have some other server side controls 
                 that get updated here 
            -->
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger 
                ControlID="BtnUpdate" 
                EventName="Click" 
            />
        </Triggers>
    </asp:UpdatePanel>

    <asp:LinkButton 
        ID="BtnUpdate" 
        runat="server" 
        Text="Update" 
        OnClick="BtnUpdate_Click" 
    />

    </form>
</body>
</html>

Ответ 2

Предполагая, что ваш код-код работает во время обновления UpdatePanel, может быть плохое взаимодействие между вашим обработчиком EndRequest и вашей регистрацией кода? topBar() должен получать вызов дважды, один раз с сообщением "Успешно вставленный", а затем один раз с параметром undefined в EndRequest (если только переменная сообщения не определена здесь, мы не можем видеть здесь).

Также имейте в виду, что $('#alert') может возвращать более одного элемента. Если topBar() вызывается более одного раза, это, вероятно, так.

Как сделать что-то подобное, для начала, смягчить этот непредвиденный побочный эффект:

function topBar(message) {
  var $alert = $('<div/>');

  $alert.text(message);

  $alert.click(function () {
    $(this).slideUp(200);
  });

  $(body).append($alert);

  // Doesn't hurt anything to re-slideUp it if it already
  //  hidden, and that keeps this simple.
  setTimeout(function () { $alert.slideUp(200) }, 5000);
}

Это не устраняет проблему EndRequest и Register * Script, выполняющих topBar(), но это должно препятствовать им в конфликте, чтобы вы могли видеть, что происходит лучше.

Дайте нам попробовать и сообщите нам, если это изменит ситуацию.

Ответ 3

В Chrome и Firefox единственная проблема, с которой я столкнулся, - это var alert, имя которой совпадает с именем alert().

    function topBar(message) {
        alert(message);
        var alertDiv = $('<div id="alert">' + message + '</div>');
        $(document.body).append(alertDiv);
        var $alert = $('#alert');

Возможно, ваш тэг body не загружен во время выполнения script, что означает, что ссылка $(document.body) будет пустой - в какой jquery будет без умолку добавить атрибут предупреждения. В любом случае, никогда не повредит ваши вызовы в событии $(document).ready:

    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "json",
                         "$(document).ready(function() { topBar('Successfully Inserted');});", true);

Ответ 4

Это не отвечает на ваш вопрос напрямую, но больше подходит для передачи другого метода для вызова методов страниц без использования панелей обновлений, но непосредственно из jQuery.

Просто украсьте свой метод страницы (в частичном классе кода), например (он должен быть статическим):

[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json, XmlSerializeString=true)]
public static bool UpdateDatabase(string param1 , string param2)
{
    // perform the database logic here...

    return true;
}

Затем вы можете вызвать этот метод страницы прямо из метода jQuery $.ajax:

$("#somebutton").click(function() {

  $.ajax({
    type: "POST",
    url: "PageName.aspx/UpdateDatabase",
    data: "{ param1: 'somevalue', param2: 'somevalue' }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
      if (data.d) {
        topBar("success!");
      } else {
        topBar("fail");
      }
    }
  });

});

Это очень просто и намного более чистое, что пытается зарегистрировать скрипты. Нет необходимости создавать веб-службу.

Это отличная статья:

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/