asp.net Web サービスへの ajax 呼び出しを使用して単純なフォームを送信しようとしていますが、フォームの送信時に「エラー」アラートを受け取ります。以下のコードの問題点を教えてください。
HTML:
<html>
<head>
<title>Facility</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="arealistpage">
<div data-role="header" data-theme="b">
<a href="Facility.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
</div><!-- /header -->
<div data-role="content">
<form id="form1" data-ajax="false" method="post">
<div id="AreaNoDiv" data-role="fieldcontain" class="field">
<label for="Facility">Facility*</label>
<input id="Facility" name="shipNo_r" type="text" required/>
</div>
<div id="desDiv" data-role="fieldcontain" class="field">
<label for="des" id="Label1" name="fnameLabel">Description*</label>
<input id="des" name="fname_r" type="text" required/>
</div>
<div id="submitDiv" data-role="fieldcontain" style="width: 30%">
<input type="submit" value="Add Facility" data-inline="true" id="submit"/>
</div>
</form>
</div><!-- /content -->
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li>
</ul>
</div>
</div>
</div><!-- /page -->
<script src="Submitscript.js" type="text/javascript"></script>
</body>
</html>
フォーム送信スクリプト:
$("#form1").submit(function () {
var serviceURL = 'service1.asmx/SubmitList';
var name = "chamara";
$.ajax({
type: "POST",
url: serviceURL,
data: '{"name":"' + name + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
// parse it as object
var outStr = JSON.parse(data.d);
alert(outStr);
}
function errorFunc() {
alert('error');
}
});
ウェブサービス：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService {
[WebMethod]
public string SubmitList(string name)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
string str = "Your Name is"+name;
string jsonString = serializer.Serialize(str);
return jsonString;
}
}
更新: フォーム送信後のナビゲーション ページ
<html>
<head>
<title>Facility</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
$('#arealistpage').live('pageshow', function (event) {
$('div[id="primaryList"] ul[data-role="listview"] a').bind("click", function () {
var facilityid = $(this).data("facilityid");
sessionStorage.facilityid = facilityid;
});
});
</script>
</head>
<body>
<div data-role="page" id="arealistpage">
<div data-role="header" data-theme="b">
<h1><a name="top"></a>Facility</h1>
<a href="../MenuePages/Dictionaries.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
<a href="AddFacility.aspx" data-role="button" data-icon="plus" data-theme="d" style="float:left;" rel="external" data-transition="slide" data-ajax="false">Add</a>
</div><!-- /header -->
<div data-role="content">
<div id="primaryList">
<ul data-role="listview" data-inset="true" data-theme="c" data-filter="true" id="areaList" data-split-icon="gear" data-split-theme="d">
</ul>
</div>
</div><!-- /content -->
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li>
</ul>
</div>
</div>
<script src="FacilityScript.js" type="text/javascript"></script>
</div><!-- /page -->
<div data-role="page" id="dialog">
<div data-role="header" data-theme="b">
<h1>Options</h1>
</div>
<ul data-role="listview" data-inset="false"
data-theme="c">
<li data-icon="false"><a href="UpdateFacility.aspx" data-ajax="false">Edit</a></li>
<li data-icon="false"><a href="#divMsg" data-rel="dialog" data-transition="pop">Delete</a></li>
</ul>
</div>
<div data-role="page" id="divMsg">
<div data-role="header" data-theme="b">
<h1>Confirmation</h1>
</div>
<div data-role="content">
<a href="Facility.aspx" onclick="DeleteFacility(); return true" data-role="button" data-ajax="false">Delete Record?</a>
</div>
<script src="FacilityScript.js" type="text/javascript"></script>
</div>
</body>
</html>