jQueryフォームの提出とエラーメッセージを使用して
-
03-10-2019 - |
質問
私はjQueryを使用してフォームの提出と検証を行っています。サーバー側からJSON形式で応答を取得しています。
JQUERYダイアログボックスにメッセージを表示していますが、サーバーからのメッセージを表示できません。
私のアプローチ:
<script type="text/javascript">
//<![CDATA[
$.validator.setDefaults({
submitHandler: function() {
var spogName = $("input#spogname").val();
var spogDis = $("input#spogdescription").val();
var dataString ='&spogName='+ spogName +'&spogDescription=' + spogDis;
$.ajax({
url: "/cpsb/spogMaster.do?method=addSpog",
type: "POST",
data: dataString,
cache: false,
success: function() {
$("#dialog-message").dialog({
resizable:false,
height:180,
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
},
error: function() {
}
});
},
highlight: function(input) {
$(input).addClass("ui-state-highlight");
},
unhighlight: function(input) {
$(input).removeClass("ui-state-highlight");
}
});
$(document).ready(function() {
navMenu();
$("#spogForm").validate({
rules: {
spogname:{
required: true
}
},
messages: {
spogname: "Please enter the Spog Name"
}
});
$(":submit").button();
});
//]]>
</script>
私のマークアップ:
<div id="dialog-message" title="Spog Message" style="display:none;">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Spog added successfully!
</p>
</div>
<div id="header"><jsp:include page="../menu_v1.jsp"/></div>
<div id="mainContent">
<div id="spog_form">
<form class="cmxform" id="spogForm" method="post" action="/cpsb/spogMaster.do?method=addSpog">
<fieldset class="ui-widget ui-widget-content ui-corner-all">
<legend class="ui-widget ui-widget-header ui-corner-all">ADD SPOG</legend>
<p>
<label for="spogname">Spog Name (required)</label>
<input id="spogname" name="spogName" class="required ui-widget-content" minlength="2" />
</p>
<p>
<label for="spogdescription">Spog Description </label>
<input id="spogdescription" name="spogDescription" class="spogD ui-widget-content" />
</p>
<p>
<button class="submit" type="submit">Submit</button>
</p>
</fieldset>
</form>
</div>
</div>
</body>
JSON文字列データベースに居住地が存在している場合は取得しています。
{"messageId":"errorMessage","message":"spog found with Name 10000 Description nuts"}
更新1:
<script type="text/javascript">
//<![CDATA[
$.validator.setDefaults({
submitHandler: function() {
var spogName = $("input#spogname").val();
var spogDis = $("input#spogdescription").val();
$.ajax({
url: "/cpsb/spogMaster.do?method=addSpog",
type: "POST",
datatype:'json',
data: {
method:"addSpog",
spogName:spogName,
spogDescription:spogDis
},
cache: false,
success: function(data) {
if ( data.messageId === 'errorMessage' ) {
// server responded with an error, show the error placeholder
// fill in the error message, and spawn the dialog
$("#dialog-message")
.find('.success').hide().end()
.find('.error').show()
.find('.message').text( data.message ).end()
.end()
.dialog({
resizable:false,
height:180,
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
} else {
// server liked it, show the success placeholder and spawn the dialog
$("#dialog-message")
.find('.error').hide().end()
.find('.success').show().end()
.dialog({
resizable:false,
height:180,
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
}
}
});
},
highlight: function(input) {
$(input).addClass("ui-state-highlight");
},
unhighlight: function(input) {
$(input).removeClass("ui-state-highlight");
}
});
$(document).ready(function() {
navMenu();
$("#spogForm").validate({
rules: {
spogname:{
required: true
}
},
messages: {
spogname: "Please enter the Spog Name"
}
});
$(":submit").button();
});
//]]>
</script>
マークアップ:
<div id="dialog-message" title="Spog Message" style="display:none;">
<p class="success">
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Spog added successfully!
</p>
<p class="error">
An error occurred while adding spog:
<span class="message"></span>
</p>
</div>
解決
@SAMが指摘しているように、成功コールバックを調整する必要があります。また、HTMLを少し調整する必要があります。
<div id="dialog-message" title="Spog Message" style="display:none;">
<p class="success">
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Spog added successfully!
</p>
<p class="error">
An error occurred while adding spog:
<span class="message">placeholder</span>
</p>
</div>
その後、JSが変わります...
success: function(data) {
if ( data.messageId && data.messageId === 'errorMessage' ) {
// server responded with an error, show the error placeholder
// fill in the error message, and spawn the dialog
$("#dialog-message")
.find('.success').hide().end()
.find('.error').show()
.find('.message').text( data.message ).end()
.end()
.dialog({
resizable:false,
height:180,
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
} else {
// server liked it, show the success placeholder and spawn the dialog
$("#dialog-message")
.find('.error').hide().end()
.find('.success').show().end()
.dialog({
resizable:false,
height:180,
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
}
},
他のヒント
上記の「成功」を追加します。 datatype: "json",
次に、成功を次のようなものに変更します。
success: function(data) {
$("#dialog-message").append('<p>'+data.message+'</p>').dialog({
resizable:false,
height:180,
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
},
基本的にあなたはする必要があります。
a) サーバーがJSONを返すことをコードに伝えます(したがって、それを評価する必要があります)
b) そのjsonで何かをしてください -たとえば、メッセージを引き出してダイアログボックスに追加します
上記のコードは単なる提案であり、私はそれをテストしていないことを理解してください!
所属していません StackOverflow