jquery selectable: How to make items selected at 1st load

Question

Hi, I am using jquery selectable to select items within a .net listview. user can select his desired item and can save it by clicking a save button. Next time when the user will come to page, he will be able to see his previously selected item.

Using Jquey selectable plugin user can select an item by clicking it. Now My question is: 1. How can I display the existing selected item at 1st load 2. After selecting items how can I get selected item's value from code behind page so that I can save it to database.

Any suggestion?

Thanks in advance.

my html code is:

<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>

And my javascript:

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

    });

</script>

Answer 1

To tap into the 1st load you want to use the document.ready function which is called after the page and the DOM loads e.g.

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

Answer 2

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

ui-selected

Ok, so it appears that you just want to add the CSS class "ui-selected" to the li that you want to be selected (which you have stored in the DB or wherever)? Is this correct? If so, the basic approach is to first remove that class from all elements (e.g. in the above HTML that class is on the first li but lets say the one we want to select is the 2nd one). So we first remove it from all li elements and then just add it to the desired one. The jQuery would be something like this:

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

This assumes you are selecting the 2nd li which has a DOM ID of '196600'. You would of course replace that at page rendering time.

To get the value to store later you must first need to know what value you actually need. Is it the image src or is it the value of the div with class "Profile_Interests_Card_ItemName", e.g. you want "Builder" or "Driver". Lets assume you want the later. So the idea is that on your form submit you add a jQuery event to parse your DOM and then grab the selected item and put it into a hidden form field which is then submitted to the backend.

Lets say your form has a DOM ID of "the_form" and you have (an initially empty) hidden form field called "type" with an ID of "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);
});

Now you have a hidden form field with the contents of the class "Profile_Interests_Card_ItemName" and it will be passed along to your server in a field called "type".