$.ajax json method does not hit the web method

Question

When this function is hit , it does not call my function in code behind? Why could it be doing this? How can I fix this error.

$(document).ready(function() {
           $('[id$=btn_Update]').click(function() { 

           var reten = $('[id$=txt_Reten]').val();
            var i=0; 
            var selectValues = "";
            var ProdID = new Array();         
            $("#lst_ProdId option").each(function() {  
                 selectValues = selectValues + $(this).text() + ",";                 
                 ProdID[i] = $(this).text();
                 i++;

             });  
             for(var j=0; j < ProdID.length;j++)
             {
               // alert(ProdID[j]);
             }

          var params = "{'ProdID':'" + ProdID + "','RetenP':'" + reten + "'}";
             $.ajax({
                    type: "POST",
                    url: "/ProductPricing/Products/RetenPeriod.aspx/UpdateRetenPeriod",
                    data: params,
                    contentType: "application/json; charset=utf-8",                    
                    datatype: "json",
                    success: function(result) {
                        alert("sucess");
                    },
                    error:function(e) {
                        alert(e.statusText);
//                        if(errorThrown != null)
//                            alert(textStatus+ ":"+errorThrown);
//                        else
//                            alert("fail");
                    }
                    });             
             return false;
             });
             return false;
        });

This is my webmethod in code behind:

[WebMethod]
public static bool UpdateRetenPeriod(string[] ProdID,string RetenP)  
{
     for (int i = 0; i < ProdID.Length; i++)
     {
        update(ProdID[i],RetenP);
      }

    return true;

}

Answer 1

Does it call the error method?

You need to return JSON. Not a boolean. Perhaps something like {success: true}.

Then:

success: function(data) {
   if(data.success) {
       ...
   }

   else {
      ...
   }
}

jQuery expects JSON and will throw an error if it doesn't receive well-formed JSON. Also, what is the exact response you're getting back? You can use something like Firebug to figure this out.

One more thing. Can you verify that you can successfully hit that URL? Are you able to successfully point your browser to http://your.url.here/ProductPricing/Products/RetenPeriod.aspx/UpdateRetenPeriod?

Also look at Pointy's solution. Your request is unlikely to succeed since you aren't passing in an actual object literal.

Answer 2

You're passing your parameters as a string instead of as an object literal:

 var params = "{'ProdID':'" + ProdID + "','RetenP':'" + reten + "'}";

should (almost certainly) be:

 var params = {'ProdID': ProdID,'RetenP': reten};

Also, how do you know that the ajax request is not making it to the server? Have you tried tracing the HTTP requests with something like TamperData (for Firefox) or Firebug (also Firefox)?

Answer 3

Do you have a ScriptManager defined in the markup with EnablePageMethods set to true?

Also, I believe your params line should be:

var params = "{ProdID:'" + ProdID + "', RetenP:'" + reten + "'}";

I have several functions in my own apps that do it this way. You want the value of params to look like this: "{ProdID:'1,2', RetenP:'undefined'}"

Can you place a breakpoint at alert(e.statusText); to see what the error message is?