Help: AJAX request giving 404 from mobile app

1 posts, 0 answers
  1. citm09
    citm09 avatar
    1 posts
    Member since:
    Jul 2016

    Posted 22 Jul Link to this post

    Hi there,
    I'm writing a mobile app that uses AJAX. I have never used AJAX before so to see how AJAX works, I wrote a simple app that talks to asp.net page.  The app is a simple form (one text field and submit button) 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 that is inside index.html.

    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:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
        <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
        <link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
        <script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
        <script>
            var SectedCityCode, URL, prov;
            $(document).bind('mobileinit', function () {
                $.mobile.pushStateEnabled = false;
            });
        </script>
        <title>Hello World</title>
    </head>
    <body>
        <!-- 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>   
        </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 -->
        <script type="text/javascript" src="js/index.js"></script>
    </body>
    </html>

    --------------------

    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) {
                // Send data to server through the Ajax call
                // action is functionality we want to call and outputJSON is our data
                $.ajax({
                    url: 'http://somewebsite/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 the following:

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

    -----------------------------

    Thanks

    Joe

     

     

Back to Top