AJAX request giving 404 from mobile app RSS

• • Reply
  joegreen2005

  Member

  55 Points

  450 Posts

  AJAX request giving 404 from mobile app

  Jul 20, 2016 01:38 PM|joegreen2005|LINK

  Hi there,

  I'm writing a test mobile app using asp.net, jquery mobile and phonegap.  I have a simple form in which you enter an year and click submit. Ajax call is made to results.aspx.cs page on the server which returns the result and displayed on 2nd page.

  When I run mobile app on local server I'm getting 404 error -- responseText: "Cannot POST /results.aspx.cs/IsLeapYear↵", status: 404, statusText: "Not Found"}. 
  

  index.html page contains the following:

  <!-- Start of first page -->
      <div data-role="page" id="home">
  
          <div data-role="header">
              <h1>Test</h1>
          </div>
  
          <div data-role="content">
              <div data-role="main" class="ui-content">
                  <div class="ui-body ui-body-a ui-corner-all">
                      <form id="checkyear" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
                          <label for="txtYear">Enter the year:</label>
                          <input type="text" name="txtYear" id="txtYear" value="" />
                          <input type="button" data-theme="b" name="submit" id="submit" value="Submit">
                      </form>
                  </div>
              </div>
  
          </div>
  
          <div data-role="footer" data-position="fixed">
              <h4>Page footer</h4>
          </div>
  
          <script type="text/javascript" src="js/index.js"></script>
  
      </div>
      <!-- end of first page -->
      <!-- start of second page -->
      <div data-role="page" id="second">
          <div data-theme="a" data-role="header">
              <h3>Welcome Page</h3>
          </div>
  
          <div data-role="content">
              <p id="result"></p>
          </div>
  
          <div data-theme="a" data-role="footer" data-position="fixed">
              <h3>Page footer</h3>
          </div>
      </div>
      <!-- end of second page -->

  index.js contains the following

  $(document).on('pageinit', '#home', function () {
      $(document).on('click', '#submit', function () { // catch the form's submit event
          if ($('#txtYear').val().length > 0) {
              $.ajax({
                  url: 'results.aspx.cs/IsLeapYear',
                  data: '{ year: "' + txtYear.value + '"}',
                  type: 'post',
                  async: 'true',
                  dataType: 'json',
                  success: function (result) {
                      if (result.status) {
                          result.val = "Leap Year";
                          $.mobile.changePage("#second");
                      } else {
                          result.val = "Not a Leap Year";                        
                      }
                  },
                  error: function (request, error) {                    
                      // This callback function will trigger on unsuccessful action                
                      alert('Network error has occurred please try again!');
                  }
              });
          } else {
              alert('Please fill all necessary fields');
          }
          return false; // cancel original event to prevent form submitting
      });
  });

  results.aspx.cs contains following:

  [System.Web.Services.WebMethod]
   
  public static bool IsLeapYear(int year) 
  { 
    return DateTime.IsLeapYear(year); 
  }

  Can someone tell me what mistake am I making?

  Joe

• • Reply
  Nataraj Gand...

  Participant

  1914 Points

  485 Posts

  Re: AJAX request giving 404 from mobile app

  Jul 20, 2016 02:06 PM|Nataraj Gandhi Arunachalam|LINK

  Hi Joe,

  Could you please try with the following URL (without the .cs),

  url: 'results.aspx/IsLeapYear',

  Thanks and Regards,
  Nataraj
  ----------------------
  Please mark as answer if it helps!
• • Reply
  joegreen2005

  Member

  55 Points

  450 Posts

  Re: AJAX request giving 404 from mobile app

  Jul 20, 2016 02:18 PM|joegreen2005|LINK

  I don't have results.aspx page just results.aspx.cs. I tried a couple of things -

  renamed results.aspx.cs to results.aspx

  created results.aspx

  still getting error - jquery-2.1.3.min.js:4 POST http://169.254.51.156:3000/results.aspx/IsLeapYear 404 (Not Found)

  When I do 169.254.51.156:3000/results.aspx.cs with GET I get status 200 OK but with POST I get 404 Not Found. Any idea why?

• • Reply
  Nataraj Gand...

  Participant

  1914 Points

  485 Posts

  Re: AJAX request giving 404 from mobile app

  Jul 22, 2016 01:45 PM|Nataraj Gandhi Arunachalam|LINK

  Probably since the default behaviour of a method is is GET. To make a method to accept posted values, we will need to decorate it with the [HttpPost]. This applies for a MVC application. Please check if you may need to do this in your code too.

  Thanks and Regards,
  Nataraj
  ----------------------
  Please mark as answer if it helps!
• • Reply
  joegreen2005

  Member

  55 Points

  450 Posts

  Re: AJAX request giving 404 from mobile app

  Jul 22, 2016 02:20 PM|joegreen2005|LINK

  I've made some preogress, now I'm getting error - XMLHttpRequest cannot load http://somewebsite/results.aspx.cs/IsLeapYear. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://169.254.0.2:3000' is therefore not allowed access. The response had HTTP status code 403.

  http://169.254.0.2:3000 is a localserver that Phonegap Desktop is running on.