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