How to prevent duplicate entries in a jquery sortable sort list?

Question

I have two asp .. dropdowns, based on the values ​​selected in the two dropdowns, it will generate two unordered lists dynamically, in which I implemented the JQuery Sortable sort list. The first list contains some default values. I need to drag the required values ​​to the second list ... This should prevent duplicate entries from being added.

I am inserting my code below ... Please check this and provide me with a solution:

This is aspx code for two dropdowns:

<form id="form1" runat="server"> Application <asp:DropDownList ID="ApplicationList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="FetchRoleFromApplication" > </asp:DropDownList> Role <asp:DropDownList ID="RoleName" runat="server" onchange="javascript:ShowSortable();" > </asp:DropDownList> <ul id="sortable1" class="connectedSortable" runat="server" style="display:none"> </ul> <ul id="sortable2" class="connectedSortable" style="display:none" runat="server" > </ul> </form> 

The first ul list is independent, so its values ​​are loaded into codebehind (pageload) as follows:

  HtmlGenericControl li; JavaScriptSerializer objJSSerializer = new JavaScriptSerializer(); foreach (FetchUserGroup_Result objectItem in Allusergroup) { li = new HtmlGenericControl("li"); li.ID = objectItem.group_id.ToString(); li.Attributes.Add("class", "ui-state-default"); li.InnerText = objectItem.group_name; sortable1.Controls.Add(li); } 

The second value of the ul list is loaded with an ajax call like this ...

 function ShowSortable() { $('#sortable1').show(); var postJSONData = JSON.stringify({ ApplicationId: $('#applnhdnname').val(), RoleName: $('#RoleName').val() }); $.ajax({ type: 'POST', data: postJSONData, url: 'UserManagementService.svc/GetUserGroupsForApplicationRole', dataType: 'json', async: false, contentType: 'application/json; charset=utf-8', success: function success(response) { $("#sortable2").append(response.d); $('#sortable2').show(); }, error: SessionExpiryHandler }); } 

The corresponding wcf service is as follows:

 [OperationContract] [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json)] public string GetUserGroupsForApplicationRole(string ApplicationId, string RoleName) { User user = new User(); JavaScriptSerializer objJSSerializer = new JavaScriptSerializer(); List<GetUserGroupForApplicationRole_Result> usergroup; usergroup = user.GetUserGroupForApplicationRole(ApplicationId, RoleName); string sample = string.Empty; foreach (GetUserGroupForApplicationRole_Result objectItem in usergroup) { sample += "<li id= "+objectItem.group_id+ " class='ui-state-highlight'>"; sample += objectItem.group_name; sample+="</li>"; } return sample; } 

How to avoid duplication of meaning in this ... Please help me.

Thanks in advance.

Answer 1

Hi, change your javascript as follows:

  <script> function ShowSortable() { $('#sortable1').show(); var postJSONData = JSON.stringify({ ApplicationId: $('#applnhdnname').val(), RoleName: $('#RoleName').val() }); $.ajax({ type: 'POST', data: postJSONData, url: 'UserManagementService.svc/GetUserGroupsForApplicationRole', dataType: 'json', async: false, contentType: 'application/json; charset=utf-8', success: function success(response) { for(var i=0; i<response.d.length;i++) { var myOption = $("<option value= " + response.d[i] + "> " + response.d[i] + " </option>"); if ($("#sortable2").length == 0) { $("#sortable2").append(myOption); } $("#sortable2> option").each(function() { if (response.d[i] != this.value) { $("#sortable2").append(myOption); } }); } $('#sortable2').show(); }, error: SessionExpiryHandler }); } </script>