2

Jquery/Javascript: Want to invoke updateNotification() Fuction after notification_count_span fade out and return false. web method is in master page.

<script type="text/javascript" >
    $(document).ready(function () {
        $("#notificationLink").click(function () {
            $("#notificationContainer").fadeToggle(300);
            $("#notification_count_span").fadeOut("slow");
            return false;
            // updateNotification()
        });

        //Document Click
        $(document).click(function () {
            $("#notificationContainer").hide();
        });
    });
    function updateNotification() {
        $.ajax({
            type: "POST",
            url: "SiteMaster.master/UpdateNotification",
            data: '{nForId: "' + $("#<%=sessionUnameHf.ClientID%>")[0].value + '" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                //alert(msg.d)
                //do nothing
            }
        });
    }
</script>

HTML Html code in master page.

 <asp:Label ID="notification_count_lbl" runat="server" Text=""></asp:Label></span>
            <asp:LinkButton ID="notificationLink" runat="server">Notifications</asp:LinkButton>
<!--<a href="#" id="notificationLink1" runat="server" onclick="updateNotification()">Notifications</a>-->
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="Repeater">
    <asp:Repeater ID="Repeater1" runat="server" EnableViewState="true" onitemcommand="view">        
<ItemTemplate > 
    <p>
<tr>
<td><asp:Label ID="Label1" runat="server" CssClass="trHeader" Text='<%#Eval("NotificationTitle")%>'/></td>
    </tr></p><p><br />
<tr class="trMessage">
<td>
    <asp:LinkButton ID="nDescLbl" runat="server" CommandName="viewCase" Text='<%#Eval("NotificationDescription")%>' CssClass="trMessage"></asp:LinkButton>
    <asp:Label ID="Label2" runat="server" Text='<%#Eval("NotificationID")%>'></asp:Label>
    <asp:HiddenField ID="nIdHf" runat="server" Value='<%#Eval("NotificationID")%>'/>
</td>
    </tr></p><p><br />
<tr class="trFooter">
<td>
    <asp:Label ID="Label3" runat="server" CssClass="trFooter" Text='<%#Eval("NotificationDate")%>'/></td>
    </tr></p>
    <br />
    <hr style="color:darkgray;"/>
    </ItemTemplate>
    </asp:Repeater>
</div>
<div id="notificationFooter"><a href="Home.aspx" style="color:#006699;">See All</a></div>
</div>

WebMethod webmethod in master page.

[System.Web.Services.WebMethod]
public static string UpdateNotification(string nForId)
{
    string returnValue = string.Empty;
    try
    {
        using (SqlConnection connection = ConnectionManager.GetDatabaseConnection())
        {
            SqlCommand cmd = new SqlCommand("UpdateNotification", connection);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@nForId", nForId);
            returnValue = cmd.ExecuteScalar().ToString();
            connection.Close();
        }
    }
    catch
    {
        returnValue = "error";
    }
    return returnValue;
}
Deepak
  • 97
  • 1
  • 2
  • 8

1 Answers1

5

It is not possible due to MasterPages being a server side resource that will not be served by IIS, which is being referenced in your $.ajax call.

If you require that multiple content pages be able to access a WebMethod, move your code to a Web Service (ASMX) instead.

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class SiteService: System.Web.Services.WebService
{
    [WebMethod]
    public static string UpdateNotification(string nForId)
    {
        string returnValue = string.Empty;
        try
        {
            using (SqlConnection connection = ConnectionManager.GetDatabaseConnection())
            {
                SqlCommand cmd = new SqlCommand("UpdateNotification", connection);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@nForId", nForId);
                returnValue = cmd.ExecuteScalar().ToString();
                connection.Close();
            }
        }
        catch
        {
            returnValue = "error";
        }
        return returnValue;
    }
}

$.ajax({
    type: "POST",
    url: "SiteService.asmx/UpdateNotification",
    ...

If the only purpose of #notificationLink is to invoke javascript, then you can get rid of the server control.

<a id="notificationLink">Notifications</a>

$("#notificationLink").click(function (e) {
    e.preventDefault();
    $("#notificationContainer").fadeToggle(300);
    $("#notification_count_span").fadeOut("slow");
    updateNotification();
});

Read more: event.preventDefault()

Goran Mottram
  • 6,244
  • 26
  • 41
  • Instead, we could use Web-API to define the server side method. And can call this method from the client side script. It would be easier but have to make some additional code changes such as setting up of the route in the Global.asax.cs file. Ref is http://www.webdevelopmenthelp.net/2014/05/using-web-api-with-web-forms.html – Karan Dec 03 '15 at 10:09
  • I suggest you use your browser console to check for errors and test if the click event is being triggered. – Goran Mottram Dec 03 '15 at 11:43
  • .fadeToggle() and .fadeOut() is executing. – Deepak Dec 03 '15 at 11:45
  • You should be seeing either the ajax request/response or at least an error saying that it can't find updateNotification(). I'm not sure what else to suggest. Sorry. – Goran Mottram Dec 03 '15 at 12:12
  • If this is in an asmx file it should not be static according to the answer here https://stackoverflow.com/questions/20735178/unknown-web-method-parameter-name-methodname. Couldn't get this to work until I removed the "static". – Mike Weiss Sep 27 '22 at 19:48