jquery function returning nothing

Jun 25 2013 8:40 AM
I am created a jquery function ShowAvailability(). This function calls a web service to check email existence into the database and return either true or false. From the webservice side it is returning either true or false but it comes to jquery side it is showing undifined.

WebService.asmx
----------------------------------

 [WebMethod]
        public string CheckUserNames(string Email)
        {
            IFileSystem objFileSystem = null;
            string strResult = string.Empty;
            try
            {
                objFileSystem = new FileSystemDAL();
                strResult = objFileSystem.CheckUserName(Email);
            }
            catch (Exception ex)
            {

                throw ex;
            }
            return strResult;
        }

Page.ascx
---------------------

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CreateEditAccount_UC.ascx.cs" Inherits="FileSystem.UI.UserControls.CreateEditAccount_UC" %>

<%--this javascriptis used to show the message after valid statement.--%>
    <script type="text/javascript">
//        jQuery.validator.setDefaults({
//            debug: true,
//            success: "valid",
//            submitHandler: function () {
//                alert("submitted!");
//                var Email = $("#txtEmail").val();
//                var dataString = 'Email=' + Email;
//                alert(dataString);
//                $.ajax({
//                    type: "GET",
//                    url: "InputAndOutput_WS.asmx/CheckUserName",
//                    data: dataString,
//                    //                    contentType: "application/json; charset=utf-8",
//                    //                    dataType: "json",
//                    success: OnSuccess,
//                    failure: function (response) {
//                        alert(response);
//                    }
//                });
//                alert("Ashutosh: " + dataString);
//            }
//        });

        function ShowAvailability() {
            var Email = $("#txtEmail").val();
            var dataString = 'Email=' + Email;
            $.ajax({
                type: "POST",
                url: "InputAndOutput_WS.asmx/CheckUserNames",
                data: $.stringify(dataString),
                contentType: "application/xml; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response);
                }
            });
        }

        function OnSuccess(response) {
            var mesg = $("#mesg")[0];
            alert(response);
            switch (response.d) {
                case "true":
                    mesg.style.color = "green";
                    mesg.innerHTML = "Available";
                    break;
                case "false":
                    mesg.style.color = "red";
                    mesg.innerHTML = "Not Available";
                    break;
                case "error":
                    mesg.style.color = "red";
                    mesg.innerHTML = "Error occured";
                    break;
            }
        }
        function OnChange(txt) {
            $("#mesg")[0].innerHTML = "";
        }
    </script>

<%--write the following javascript for passing the parameter for jquery--%>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#FileSystemform").validate({
                rules: {
                    <%=txtFirstName.UniqueID %>: {minlength: 5,required: true},
                    <%=txtLastName.UniqueID %>: {minlength: 5,required: true},
                    <%=txtEmail.UniqueID %>: {required: true},
                    <%=txtPassword.UniqueID %>: {minlength: 5,required: true},
                    <%=txtRetypePassword.UniqueID %>: {minlength: 5,equalTo: "#txtPassword",required: true}
                },
                messages: {
                    <%=txtFirstName.UniqueID %>:{required: "Plaese enter your first name.",minlength: "First name must be atleaet of 5 characters."},
                    <%=txtLastName.UniqueID %>:{required: "Plaese enter your last name.", minlength: "Last name must be atleaet of 5 characters."},
                    <%=txtEmail.UniqueID %>:{ required: "Plaese enter your valid Email Id."},
                    <%=txtPassword.UniqueID %>:{ required: "Plaese enter Password."} 
               }
            });
        });
    </script>
<table style="border: solid 1px navy; background-color: #d5d5d5; width: 100%;">
    <tr>
        <td colspan="2">
            <strong>Create Account</strong></td>
    </tr>
    <tr>
        <td style="width: 117px;">
            First Name</td>
        <td>
            <asp:TextBox ID="txtFirstName" runat="server" ClientIDMode="Static" Width="242px"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td style="width: 117px;">
            Last Name</td>
        <td>
            <asp:TextBox ID="txtLastName" runat="server" ClientIDMode="Static" Width="242px"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td style="width: 117px;">
            Email</td>
        <td>
            <asp:TextBox ID="txtEmail" runat="server" ClientIDMode="Static" CssClass="email" Width="242px"></asp:TextBox>
             <span id="mesg" runat="server"></span>
        </td>
    </tr>
    <tr>
        <td style="width: 117px;">
            Password</td>
        <td>
            <asp:TextBox ID="txtPassword" runat="server" ClientIDMode="Static" TextMode="Password" onClick="ShowAvailability();" Width="242px"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td style="width: 117px;">
            Renter</td>
        <td>
            <asp:TextBox ID="txtRetypePassword" runat="server" ClientIDMode="Static" TextMode="Password" 
                Width="242px"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" 
                Width="108px" />
        </td>
    </tr>
</table>

I am calling the Jquery function ShowAvailability() on txtPassword OnClick event. 

Please help me to show value undifined to either true or false.


Answers (2)

1
Venkatesh Kumar

Venkatesh Kumar

  • 0
  • 6.5k
  • 1.5m
Jun 25 2013 10:35 AM
Please add script method attribute in WebMethod and check it. http://msdn.microsoft.com/en-us/library/system.web.script.services.scriptmethodattribute(v=vs.100).aspx
0
Iftikar Hussain

Iftikar Hussain

  • 0
  • 12.6k
  • 450.3k
Jun 26 2013 4:32 AM
Hi,
   Please modify your JQuery method ShowAvailability() as shown below 
  
   function ShowAvailability() {
        var email = $("#txtEmail").val();
        $.ajax({
            type: "POST",
            url: "InputAndOutput_WS.asmx/CheckUserNames",
            contentType: "application/json; charset=utf-8",
            data: '{"Email":"' + email + '"}',
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response);
            }
        });
    }

and in your WebService include Script block

   [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 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 InputAndOutput_WS : System.Web.Services.WebService
    {

Please let me know if you need more information

Regards,
Iftikar

Remember to click "Mark as Answer" on the post, if it helps you.