jquery ajax doesn't fire

Question

I am trying to call a server-side function using Jquery ajax, it doesn't work, I get no error. what can be the problem ? is there a set of rules to make sure my $ajax will work?

//HTML

 <asp:DropDownList ID="DDL" runat="server">
                  <asp:ListItem>aaa</asp:ListItem>
                    <asp:ListItem>bbb</asp:ListItem>
                </asp:DropDownList>

//JS

 $(document).ready(function () {
            $("#DDL").change(function () {                             
                $.ajax({
                    type: "POST",
                    url: "signToCity.aspx/getStreets",
                    contentType: "application/json; charset=utf-8"              
                });

            });
        });

//Serverside

  [WebMethod]
        public static void getStreets()
        {                       
         string test="no return:just checking by breakpoint if function is working."

        }

Answer 1

Here are the detail of rules to make a AJAX Call : See Here in detail

$.ajax({
   url: 'http://api.joind.in/v2.1/talks/10889',
   data: {
      format: 'json'
   },
   error: function() {
      $('#info').html('<p>An error has occurred</p>');
   },
   dataType: 'jsonp',
   success: function(data) {
      var $title = $('<h1>').text(data.talks[0].talk_title);
      var $description = $('<p>').text(data.talks[0].talk_description);
      $('#info')
         .append($title)
         .append($description);
   },
   type: 'GET'
});

Answer 2

Change your server side code to the following: (change void to string and return value)

c#

[WebMethod]
public static string getStreets()
{
    return "no return:just checking by breakpoint if function is working.";
}

jQuery: (add handlers for ajax response)

$.ajax({
    type: "POST",
    url: "signToCity.aspx/getStreets",
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        console.log(response.d);
    },
    error: function (response) {
        console.log('error ' + JSON.stringify(response));
    }
});

Answer 3

Are you setting the clientidmode to static for your web control somewhere? If not, ASP.NET renders it with an entirely different id

You labeled the follwing as HTML:

<asp:DropDownList ID="DDL" runat="server">
                  <asp:ListItem>aaa</asp:ListItem>
                    <asp:ListItem>bbb</asp:ListItem>
                </asp:DropDownList>

but it is not HTML, it is your aspx page that will be processed and output html. Look at the page source and see the actual HTML that is rendered. You will notice your dropdown list is a select element with an id something like ctl00$ContentPlaceHolder1$Page$#DDL

Your jQuery cant find $("#DDL") because it doesnt exist.

Option 1:

If your javascript is directly on the .aspx page and not external, you can use the following to print the generated client id to your page

 ...$("#<%=DDL.ClientID%>").change(function () {                             
                $.ajax({...

Option 2:

Your other option is to set the ClientIDMode of your DropDownList to static , so it doesn't change when the page is rendered

<asp:DropDownList ID="DDL" runat="server" ClientIDMode="static">
                  <asp:ListItem>aaa</asp:ListItem>
                    <asp:ListItem>bbb</asp:ListItem>
                </asp:DropDownList>

Answer 4

Could your url be the problem? signToCity.aspx/getStreets doesn't look right. Perhaps it's supposed to be signToCity/getStreets.aspx ?

Or even just signToCity/getStreets ?