问题描述
工作代码段:
$(document).ready(function() {
//BEGIN FORM Validations
$('#validateForm').bootstrapValidator({
FeedbackIcons: {
valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'
},fields: {
patientSets: {
validators: {
notEmpty: {
message: 'Please select a patient set'
}
}
},titleOfResearchProject: {
validators: {
stringLength: {
min: 5,message: 'Please Enter the title with minimum 5 letters length'
},notEmpty: {
message: 'Please Enter title of your project'
}
}
},descriptionOfResearchProject: {
validators: {
stringLength: {
min: 15,max: 100,message: 'Please enter at least 15 characters and no more than 100'
},notEmpty: {
message: 'Please Enter Description'
}
}
},intendedUse: {
validators: {
notEmpty: {
message: 'Please select one option'
}
}
},}
});
//END FORM Validations
$("#add_dialog").dialog({
autoOpen: false,closeText: false,buttons: [{
text: "Ok",icon: "ui-icon-heart",click: function() {
console.log("OK button clicked");
let jsonData = {}
$.ajax({
type: "Post",url: "url",data: JSON.stringify(jsonData),contentType: 'application/json',async: true,cache: false,success: function(data) {
$.ajax({
url: 'url1',type: "POST",data: 'url2',contentType: "text/uri-list",dataType: "json",success: function() {
location.reload();
}
})
}
});
$(this).dialog("close");
}
},{
text: "Cancel",click: function() {
$(this).dialog("close");
}
}
]
});
$("#addnewdata").on("click",function(evt) {
$("#add_dialog").dialog("open");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm">
<div class="row">
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Select your patient sets:</label>
<select name="patientSets" class="form-control">
<option value=" ">Please select patient set</option>
<option>PS1</option>
<option>PS2</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Description of research project:</label>
<textarea class="form-control" name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
</div>
</div>
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Title of your research project:</label>
<input name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text"><button id="addnewdata">Add new data</button>
</div>
<div class="form-group">
<label class="control-label">Intended use:</label>
<select name="intendedUse" class="form-control">
<option value=" ">Please select one</option>
<option>test1</option>
<option>test2</option>
</select>
</div>
<!--<div class="form-group">
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
</div>-->
</div>
</div>
<div class="row" id="smartSearchdisp" style="margin-top: 25px;">
<p>A div for smart search!</p>
</div>
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
</form>
<div id="add_dialog" title="Add New Data" style="display:none;">
<form id="formDialog">
<p>
<b>Name:</b><br />
<input id="dataname" type="text" name="nameOfProject" />
</p>
<p>Description:
<textarea id="dataDescription" name="projectDescription" rows="4" cols="20"></textarea>
</p>
</form>
</div>
但是,当我尝试为Add New Data
按钮的jQuery对话框做同样的事情时,我得到jQuery.Deferred exception: too much recursion
错误,如下面的代码片段所示。我以与上述工作代码段的表单验证相同的方式添加了引导程序验证器代码。验证对话框的情况下我该怎么办?
不起作用的代码段:
$(document).ready(function() {
//BEGIN FORM Validations
$('#validateForm').bootstrapValidator({
FeedbackIcons: {
valid: 'glyphicon glyphicon-ok',}
});
//END FORM Validations
//BEGIN DIALOGE FORM validations
$('#formDialog').bootstrapValidator({
FeedbackIcons: {
valid: 'glyphicon glyphicon-ok',fields: {
nameOfProject: {
validators: {
notEmpty: {
message: 'Please enter project name'
}
}
},projectDescription: {
validators: {
notEmpty: {
message: 'Please enter description'
}
}
}
}
});
//END DIALOGE FORM validations
$("#add_dialog").dialog({
autoOpen: false,function(evt) {
$("#add_dialog").dialog("open");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm">
<div class="row">
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Select your patient sets:</label>
<select name="patientSets" class="form-control">
<option value=" ">Please select patient set</option>
<option>PS1</option>
<option>PS2</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Description of research project:</label>
<textarea class="form-control" name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
</div>
</div>
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Title of your research project:</label>
<input name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text"><button id="addnewdata">Add new data</button>
</div>
<div class="form-group">
<label class="control-label">Intended use:</label>
<select name="intendedUse" class="form-control">
<option value=" ">Please select one</option>
<option>test1</option>
<option>test2</option>
</select>
</div>
<!--<div class="form-group">
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
</div>-->
</div>
</div>
<div class="row" id="smartSearchdisp" style="margin-top: 25px;">
<p>A div for smart search!</p>
</div>
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
</form>
<div id="add_dialog" title="Add New Data" style="display:none;">
<form id="formDialog">
<p>
<b>Name:</b><br />
<input id="dataname" type="text" name="nameOfProject" />
</p>
<p>Description:
<textarea id="dataDescription" name="projectDescription" rows="4" cols="20"></textarea>
</p>
</form>
</div>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)