jQuery Mobile: проблемы с обновлением нескольких списков после добавления элементов

90
11

Надеюсь, что Название самоочевидно. Я использую jQuery mobile, чтобы заполнить серию представлений списков из информации, хранящейся в базе данных, каждое представление списка заполняет следующий в родительско-дочерних отношениях (например: первое представление списка позволяет вам выбирать животных, вы выбираете собаку, следующий список вид заселен родословными и т.д.).

В настоящий момент мой код правильно заполняет представления списков должным образом, проблема заключается в том, что если я вернусь к представлению родительского списка и сделаю другой выбор, представления дочерних списков не обновятся, и мы получим кучу добавленной информации. Я много читал везде, но я не могу найти правильную реализацию для моего кода.

HTML-контент (тело):

<ul data-role="listview" data-filter="false" data-inset="true" data-theme="a" data-divider-theme="a">
<li>
<label for="pet" class="select">Pet</label>
<select id="pet" data-mini="true" onchange="fill_list('pedigree', this);">
<option value=""></option>
</select>
</li>
<li>
<label for="pedigree" class="select">Pedigree</label>
<select id="pedigree" data-mini="true" onchange="fill_list('pet_name', this);">
<option value=""></option>
</select>
</li>
<li>
<label for="pet_name" class="select">Pet Name</label>
<select id="pet_name" data-mini="true">
<option value=""></option>
</select>
</li>
</ul>

JS:

function fill_list(next_list, this_list){
var pet_url = server_root_url + 'controler/pet/find_pet.php';
var value = this_list.options[this_list.selectedIndex].value;

var params = {
control: next_list,
value: value
};

$.ajax({
type: "POST",
url: pet_url,
async:false,
data: params,
success: function(json){
do_fill_list(json, next_list);
}
});
}

function do_fill_list(json, next_list){
var x = "#" + next_list;
var option = $(x);

/*------------------------------------------------------------------------------
EDIT:
Below is the solution I found for this issue.
Basically we capture the current list with the switch, empty it,
append it with a blank line, then let the rest of the code populate the list.
-------------------------------------------------------------------------------*/
switch(next_list){
case "pet":
options.html("").append("<option />");
break;

case "pedigree":
options.html("").append("<option />");
break;

case "pet_name":
options.html("").append("<option />");
break;

}
//-------------------------------------END EDIT------------------------------------
$.each(json.control,
function(i,control){
switch(next_list){
case "pet":
option.append($("<option />").val(control.pet).text(control.pet));
break;
case "pedigree":
option.append($("<option />").val(control.pedigree).text(control.pedigree));
break;
case "pet_name":
options.append($("<option />").val(control.pet_name).text(control.pet_name));
break;
}
}
);
}

Обратите внимание, что я вызываю функцию php, чтобы обрабатывать бэкэнд-выборку данных, но вы можете жестко кодировать эти данные, если вам нужно ее проверить. Кроме того, у меня есть прокомментированная строка в последней функции JS, о которой я много читал: метод обновления, который должен быть реализован для решения моей проблемы. Я пробовал бесчисленные способы сделать это, явно недостаточно.

Может ли кто-нибудь указать, как я могу решить свою проблему? Возможно, моя реализация не подходит для этой цели, если так ее можно изменить.

EDIT: Я добавил оператор switch, который разрешает эту проблему, он находится в методе JS-типа "do fill list".

спросил(а) 2012-04-13T17:10:00+04:00 8 лет, 5 месяцев назад
1
Решение
106

Код ниже - это решение моего вопроса (см. Выше полный код и отредактированный код). В основном все, что нужно сделать, это захват выбранного списка, его удаление и добавление пустой опции. Почему пустая опция? нажмите на список, и вы не сможете выбрать первый вариант, и вы не сможете его выбрать, если хотите его изменить.

Вставьте этот код в метод do_fill_list, прямо между var option = $ (x); И функция $.each(json.control(...):

switch(next_list){
case "pet":
options.html("").append("<option />");
break;

case "pedigree":
options.html("").append("<option />");
break;

case "pet_name":
options.html("").append("<option />");
break;

}

Этот код можно улучшить, чтобы очистить выбор дочерних элементов, когда родительский выбор был изменен. Я все еще работаю над этой функциональностью, если кому-то это нужно, вы можете попросить об этом, я уверен, что скоро это сделаю.

ответил(а) 2012-04-14T10:13:00+04:00 8 лет, 5 месяцев назад
57

РЕДАКТИРОВАТЬ

жаль, что я слишком поздно опоздал на мобильный.


попробуйте $(next_list).selectmenu('refresh', true);

:(

ответил(а) 2012-04-13T17:20:00+04:00 8 лет, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема