0
我有一個頁面部分動態創建，其中一些select2元素是從ajax調用中返回的。然後我需要做一些jquery來操縱它。這個頁面有點複雜，因爲它在表格中顯示錶格，每行都是一個表格。在動態創建的select2元素上操作樣式和工具提示器
我想要做的是在select2元素中沒有數據輸入時呈現紅色邊框和工具提示。 select2字段是必需的，它應該顯示用戶錯誤消息，因爲沒有數據輸入。頁面上有幾個這樣的select2元素，並且它們都不顯示任何工具提示。其他非select2字段顯示他們的工具提示。
對於一些控制檯記錄器，我可以看到提交給工具提示器的錯誤消息數據是從表單提交中返回的。我也可以看到jQuery提供的tooltipster對象。但它不會顯示，也不會變成紅色。
在Ajax調用的成功的地產保存數據的一行：
if ($.isEmptyObject(result['messages']['success'])) {
if (!$.isEmptyObject(result['messages']['client_id'])) {
var html = '';
$.each(result['messages']['client_id'], function(index, value) {
html += ' ' + value;
});
displayError('#clients[' + maxLevel + ']-' + id, html);
displayError('#client_id-' + id, html);
}
for (j = 0; j <= maxLevel; j++) {
if (!$.isEmptyObject(result['messages']['clients[' + j + ']'])) {
var html = '';
$.each(result['messages']['clients[' + j + ']'], function(index, value) {
html += ' ' + value;
});
console.log($('[name^="clients[' + j + ']-'+id+'"]'));
console.log(html);
displayError('[name^="clients[' + j + ']-'+id+'"]', html);
displayError('#clients[' + j + ']-' + id, html);
displayError('#client_id-' + id, html);
}
}
的函數來顯示錯誤：
function displayError(id, html) {
$(id).css('border-color', 'red');
$(id).attr('title', html);
displayTooltipster(id);
}
function displayTooltipster(id) {
if (!$(id).hasClass("tooltipstered")) {
$(id).tooltipster({
position: 'top-left',
contentAsHTML: 'true',
theme: '.tooltipster-default',
animation: 'grow'
});
} else {
$(id).tooltipster('enable');
}
}
控制檯記錄器有這顯示：
[input#clients[0]-212713.form-control.input-small.tooltipster.select2-offscreen, prevObject: init(1), context: document, selector: "[name^="clients[0]-212713"]"]
vehicule-realocate:554 Une valeur est requise et ne peut être vide
vehicule-realocate:553
[input#clients[1]-212713.form-control.input-small.tooltipster.select2-offscreen, prevObject: init(1), context: document, selector: "[name^="clients[1]-212713"]"]
vehicule-realocate:554 Une valeur est requise et ne peut être vide
vehicule-realocate:553
在每一行上，有幾個select2字段;每個以鏈式方式顯示，下一個代替前一個，允許選擇樹中的節點。這工作得很好，讓我來瀏覽節點樹：
function handleSelect2Fields() {
for (var i=0; i <= maxLevel; i++) {
var el = $('[name^="clients[' + i + ']"]');
el.data('level', i);
el.select2({
width: 'element',
ajax: {
url: '<?php echo $this->url('users/get-client-options'); ?>',
type: 'post',
dataType: 'json',
data: function(term, page) {
var level = parseInt(this.data('level'));
if (level > 0) {
var sameRowClients = $(this).parent().parent();
var oneClientFromSameRow = sameRowClients.find('[name^="clients[' + (level-1) + ']"]');
var el = oneClientFromSameRow;
return {client_id : el.val(), term : term}
}
},
results: function(data, page) {
data.datas.push({'id':0, 'text':'[Retour]'});
return {results : data.datas, more : false}
}
},
initSelection : function (element, callback) {
}
});
el.on('change', function(e) {
var selectedValue = e.val;
var level = parseInt($(this).data('level'));
if (selectedValue == 0) {
if (level > 0) {
level -= 1;
}
} else {
level += 1;
}
for (var i=0; i <= maxLevel; i++) {
var sameRowClients = $(this).parent().parent();
var oneClientFromSameRow = sameRowClients.find('[name^="clients[' + i + ']"]');
var el = oneClientFromSameRow;
if (i == level) {
oneClientFromSameRow.parent().show();
el.select2("val", '');
el.select2("readonly", false);
el.select2("open");
} else if (i < level && level <= maxLevel) {
oneClientFromSameRow.parent().hide();
} else if (i > level) {
oneClientFromSameRow.parent().hide();
el.select2("readonly", true);
el.select2("val", '');
}
}
var id_suffix = oneClientFromSameRow.attr('id').split('-')[1];
if (level > maxLevel) {
$('[name=client_id-' + id_suffix + ']').val($(this).val());
} else {
$('[name=client_id-' + id_suffix + ']').val('');
}
$('[name=client_id-' + id_suffix + ']').val($(this).val());
});
if (i != 0) {
if (! el.val()) {
el.select2("readonly", true);
$('[name^="clients[' + i + ']"]').parent().hide();
}
}
}
function loadItems() {
$.ajax({
url: "<?php echo $this->url('ajax', array('action' => 'get-vehicules-to-realocate'));?>",
data: {'maxLevel': maxLevel},
type: 'post',
success: function(items) {
$.each(items['html'], function(id, contentHtml) {
$('#list-items').append(contentHtml);
});
$('#nb_items').html(items['total']);
$('#header').html(items['header']);
$(".datepicker").datepicker({ 'dateFormat': 'yy-mm-dd'});
handleSelect2Fields();
}
});
}
在服務器端，會產生一些標記來渲染選擇2元素：
$client = '<input type="hidden" name="client_id-' . $id . '" id="client_id-' . $id . '" value="" class="tooltipster">';
for ($j = 0; $j <= $maxLevel; $j++) {
$client .= '<span><input type="hidden" name="clients[' . $j . ']-' . $id . '" id="clients[' . $j . ']-' . $id . '" value="" class="form-control input-small tooltipster" required></span>';
}
客戶端領域是一個引導內表格：
$html[$i] = '<div class="row" id="bloc-' . $id . '">'
. '<div class="span1" style="text-align:center; white-space:nowrap;">' . $client . '</div>'