Невозможно получить правильное значение в панели панели Кено с помощью jquery
Основная информация
Я построил панель панели кендо, которая заполнена данными, у нее есть опция, которая дает пользователю возможность редактировать предварительно заполненные данные, которые отображаются при развертывании панели. Панель панели вложена в представление списка, а HTML-код, который отображается при развертывании панели, взят из шаблона Kendo.
Текущий номер
Когда панель расширяется, и пользователь выбирает для редактирования содержимого и добавления его, они нажимают кнопку подтверждения, чтобы добавить, однако текст, который я получаю, неверен. Я получаю только информацию, которая предположительно находится на первой панели. Независимо от того, какую панель я выбираю для редактирования и добавления, я нажимаю только те данные, которые находятся на первой панели.
Html
<div class="padding" style="display:none;" id="ApprovalFormWindow">
<div class="container">
<!--<div id="descriptionColumn" style="display:none"><b id="description">Title</b><b id="date">Modified Date</b></div>-->
<div id="descriptionColumn" style="display:none">
<div style="width: 95%; display: table;">
<div style="display: table-row">
<div style="width: 40px; display: table-cell; vertical-align:top;"><b>Title</b></div>
</div>
</div>
</div>
<ul id="listView" style="display:none"></ul>
<div id="pager" style="display:none"></div>
</div>
</div>
<script type="text/x-kendo-tmpl" id="ApprovalContentTemplate">
<li>
<table style="width: 95%;">
<tr>
<td class="selectedValue" style="width:40%; vertical-align:top;">#:Description#</td>
</tr>
</table>
<div id="topTabPanel" style="margin-top: -4px; padding-top: 5px; padding-bottom: 5px; border: 1px solid lightgray !important">
<label style="margin-left : 5px;" for="EditCheckBox">
Edit<input class="editBox" type="checkbox" id="EditCheckBox" value="true" style="margin-left: 5px;">
</label>
<button type="button" class="PreviewItem" style="border: 2px none; border-radius: 25px; margin-left: 15px;">Preview</button>
<button type="button" class="ApproveItem" style="border: 2px none; border-radius: 25px; margin-left: 15px;">Approve</button>
</div>
<div id ="PanelSelected" class="row demo-section k-content" style="border-top: 4px solid dodgerblue; border-bottom: 4px solid dodgerblue;">
<div class="col-xs-11" style="margin-top: 5px;">
<form class="form-inline">
<div class="form-group">
<label for="Title" class="required">Title</label>
<div><textarea class="k-textbox ApproversPanel" id="Title" name="Title" style="width: 220px;" readonly>#:Name#</textarea></div>
</div>
<div class="form-group">
<label for="KeyWords" class="required">KeyWords</label>
<div><textarea class="k-textbox ApproversPanel" id="KeyWords" name="KeyWords" style="width: 220px;" readonly>#:KeyWords#</textarea></div>
</div>
<div class="form-group">
<label for="jandra" class="required">Description</label>
<div><textarea class="k-textbox ApproversPanel" id="jandra" name="jandra" style="width: 220px;" readonly>#:jandra#</textarea></div>
</div>
<div class="form-group">
<label for="Summary" class="required">Summary</label>
<div><textarea class="k-textbox ApproversPanel" id="Summary" name="Summary" style="height: 100px; width: 220px;" readonly>#:Summary#</textarea></div>
</div>
</form>
</div>
</div>
</li>
Javascript
serverResponse = [
{
Name: "Test1",
KeyWords: "KeyWord1",
jandra: "Country",
Summary: "Test Item 1",
},
{
Name: "Test2",
KeyWords: "KeyWord2",
jandra: "Rap",
Summary: "Test Item 2",
},
{
Name: "Test3",
KeyWords: "KeyWord3",
jandra: "Pop",
Summary: "Test Item 3",
},
{
Name: "Test4",
KeyWords: "KeyWord4",
jandra: "Rock",
Summary: "Test Item 4",
},
{
Name: "Test5",
KeyWords: "KeyWord5",
jandra: "Blues",
Summary: "Test Item 5",
},
];
var selectedContent;
$("#listView").kendoListView({
dataSource: serverResponse,
autoBind: false,
pageable: true,
template: kendo.template($("#ApprovalContentTemplate").html()),
dataBound: function () {
$("#listView").kendoPanelBar({
// Made it single, however multiple would be nice
expandMode: "single",
select: function (e) {
var retrievedContent = serverResponse._data;
for (var x = 0; x < retrievedContent.length; x++) {
if (e.item.dataset.uid === retrievedContent[x].uid) {
selectedContent = retrievedContent[x];
}
}
},
});
$(".editBox").each(function (e) {
$(this).click(function (d) {
if ($(this).is(":checked")) {
$(".ApproversPanel").attr("readonly", false);
}
else {
$(".ApproversPanel").attr("readonly", true);
$("#ListItemTitle").val(selectedContent.Name);
$("#ListItemKeyWords").val(selectedContent.KeyWords);
$("#ListItemDescription").val(selectedContent.Description);
$("#ListItemSummary").val(selectedContent.ContentSummary);
var testThis = 0;
}
});
});
$(".PreviewItem").each(function (e) {
$(this).click(function (d) {
// Logic not built
});
});
$(".ApproveItem").each(function (e) {
$(this).click(function (d) {
var value = $("#PanelSelected").find(".ApproversPanel").children();
/*
* when a person push this to the datasource it will always push
* the first object in the array no mattyer what panel they selected to edit
* Name: "Test1",
* KeyWords: "KeyWord1",
* jandra: "Country",
* Summary: "Test Item 1",
*/
GetCurrentValue();
});
});
function GetCurrentValue() {
$(".ApproversPanel").each(function (e) {
var title = $("#Title").val();
var KeyWords = $("#KeyWords").val();
var Description = $("#jandra").val();
var ContentSummary = $("Summary").val();
/*
* This gives me the same results. not matter what panel I selected to edit and
* add I always get the first object.
* Name: "Test1",
* KeyWords: "KeyWord1",
* jandra: "Country",
* Summary: "Test Item 1",
*/
});
};
},
});
1 ответ
Ну... у вас есть 5 панелей, каждая из которых содержит набор текстовых полей с одинаковыми идентификатором и именем. идентификатор должен быть уникальным. Ваш селектор jquery в GetCurrentValue() идентификаторов всегда будет возвращать первый и первый только в том случае, если jquery принимает уникальный идентификатор и останавливается (он даже не подозревает, что вам нужен 4-й ввод с идентичным идентификатором). Вы должны сделать каждую из своих панелей уникальной в некотором роде и использовать соответствующий селектор.
Например, вы можете изменить щелчок кнопки "Подтвердить" на
$(".ApproveItem").each(function (e) {
$(this).click(function (d) {
var panel = $($(this).closest("li"));
var data = {
Name: panel.find("#Title").val(),
KeyWords: panel.find("#KeyWords").val(),
jandra: panel.find("#jandra").val(),
Summary: panel.find("#Summary").val()
}
console.log(data);
//var value = $("#PanelSelected").find(".ApproversPanel").children();
/*
* when a person push this to the datasource it will always push
* the first object in the array no mattyer what panel they selected to edit
* Name: "Test1",
* KeyWords: "KeyWord1",
* jandra: "Country",
* Summary: "Test Item 1",
*/
//GetCurrentValue();
});
});
Он получает ссылку на панель, связанную с нажатой кнопкой (используя ближайший), а затем использует ее для уточнения селекторов данных, чтобы найти дочерние элементы правильной панели.
http://dojo.telerik.com/@Stephen/avitO
Я уверен, что есть лучшие способы сделать это, используя MVDM Kendo (аналогично, но не идентично методам здесь: /questions/19655648/div-klonirovaniya-soderzhaschij-vhodyi-kendo/19655666#19655666) или добавив / удалив классы в выбранную панель, чтобы используйте для создания более конкретного селектора.