jQuery selectable: как сделать элементы выделенными при первой загрузке

Question

Я использую jQuery для выбора элементов в списке .net. Пользователь может выбрать нужный элемент и сохранить его, нажав кнопку «Сохранить». В следующий раз, когда пользователь зайдет на страницу, он сможет увидеть свой ранее выбранный элемент.

Используя выбираемый плагин jQuery, пользователь может выбрать элемент, щелкнув по нему.

Теперь мои вопросы:

1. Как я могу отобразить существующий выбранный элемент при первой загрузке?
2. После выбора элементов, как я могу получить значение выбранного элемента из кода за страницей, чтобы сохранить его в базе данных?

Есть предложения?

Заранее спасибо.

Моя HTML-разметка:

<ul id="ulSelectable" class="ui-selectable">
  <li id="196500" class="ui-selectee ui-selected">
    <div id="dvItem">
      <img id="Interest_lvResult_ctrl0_ctl00_imgInterest" src="Images/Pic1.jpg"/>
    </div>
    <div class="Profile_Interests_Card_ItemName"> Driver </div>
  </li>
  <li id="196600" class="ui-selectee">
    <div id="dvItem">
      <img id="Interest_lvResult_ctrl0_ctl01_imgInterest"  src="Images/Pic2.jpg" />
    </div>
    <div class="Profile_Interests_Card_ItemName"> Builder </div>
  </li>
</ul>

И мой JavaScript:

<script type="text/javascript">
    var setSelector = "#ulSelectable";
    $(function() {
        $(setSelector).selectable({ filter: 'li' });

    });
</script>

Answer 1

$ ( '# ulSelectable') .find ( 'ли') .removeClass ( «щ выбранных») .конец() .find ( '# 196600') .addClass ( 'щ выбранных');

щ выбраны

Хорошо, похоже, вы просто хотите добавить класс CSS "ui-selected" в li, который хотите выбрать (который вы сохранили в БД или где-то еще)? Это правильно? Если это так, основной подход состоит в том, чтобы сначала удалить этот класс из всех элементов (например, в приведенном выше HTML этот класс находится на первом li, но давайте предположим, что тот, который мы хотим выбрать, является вторым). Поэтому мы сначала удаляем его из всех элементов li, а затем просто добавляем его к нужному. JQuery будет что-то вроде этого:

$('#ulSelectable')
.find('li')
  .removeClass('ui-selected')
  .end()
.find('#196600')
  .addClass('ui-selected');

Предполагается, что вы выбираете 2nd li с идентификатором DOM '196600'. Вы, конечно, замените это во время рендеринга страницы.

Чтобы получить значение для последующего хранения, сначала необходимо узнать, какое значение вам действительно нужно. Это изображение src или значение div с классом "Profile_Interests_Card_ItemName", например, Вы хотите "Строитель" или "Водитель". Предположим, вы хотите позже. Таким образом, идея заключается в том, что в форме отправки вы добавляете событие jQuery для анализа DOM, а затем захватываете выбранный элемент и помещаете его в скрытое поле формы, которое затем отправляется в бэкэнд.

Допустим, ваша форма имеет идентификатор DOM "the_form" и у вас есть (изначально пустое) скрытое поле формы с именем "type" с идентификатором "job_type":

$('#the_form').submit(function(n) {
  //grab the LI that is selected
  var li = $('#ulSelectable').find('li.ui-selected');
  //now find the div with our class within this li and grab its inner text
  var job_type = li.find('div.Profile_Interests_Card_ItemName').text();
  //set the hidden field
  $('#job_type').val(job_type);
});

Теперь у вас есть скрытое поле формы с содержимым класса "Profile_Interests_Card_ItemName", и оно будет передано на ваш сервер в поле с именем "type".

Answer 2

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

$(document).ready(function(n) {
// your code will be executed here after the DOM loads
});