Postback to the server throws error after web service call in the page

I am trying to do all server interactions of telerik control through web service call using .asmx page and ajax call in Javascript.

On Javascript dropdown OnChange event, it works perfectly by getting JSON data and it binds well with no issues.

Script:

<script type="text/javascript">
        function getproduct_details(e) {
            var product = $("#<%=cbo_productname.ClientID%>").val();
            var final_product = product.replace(/\s/g, '&&');
            //var cborejectrating = $find("<%= cbo_productname.ClientID%>");
            //var product = cborejectrating.get_value();
            var obj = {
                product_name: final_product
            };

            if (product == "") {
                $('#<%=hdnproduct_gid.ClientID%>').val("");
                $('#<%=cboproductgroup.ClientID%>').val("");
                $('#<%=txt_ProductCode.ClientID%>').val("");
                $("[id*=cbo_productname]").val(""); 
                $('#<%=hdnProductUOM.ClientID%>').val("");
                $("[id*=txt_displayfield]").val("");
            }
            else {
                $.ajax({

                    type: "POST",
                    url: "../ems_service/crm_service.asmx/product_details",
                    //data: '{product_name:"' + "'" + final_product + "'" + '"}',
                    data: JSON.stringify(obj),


                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        var obj = JSON.parse(data.d)

                        $('#<%=hdnproduct_gid.ClientID%>').val(obj[0].product_gid);
                        $('#<%=cboproductgroup.ClientID%>').val(obj[0].productgroup_gid);
                        $('#<%=txt_ProductCode.ClientID%>').val(obj[0].product_code);
                        $("[id*=txt_displayfield]").val(product);
                        $("[id*=cboUOM]").val(obj[0].productuom_name);
                        $('#<%=hdnProductUOM.ClientID%>').val(obj[0].productuom_gid);
                        jQuery.removeData();

                    },
                    failure: function () {
                        alert("Server Failure");
                    },
                    error: function () {
                        alert("Server Error");
                    }

                });


            }
        }
    </script>

Asmx page:

 <WebMethod(Enablesession:=True), ScriptMethod(ResponseFormat:=ResponseFormat.Json, UseHttpGet:=False)> _
    Public Function product_details(ByVal product_name As String)
        objdbconn.OpenConn()
        Dim product_value As String = Replace(Replace(product_name, "'", ""), " ", "")
        msSQL = "Select distinct a.product_gid,a.product_code,a.productgroup_gid,d.productgroup_name,c.productuom_gid,c.productuom_name " & _
                  " from pmr_mst_tproduct a" & _
                  " left join pmr_mst_tproductuomclass b on a.productuomclass_gid = b.productuomclass_gid" & _
                  " left join pmr_mst_tproductuom c on a.productuomclass_gid= c.productuomclass_gid" & _
                  " left join pmr_mst_tproductgroup d on a.productgroup_gid=d.productgroup_gid" & _
                  " where a.product_name =  '" & Replace(product_name, "&&", " ") & "' "
        ds_table = objdbconn.GetDatatable(msSQL)
        result = objcmn.DataTable2JSON(ds_table)
        'data = "{'product_gid':'" + odjreader.Item("product_gid").ToString + "','product_code':'" + odjreader.Item("product_code").ToString + "','productgroup_gid':'" + odjreader.Item("productgroup_gid").ToString + "','productgroup_name':'" + odjreader.Item("productgroup_name").ToString + "','productuom_gid':'" + odjreader.Item("productuom_gid").ToString + "','productuom_name':'" + odjreader.Item("productuom_name").ToString + "'}"
        objdbconn.CloseConn()
        Return result
    End Function

ASPX Page :

<telerik:RadComboBox ID="cbo_productname" runat="server" AllowCustomText="true" DataTextField="product_name"
                                                EnableItemCaching="true" ShowMoreResultsBox="true" EnableVirtualScrolling="true" OnChange="javascript:getproduct_details(this);"
                                                MarkFirstMatch="true" Filter="StartsWith" DataValueField="product_gid" EmptyMessage="Select Product"
                                                EnableLoadOnDemand="true" Width="85%" ItemsPerRequest="20" DataSourceID="ds_cboproduct"
                                                EnableAutomaticLoadOnDemand="true" AutoPostBack="false" ZIndex="10000000" Skin="WebBlue">
   </telerik:RadComboBox>

Rendered HTML:

<input id="ctl00_Content_cbo_productname_Input" class="rcbInput rcbEmptyMessage" type="text" value="Select Product" name="ctl00$Content$cbo_productname" autocomplete="off">

After OnChange Event is triggered, All server side postbacks of the page throws error as below :

Solution

Use the RadComboBox client-side API (set_value() and get_value()) instead of the jQuery val() method. Read more about them here:

The same goes for any other Telerik UI for ASP.NET AJAX control. Probably you have a RadTextBox or something (the stack trace goes through the parent RadInput class) so you should also use its own API rather than jQuery. From your code, I suppose cboproductgroup is a RadComboBox, txt_ProductCode is a RadTextBox and maybe txt_displayfield and cboUOM too.