locked
Calling JSON Web Service using JQuery not working in asp.net content page RRS feed

  • Question

  • User1238426010 posted

    Client Code:-

    I have following code which works perfectly fine without any masterpage,but as soon as i substitute the same code in content page,it's not working.Help me find the solution for that.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#<%=txtUserName.UniqueID%>").change(function () {
                      var uname = $("#<%=txtUserName.UniqueID%>");
                      var msgbox = $("#status");
                      if (uname.val().length > 5) {
                          $.ajax({
                              type: "POST",
                              url: "WebForm1.aspx/CheckUserName",
                              data: "{'username': '" + uname.val() + "'}",
                              contentType: "application/json; charset=utf-8",
                              dataType: "json",
                              success: function (msg) {
                                  if (msg.d == 'Available') {
                                      msgbox.html('<font color="Green"> Available </font>');
                                  }
                                  else {
                                      msgbox.html(msg.d);
    
                                  }
                              }
                          });
                      }
                      else {
                          msgbox.html('<font color="#cc0000">User Name must be more than 5 characters</font>');
    
                      }
    
                  });
    
            });
    
    
     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div>
                        User Name :
      <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
    
    
                        <span id="status"></span>
    
    
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>

    Server Code:-
    [WebMethod]
    public static string CheckUserName(string username)
    DataTable dt = new BALUserMaster().Select(new BOLUserMaster() { Username = username });
        if (dt.Rows.Count > 0)
        {
            returnValue = "<font color='#cc0000'><b>'" + username + "'</b> is already in use.</font>'";
        }
        else
        {
            returnValue = "Available";
        }
        return returnValue;
    
    }

    Sunday, June 15, 2014 5:18 PM

Answers

  • User-417640953 posted

    Hi Mitesh911,

    I'm glad to see your back.

      $("#<%=txtUserName.UniqueID%>").change(function () {
      var uname = $("#<%=txtUserName.UniqueID%>");
    

    I test your code, sometimes we cannot get a TextBox (in content page) generated id by the txtUserName.UniqueID.

    What I suggest you to do is adding a cssclass to the TextBox and get it by its css class like below.

    <%@ Page Title="" Language="C#" MasterPageFile="~/year2014/month6/6-25/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplicationCsharp.year2014.month6._6_25.WebForm1" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".myUniqueTxt").change(function () {
                    var uname = $(".myUniqueTxt");
                    var msgbox = $("#status");
                    if (uname.val().length > 5) {
                        $.ajax({
                            type: "POST",
                            url: "WebForm1.aspx/CheckUserName",
                            data: "{'username': '" + uname.val() + "'}",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (msg) {
                                alert(msg.d)
                               
                            }
                        });
                    }
                    else {
                        msgbox.html('<font color="#cc0000">User Name must be more than 5 characters</font>');
    
                    }
    
                });
    
            });
    
            </script>  
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                       <ContentTemplate>
                           <div>
                               User Name :    <asp:TextBox ID="txtUserName" CssClass="myUniqueTxt" runat="server"></asp:TextBox>  <span id="status"></span> 
                           </div>
                       </ContentTemplate>
            </asp:UpdatePanel>
    
    </asp:Content>

    It works fine in my side, if any doubt, please feel free to back. Thanks.

    Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 24, 2014 9:53 PM

All replies

  • User-760709272 posted

    Try txtUserName.ClientID instead of txtUserName.UniqueID

    Sunday, June 15, 2014 6:40 PM
  • User1238426010 posted

    I tried your suggestion,but it's still not working.

    Tuesday, June 17, 2014 1:41 PM
  • User-417640953 posted

    Hi Mitesh911,

    Thanks for your post.

    I have following code which works perfectly fine without any masterpage,but as soon as i substitute the same code in content page,it's not working.Help me find the solution for that.

    First please check out whether your master page contains the "ToolkitScriptManager" as well.

    If so please make sure only one ToolkitScriptManager control between masterpage and content page.

    If you still cannot solve this issue, please share a simple demo with us and let us reproduce your scenes.

    Thanks.

    Best Regards!

    Monday, June 23, 2014 8:25 AM
  • User1238426010 posted

    Hi Fuxiang,

    Thanks for the reply.

    I follow your suggestion,but still it's not working.And i already share a demo in my first post.You can reproduce the same scene.

     

    Tuesday, June 24, 2014 1:56 PM
  • User-417640953 posted

    Hi Mitesh911,

    I'm glad to see your back.

      $("#<%=txtUserName.UniqueID%>").change(function () {
      var uname = $("#<%=txtUserName.UniqueID%>");
    

    I test your code, sometimes we cannot get a TextBox (in content page) generated id by the txtUserName.UniqueID.

    What I suggest you to do is adding a cssclass to the TextBox and get it by its css class like below.

    <%@ Page Title="" Language="C#" MasterPageFile="~/year2014/month6/6-25/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplicationCsharp.year2014.month6._6_25.WebForm1" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".myUniqueTxt").change(function () {
                    var uname = $(".myUniqueTxt");
                    var msgbox = $("#status");
                    if (uname.val().length > 5) {
                        $.ajax({
                            type: "POST",
                            url: "WebForm1.aspx/CheckUserName",
                            data: "{'username': '" + uname.val() + "'}",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (msg) {
                                alert(msg.d)
                               
                            }
                        });
                    }
                    else {
                        msgbox.html('<font color="#cc0000">User Name must be more than 5 characters</font>');
    
                    }
    
                });
    
            });
    
            </script>  
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                       <ContentTemplate>
                           <div>
                               User Name :    <asp:TextBox ID="txtUserName" CssClass="myUniqueTxt" runat="server"></asp:TextBox>  <span id="status"></span> 
                           </div>
                       </ContentTemplate>
            </asp:UpdatePanel>
    
    </asp:Content>

    It works fine in my side, if any doubt, please feel free to back. Thanks.

    Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 24, 2014 9:53 PM
  • User1238426010 posted

    Excellent! It really works for me.Thanks a lot...

    Tuesday, June 24, 2014 10:07 PM