我有点困难，试图找出如何通过目录号码选择项目的填充信息弹出模式。目录号具有打开模态的触发器。我对ajax和模态很陌生，所以任何帮助都会受到赞赏！ ：）
加载表格：
function loadCollectionIndex() {
$.ajax({
url: '/getAllCollectables/all',
method: 'GET'
}).then(function(items) {
var tbody = $('tbody');
for(var i=0; i < items.length; i++) {
var item = items[i];
var colorString = '';
var keywordString = '';
item.colors.forEach(function(value, index, color) {
if (index == (color.length - 1)) {
colorString += value.name;
} else {
colorString += value.name + ', ';
}
});
item.keywords.forEach(function(value, index, keyword) {
if (index == (keyword.length - 1)) {
keywordString += value.keywordName;
} else {
keywordString += value.keywordName + ', ';
}
});
tbody.append('<tr id="itemCatalogNumberRow" class="newRow"><td class="itemCatalogNumber" data-toggle="modal" data-target="#updateModal">'
+ item.itemCatalogNumber
+ '</td><td class="itemName">'
+ item.itemName
+ '</td><td class="itemCategory">'
+ item.category.categoryType
+ '</td><td class="itemDescription">'
+ item.itemDescription
+ '</td><td class="itemAge">'
+ item.itemAge
+ '</td><td class="itemCondition">'
+ item.condition.conditionName
+ '</td><td class="itemColor">'
+ colorString
+ '</td><td class="itemKeyword">'
+ keywordString
+ '</td><td class="itemSold">'
+ item.sold
+ '</td></tr>');
}
});
这是我到目前为止更新框的ajax：
$.ajax({
url: '/getAllCollectables/all',
method: 'GET'
}).then(function(collectables){
var obj = JSON.parse(JSON.stringify(collectables));
var item;
for(var i = 0; i < obj.length; i++)
{
item = obj[i];
$("#updateCollectableSelect").append('<option value='+item.collectableId+'>' + item.itemName + '</option>');
}
});
// On select change
$("#updateCollectableSelect").on("change", function() {
onUpdateSelect();
});
// On submit click
$("#updateSubmit").click(function(event){
event.preventDefault();
updateItem();
});
这里是更新模式的HTML：
<div>
<!-- Modal -->
<div id="updateModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Add an Item </h4>
</div>
<div class="modal-body">
<div id="updateItem">
<form>
<select name = "dropDownMenu" id="updateCollectableSelect">
<option value = "Select a Collectable"> Select a Collectable </option>
</select>
<div>
<label> ID Number </label><br>
<span id="updateIdNum"></span>
<br></div>
<br><div>
<label> Catalog Number </label>
<input type="text" id="updateItemCatalogNumber">
<p class="error" id="updateItemCatalogNumberError"></p>
<br></div>
<br><div>
<label> Collectable Name </label>
<input type="text" id="updateItemName">
<p class="error" id="updateItemNameError"></p>
<br></div>
<br><div>
<label> Collectable Age </label>
<input type="text" id="updateItemAge">
<p class="error" id="updateItemAgeError"></p>
<br></div>
<br><div>
<label> Collectable Description </label>
<input type="text" id="updateItemDescription">
<p class="error" id="updateItemDescriptionError"></p>
<br></div>
<br><div id="categorySelectDiv">
<select id="addCatagorySelect" class="" name="catagorySelect">
<option class="" value="select">Select Category</option>
</select>
<br></div>
<br><div id="conditionSelectDiv">
<select id="addConditionSelect" class="" name="conditionSelect">
<option class="" value="select">Select Condition</option>
</select>
<br></div>
<br><div id="addColorDiv">
<div id="colorSelectDiv">
<select id="addColorSelect" class="" name="colorSelect" multiple>
<option class="" value="select">Select Color</option>
</select>
<br></div>
<div>
<p>Hold down the Ctrl button to select multiple color options.</p>
</div>
<div id="addKeywordDiv">
<div id="keywordSelectDiv">
<select id="addKeywordSelect" class="" name="keywordSelect" multiple>
<option class="" value="select">Select Keyword</option>
</select>
</div>
<div>
<p>Hold down the Ctrl button to select multiple keyword options.</p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal"> Submit </button>
</div>
</div>
</div>
</div>
</div>
提前非常感谢你！
答案 0 :(得分：0)
好吧，我已经用ajax请求模拟了你的场景，最终向你展示了一个可能的解决方案，以解决你的问题。
我的测试服务器（http://dfjb.webcindario.com/getAllCollectables.php?action=all）的json数据是：
[
{
"collectableId": 1,
"itemCatalogNumber": 150,
"itemName": "name...",
"category": {
"categoryType": "category Type..."
},
"itemDescription": "item desc...",
"itemAge": 29,
"condition": {
"conditionName": "condition Name..."
},
"sold": 10,
"colors": [
{
"name": "Red"
},
{
"name": "Blue"
}
],
"keywords": [
{
"keywordName": "keywordName 1"
},
{
"keywordName": "keywordName 2"
}
]
},
{
"collectableId": 2,
"itemCatalogNumber": 151,
"itemName": "name 2...",
"category": {
"categoryType": "category Type..."
},
"itemDescription": "item desc 2...",
"itemAge": 30,
"condition": {
"conditionName": "condition Name..."
},
"sold": 15,
"colors": [
{
"name": "Green"
},
{
"name": "White"
},
{
"name": "Brown"
}
],
"keywords": [
{
"keywordName": "keywordName 1"
},
{
"keywordName": "keywordName 2"
}
]
}
]
要使用所选数据打开模态，我已将此代码添加到网格中：
<a class="openModal" href="#updateModal" data-toggle="modal" data-id="' + item.itemCatalogNumber + '">' + item.itemCatalogNumber + '</a>
其中：
data-id包含网格中当前所选项目的itemCatalogNumber个数字。
在此解决方案中，我使用以下内容：
$(function() {
var data = []; // Declare an array to store the json data from server.
function loadCollectionIndex() {
$.ajax({
url: 'http://dfjb.webcindario.com/getAllCollectables.php?action=all',
method: 'GET',
dataType: "json"
}).then(function(items) {
data = items; // Set the data variable with the current response from the server.
var tbody = $('tbody');
for (var i = 0; i < items.length; i++) {
var item = items[i];
var colorString = '';
var keywordString = '';
item.colors.forEach(function(value, index, color) {
if (index == (color.length - 1)) {
colorString += value.name;
} else {
colorString += value.name + ', ';
}
});
item.keywords.forEach(function(value, index, keyword) {
if (index == (keyword.length - 1)) {
keywordString += value.keywordName;
} else {
keywordString += value.keywordName + ', ';
}
});
tbody.append('<tr id="itemCatalogNumberRow" class="newRow"><td class="itemCatalogNumber"><a class="openModal" href="#updateModal" data-toggle="modal" data-id="' + item.itemCatalogNumber + '">' + item.itemCatalogNumber + '</a></td><td class="itemName">' + item.itemName + '</td><td class="itemCategory">' + item.category.categoryType + '</td><td class="itemDescription">' + item.itemDescription + '</td><td class="itemAge">' + item.itemAge + '</td><td class="itemCondition">' + item.condition.conditionName + '</td><td class="itemColor">' + colorString + '</td><td class="itemKeyword">' + keywordString + '</td><td class="itemSold">' + item.sold + '</td></tr>');
}
});
}
loadCollectionIndex();
// When the user clicks in the link, open the modal and show the current data.
$(document).on("click", ".openModal", function() {
var id = parseInt($(this).data("id"), 10); // Gets the data-id value (itemCatalogNumber).
console.log(id);
var result = {}; // Declare an object to store the current object to populate in the modal form.
result = data.filter(function(x) {
return x.itemCatalogNumber === id; // From the array, only return an object which matches with the criteria.
})[0];
console.log(result); // Show the object in the console.
/*
Set the values from the result object in every field in the form.
*/
$("#updateCollectableSelect").append('<option value=' + result.collectableId + '>' + result.itemName + '</option>');
$("#updateIdNum").text(result.collectableId);
$("#updateItemCatalogNumber").val(result.itemCatalogNumber);
$("#updateItemName").val(result.itemName);
$("#updateItemAge").val(result.itemAge);
$("#updateItemDescription").val(result.itemDescription);
$("#addCatagorySelect").html('<option class="" value="select">Select Category</option>');
$("#addCatagorySelect").append("<option value=" + result.category.categoryType + ">" + result.category.categoryType + "</option>");
$("#addConditionSelect").html('<option class="" value="select">Select Condition</option>');
$("#addConditionSelect").append("<option value=" + result.condition.conditionName + ">" + result.condition.conditionName + "</option>");
$("#addColorSelect").html('<option class="" value="select">Select Color</option>');
// Fills colors in the <select> tag.
for (var i = 0; i < result.colors.length; i++) {
$("#addColorSelect").append("<option value=" + result.colors[i].name + ">" + result.colors[i].name + "</option>");
}
$("#addKeywordSelect").html('<option class="" value="select">Select Keyword</option>');
// Fills keywords in the <select> tag.
for (i = 0; i < result.colors.length; i++) {
$("#addKeywordSelect").append("<option value=" + result.keywords[i].keywordName + ">" + result.keywords[i].keywordName + "</option>");
}
});
});<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</head>
<body>
<div>
<table border="1" class="table">
<thead>
<tr>
<th>Catalog Number</th>
<th>Name</th>
<th>Category Type</th>
<th>Item Description</th>
<th>Item Age</th>
<th>Condition Name</th>
<th>Colors</th>
<th>Keywords</th>
<th>Sold</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div>
<!-- Modal -->
<div id="updateModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Add an Item </h4>
</div>
<div class="modal-body">
<div id="updateItem">
<form>
<select name="dropDownMenu" id="updateCollectableSelect">
<option value="Select a Collectable">Select a Collectable</option>
</select>
<div>
<label>ID Number</label>
<br>
<span id="updateIdNum"></span>
<br>
</div>
<br>
<div>
<label>Catalog Number</label>
<input type="text" id="updateItemCatalogNumber">
<p class="error" id="updateItemCatalogNumberError"></p>
<br>
</div>
<br>
<div>
<label>Collectable Name</label>
<input type="text" id="updateItemName">
<p class="error" id="updateItemNameError"></p>
<br>
</div>
<br>
<div>
<label>Collectable Age</label>
<input type="text" id="updateItemAge">
<p class="error" id="updateItemAgeError"></p>
<br>
</div>
<br>
<div>
<label>Collectable Description</label>
<input type="text" id="updateItemDescription">
<p class="error" id="updateItemDescriptionError"></p>
<br>
</div>
<br>
<div id="categorySelectDiv">
<select id="addCatagorySelect" class="" name="catagorySelect">
<option class="" value="select">Select Category</option>
</select>
<br>
</div>
<br>
<div id="conditionSelectDiv">
<select id="addConditionSelect" class="" name="conditionSelect">
<option class="" value="select">Select Condition</option>
</select>
<br>
</div>
<br>
<div id="addColorDiv">
<div id="colorSelectDiv">
<select id="addColorSelect" class="" name="colorSelect" multiple>
<option class="" value="select">Select Color</option>
</select>
<br>
</div>
<div>
<p>Hold down the Ctrl button to select multiple color options.</p>
</div>
<div id="addKeywordDiv">
<div id="keywordSelectDiv">
<select id="addKeywordSelect" class="" name="keywordSelect" multiple>
<option class="" value="select">Select Keyword</option>
</select>
</div>
<div>
<p>Hold down the Ctrl button to select multiple keyword options.</p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
希望这对你有所帮助。
无论如何，当您致电getAllCollectables/all时，如果您从服务器向我们提供您的json数据会很有帮助。